diff --git a/apps/website/screens/foundations/tokens/AliasTokenList.tsx b/apps/website/screens/foundations/tokens/AliasTokenList.tsx
index f7c16a6bd..095880123 100644
--- a/apps/website/screens/foundations/tokens/AliasTokenList.tsx
+++ b/apps/website/screens/foundations/tokens/AliasTokenList.tsx
@@ -18,7 +18,6 @@ const sections = [
subSections: [
{ title: "Border", content: },
{ title: "Background", content: },
- { title: "Shadow", content: },
{ title: "Text", content: },
],
},
@@ -26,13 +25,13 @@ const sections = [
title: "Dimensions",
subSections: [
{ title: "Height", content: },
- {
- title: "Shadow",
- content: ,
- },
{ title: "Spacing", content: },
],
},
+ {
+ title: "Shadow",
+ content: ,
+ },
{
title: "Typography",
subSections: [
diff --git a/apps/website/screens/foundations/tokens/CoreTokenList.tsx b/apps/website/screens/foundations/tokens/CoreTokenList.tsx
index 54c94f3c8..7076a5c52 100644
--- a/apps/website/screens/foundations/tokens/CoreTokenList.tsx
+++ b/apps/website/screens/foundations/tokens/CoreTokenList.tsx
@@ -7,56 +7,6 @@ import TokensTable from "./tables/TokensTable";
const sections = [
{
title: "Colors",
- content: (
- <>
- <>
- {/* Color Tokens */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- >
- <>
- {/* Dimensions Tokens */}
-
-
- >
- <>
- {/* Font Tokens */}
-
-
-
-
-
-
-
-
-
- >
- <>
- {/* Border Tokens */}
-
-
- >
- >
- ),
subSections: [
{ title: "Absolute", content: },
{ title: "Primary", content: },
@@ -73,7 +23,6 @@ const sections = [
{ title: "Dimensions", content: },
{
title: "Font",
- content: ,
subSections: [
{
title: "Font size",
diff --git a/packages/lib/src/styles/tokens.ts b/packages/lib/src/styles/tokens.ts
index a1a657dec..f634b6c09 100644
--- a/packages/lib/src/styles/tokens.ts
+++ b/packages/lib/src/styles/tokens.ts
@@ -19,9 +19,9 @@ export const coreTokens: Record = {
"--z-contextualmenu": 340,
/* Modals and overlays */
- "--z-spinner-overlay": 400,
- "--z-progressbar-overlay": 410,
- "--z-dialog": 420,
+ "--z-dialog": 400,
+ "--z-spinner-overlay": 410,
+ "--z-progressbar-overlay": 420,
"--z-alert": 430,
/* Notifications */
@@ -33,6 +33,8 @@ export const coreTokens: Record = {
/************/
/** TOKENS **/
/************/
+
+ /* Core tokens */
"--color-absolutes-black": "#000000",
"--color-absolutes-white": "#ffffff",
"--color-alpha-100-a": "#ebebeb1a",
@@ -167,6 +169,11 @@ export const coreTokens: Record = {
};
export const aliasTokens: Record = {
+ /************/
+ /** TOKENS **/
+ /************/
+
+ /* Alias tokens */
"--border-color-info-lightest": "var(--color-semantic01-50)",
"--border-color-info-lighter": "var(--color-semantic01-100)",
"--border-color-info-light": "var(--color-semantic01-200)",
@@ -299,8 +306,6 @@ export const aliasTokens: Record = {
"--color-fg-secondary-strong": "var(--color-secondary-700)",
"--color-fg-secondary-stronger": "var(--color-secondary-800)",
"--color-fg-secondary-strongest": "var(--color-secondary-900)",
- "--shadow-dark": "var(--color-alpha-400-a)",
- "--shadow-light": "var(--color-alpha-300-a)",
"--border-radius-none": "var(--dimensions-0)",
"--border-radius-xs": "var(--dimensions-2)",
"--border-radius-s": "var(--dimensions-4)",
@@ -320,22 +325,14 @@ export const aliasTokens: Record = {
"--height-xl": "var(--dimensions-40)",
"--height-xxl": "var(--dimensions-48)",
"--height-xxxl": "var(--dimensions-56)",
- "--shadow-high-spread": "var(--dimensions-0)",
- "--shadow-high-x-position": "var(--dimensions-0)",
- "--shadow-high-blur": "var(--dimensions-24)",
- "--shadow-high-y-position": "var(--dimensions-24)",
- "--shadow-higher-spread": "var(--dimensions-0)",
- "--shadow-higher-x-position": "var(--dimensions-0)",
- "--shadow-higher-blur": "var(--dimensions-48)",
- "--shadow-higher-y-position": "var(--dimensions-48)",
- "--shadow-low-spread": "var(--dimensions-0)",
- "--shadow-low-x-position": "var(--dimensions-0)",
- "--shadow-low-blur": "var(--dimensions-2)",
- "--shadow-low-y-position": "var(--dimensions-2)",
- "--shadow-mid-spread": "var(--dimensions-0)",
- "--shadow-mid-x-position": "var(--dimensions-0)",
- "--shadow-mid-blur": "var(--dimensions-12)",
- "--shadow-mid-y-position": "var(--dimensions-12)",
+ "--shadow-100":
+ "var(--dimensions-0) var(--dimensions-2) var(--dimensions-2) var(--dimensions-0) var(--color-alpha-400-a)",
+ "--shadow-200":
+ "var(--dimensions-0) var(--dimensions-12) var(--dimensions-12) var(--dimensions-0) var(--color-alpha-300-a)",
+ "--shadow-300":
+ "var(--dimensions-0) var(--dimensions-24) var(--dimensions-24) var(--dimensions-0) var(--color-alpha-300-a)",
+ "--shadow-400":
+ "var(--dimensions-0) var(--dimensions-48) var(--dimensions-48) var(--dimensions-0) var(--color-alpha-300-a)",
"--spacing-gap-none": "var(--dimensions-0)",
"--spacing-gap-xxs": "var(--dimensions-2)",
"--spacing-gap-xs": "var(--dimensions-4)",
diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css
index cf4919b5d..d668cd797 100644
--- a/packages/lib/src/styles/variables.css
+++ b/packages/lib/src/styles/variables.css
@@ -367,6 +367,7 @@
--typography-helper-text-light: var(--font-weight-light);
--typography-helper-text-regular: var(--font-weight-regular);
--typography-helper-text-semibold: var(--font-weight-semibold);
+ --typography-helper-text-italic: var(--font-style-lightitalic);
--typography-label-s: var(--font-size-12);
--typography-label-m: var(--font-size-14);
--typography-label-l: var(--font-size-16);
@@ -383,5 +384,4 @@
--border-style-default: var(--line-style-solid);
--border-style-outline: var(--line-style-dashed);
--typography-font-family: var(--font-family-sans);
- --typography-helper-text-italic: var(--font-style-lightitalic);
}