From ac954318dded445769991101a854ec14066a29ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 29 Jan 2025 12:38:40 +0100 Subject: [PATCH 1/6] Global styles for Halstack library --- packages/lib/.storybook/preview-head.html | 8 + packages/lib/.storybook/preview.tsx | 16 +- packages/lib/src/index.ts | 3 +- packages/lib/src/{ => styles}/fonts.css | 0 packages/lib/src/styles/variables.css | 381 ++++++++++++++++++++++ 5 files changed, 392 insertions(+), 16 deletions(-) create mode 100644 packages/lib/.storybook/preview-head.html rename packages/lib/src/{ => styles}/fonts.css (100%) create mode 100644 packages/lib/src/styles/variables.css diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html new file mode 100644 index 0000000000..00f1a2cb2f --- /dev/null +++ b/packages/lib/.storybook/preview-head.html @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/packages/lib/.storybook/preview.tsx b/packages/lib/.storybook/preview.tsx index e099a9117f..50171526b6 100644 --- a/packages/lib/.storybook/preview.tsx +++ b/packages/lib/.storybook/preview.tsx @@ -1,5 +1,3 @@ -import { HalstackProvider } from "../src/HalstackContext"; -import styled from "styled-components"; import type { Preview } from "@storybook/react"; import { disabledRules } from "../test/accessibility/rules/common/disabledRules"; @@ -21,19 +19,7 @@ const preview: Preview = { options: {}, }, }, - decorators: [ - (Story) => ( - - - - ), - ], + decorators: [(Story) => ], }; -const Container = styled.div` - @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&family=Material+Symbols+Outlined:FILL@0..1"); - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", - "Droid Sans", "Helvetica Neue", sans-serif; -`; - export default preview; diff --git a/packages/lib/src/index.ts b/packages/lib/src/index.ts index 1c020e787d..fd0fc86ca5 100644 --- a/packages/lib/src/index.ts +++ b/packages/lib/src/index.ts @@ -1,4 +1,5 @@ -import "./fonts.css"; +import "./styles/fonts.css"; +// import "./styles/variables.css"; export { default as DxcAccordion } from "./accordion/Accordion"; export { default as DxcAccordionGroup } from "./accordion-group/AccordionGroup"; diff --git a/packages/lib/src/fonts.css b/packages/lib/src/styles/fonts.css similarity index 100% rename from packages/lib/src/fonts.css rename to packages/lib/src/styles/fonts.css diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css new file mode 100644 index 0000000000..f8a79302f9 --- /dev/null +++ b/packages/lib/src/styles/variables.css @@ -0,0 +1,381 @@ +:root { + /* _CORE */ + --color-absolutes-black: #000000; + --color-absolutes-white: #ffffff; + --color-grey-50: #fbfbfb; + --color-grey-100: #ebebeb; + --color-grey-200: #dedede; + --color-grey-300: #d1d1d1; + --color-grey-400: #b5b5b5; + --color-grey-500: #9a9a9a; + --color-grey-600: #797979; + --color-grey-700: #5b5b5b; + --color-grey-800: #494949; + --color-grey-900: #333333; + --color-alpha-100-a: rgba(235 235 235 / 0.1); + --color-alpha-200-a: rgba(222 222 222 / 0.2); + --color-alpha-300-a: rgba(209 209 209 / 0.3); + --color-alpha-400-a: rgba(181 181 181 / 0.4); + --color-alpha-500-a: rgba(154 154 154 / 0.5); + --color-alpha-600-a: rgba(121 121 121 / 0.6); + --color-alpha-700-a: rgba(91 91 91 / 0.7); + --color-alpha-800-a: rgba(73 73 73 / 0.8); + --color-alpha-900-a: rgba(51 51 51 / 0.9); + --color-purple-50: #fcfbfe; + --color-purple-100: #f0e8fa; + --color-purple-200: #e7d9f6; + --color-purple-300: #ddc9f3; + --color-purple-400: #c8a7eb; + --color-purple-500: #b487e4; + --color-purple-600: #9363c8; + --color-purple-700: #6f4b97; + --color-purple-800: #5a3c7a; + --color-purple-900: #3e2a55; + --color-blue-50: #f8fcff; + --color-blue-100: #d9efff; + --color-blue-200: #bce3ff; + --color-blue-300: #a0d7ff; + --color-blue-400: #61bdff; + --color-blue-500: #30a1f1; + --color-blue-600: #267fbf; + --color-blue-700: #1d6091; + --color-blue-800: #174e74; + --color-blue-900: #103651; + --color-green-50: #f3fcf5; + --color-green-100: #d1f5db; + --color-green-200: #acecbe; + --color-green-300: #87e3a0; + --color-green-400: #53cb75; + --color-green-500: #47ae64; + --color-green-600: #39884f; + --color-green-700: #2a673b; + --color-green-800: #225230; + --color-green-900: #183921; + --color-red-50: #fff7f6; + --color-red-100: #ffe6e4; + --color-red-200: #ffd3d0; + --color-red-300: #ffc1bd; + --color-red-400: #ff9896; + --color-red-500: #ff696f; + --color-red-600: #e33248; + --color-red-700: #a92c37; + --color-red-800: #87262d; + --color-red-900: #5b1f21; + --color-yellow-50: #fefbef; + --color-yellow-100: #fcedae; + --color-yellow-200: #f9de6e; + --color-yellow-300: #f5cd2b; + --color-yellow-400: #d4b226; + --color-yellow-500: #b6981f; + --color-yellow-600: #8f7818; + --color-yellow-700: #6c5a12; + --color-yellow-800: #57490f; + --color-yellow-900: #3d3309; + --color-orange-50: #fffbf6; + --color-orange-100: #fde9d2; + --color-orange-200: #fbd9b3; + --color-orange-300: #f9c78f; + --color-orange-400: #f5a344; + --color-orange-500: #d58a35; + --color-orange-600: #a76d2b; + --color-orange-700: #7f5121; + --color-orange-800: #66421a; + --color-orange-900: #3d3309; + --dimensions-1: 1px; + --dimensions-1-rem: 0.0625rem; + --dimensions-2: 2px; + --dimensions-2-rem: 0.125rem; + --dimensions-4: 4px; + --dimensions-4-rem: 0.25rem; + --dimensions-28: 28px; + --dimensions-28-rem: 1.75rem; + --dimensions-24: 24px; + --dimensions-24-rem: 1.5rem; + --dimensions-20: 20px; + --dimensions-20-rem: 1.25rem; + --dimensions-16: 16px; + --dimensions-16-rem: 1rem; + --dimensions-12: 12px; + --dimensions-12-rem: 0.75rem; + --dimensions-8: 8px; + --dimensions-8-rem: 0.5rem; + --dimensions-32: 32px; + --dimensions-32-rem: 2rem; + --dimensions-36: 36px; + --dimensions-36-rem: 2.25rem; + --dimensions-40: 40px; + --dimensions-40-rem: 2.5rem; + --dimensions-44: 44px; + --dimensions-44-rem: 2.75rem; + --dimensions-48: 48px; + --dimensions-48-rem: 3rem; + --dimensions-64: 64px; + --dimensions-64-rem: 4rem; + --dimensions-72: 72px; + --dimensions-72-rem: 4.5rem; + --dimensions-80: 80px; + --dimensions-80-rem: 5rem; + --dimensions-96: 96px; + --dimensions-96-rem: 6rem; + --dimensions-56: 56px; + --dimensions-56-rem: 3.5rem; + --dimensions-0: 0px; + --dimensions-0-rem: 0rem; + --font-family-sans: "Open Sans"; + --font-family-font-family-mono: "Source Code Pro"; + --font-size-12: 12px; + --font-size-12-rem: 0.75rem; + --font-size-16: 16px; + --font-size-16-rem: 1rem; + --font-size-18: 18px; + --font-size-18-rem: 1.125rem; + --font-size-20: 20px; + --font-size-20-rem: 1.25rem; + --font-size-24: 24px; + --font-size-24-rem: 1.5rem; + --font-size-32: 32px; + --font-size-32-rem: 2rem; + --font-size-48: 48px; + --font-size-48-rem: 3rem; + --font-size-60: 60px; + --font-size-60-rem: 3.75rem; + --font-weight-light: 300; + --font-weight-regular: 400; + --font-weight-semibold: 600; + --font-weight-font-weight-bold: 700; + --font-style-lightitalic: "light italic"; + --font-style-font-style-normal: "normal"; + --font-size-14: 14px; + --font-size-14-rem: 0.875rem; + + /* CORE TYPOGRAPHY */ + --size-font-scale-18: 18px; + --size-font-scale-18-rem: 1.125rem; + --size-font-scale-14: 14px; + --size-font-scale-14-rem: 0.875rem; + --size-font-scale-16: 16px; + --size-font-scale-16-rem: 1rem; + --size-font-scale-20: 20px; + --size-font-scale-20-rem: 1.25rem; + --size-font-scale-24: 24px; + --size-font-scale-24-rem: 1.5rem; + --size-font-scale-32: 32px; + --size-font-scale-32-rem: 2rem; + --size-font-scale-48: 48px; + --size-font-scale-48-rem: 3rem; + --size-font-scale-60: 60px; + --size-font-scale-60-rem: 3.75rem; + --weight-font-weight-light: 300; + --weight-font-weight-regular: 400; + --weight-font-weight-semibold: 600; + --weight-font-weight-bold: 700; + --family-font-family-sans: "Open Sans"; + --family-font-family-mono: "Source Code Pro"; + --style-font-style-lightitalic: "light italic"; + --style-font-style-normal: "normal"; + --size-font-scale-12: 12px; + --size-font-scale-12-rem: 0.75rem; + + /* ALIAS */ + --color-bg-success-lightest: var(--color-green-50); + --color-bg-success-lighter: var(--color-green-100); + --color-fg-success-lighter: var(--color-green-200); + --color-fg-success-strong: var(--color-green-700); + --color-fg-primary-lighter: var(--color-purple-100); + --color-fg-secondary-lighter: var(--color-blue-300); + --color-fg-error-lighter: var(--color-red-200); + --color-fg-error-strong: var(--color-red-700); + --color-fg-warning-light: var(--color-orange-300); + --color-fg-warning-stronger: var(--color-orange-800); + --color-fg-success-stronger: var(--color-green-800); + --color-fg-primary-strongest: var(--color-purple-900); + --color-fg-primary-medium: var(--color-purple-400); + --color-fg-primary-stronger: var(--color-purple-800); + --color-fg-secondary-medium: var(--color-blue-600); + --color-fg-secondary-strongest: var(--color-blue-900); + --color-fg-secondary-stronger: var(--color-blue-800); + --color-fg-secondary-strong: var(--color-blue-700); + --color-fg-error-stronger: var(--color-red-800); + --color-bg-error-lightest: var(--color-red-50); + --color-bg-primary-lighter: var(--color-purple-100); + --color-bg-primary-lightest: var(--color-purple-50); + --color-bg-error-strong: var(--color-red-600); + --color-bg-error-light: var(--color-red-200); + --color-bg-error-lighter: var(--color-red-100); + --color-bg-primary-light: var(--color-purple-200); + --color-bg-primary-medium: var(--color-purple-300); + --color-bg-primary-strong: var(--color-purple-700); + --color-bg-primary-stronger: var(--color-purple-800); + --color-bg-primary-strongest: var(--color-purple-900); + --color-bg-secondary-medium: var(--color-blue-300); + --color-bg-secondary-light: var(--color-blue-200); + --color-bg-secondary-lighter: var(--color-blue-100); + --color-bg-secondary-lightest: var(--color-blue-50); + --color-bg-warning-lightest: var(--color-orange-50); + --color-bg-warning-lighter: var(--color-orange-100); + --border-color-primary-lighter: var(--color-purple-300); + --border-color-primary-strong: var(--color-purple-600); + --border-color-primary-stronger: var(--color-purple-700); + --border-color-secondary-light: var(--color-blue-300); + --border-color-success-light: var(--color-green-300); + --border-color-warning-light: var(--color-orange-300); + --border-color-error-light: var(--color-red-300); + --border-color-neutral-brighter: var(--color-absolutes-white); + --border-color-neutral-light: var(--color-grey-300); + --border-color-neutral-medium: var(--color-grey-400); + --border-color-neutral-strongest: var(--color-grey-700); + --border-color-neutral-lighter: var(--color-grey-200); + --border-color-neutral-dark: var(--color-grey-900); + --border-color-neutral-strong: var(--color-grey-500); + --border-color-neutral-stronger: var(--color-grey-600); + --border-radius-none: var(--dimensions-0); + --border-radius-xs: var(--dimensions-2); + --border-radius-s: var(--dimensions-4); + --border-radius-m: var(--dimensions-8); + --border-radius-l: var(--dimensions-16); + --border-radius-xl: var(--dimensions-24); + --border-width-none: 0px; + --border-width-none-rem: 0rem; + --border-width-s: var(--dimensions-1); + --border-width-l: var(--dimensions-4); + --border-width-m: var(--dimensions-2); + --height-xxs: var(--dimensions-16); + --height-s: var(--dimensions-24); + --height-m: var(--dimensions-32); + --height-xl: var(--dimensions-40); + --height-xxl: var(--dimensions-48); + --height-xxxl: var(--dimensions-56); + --shadow-low-x-position: var(--dimensions-0); + --shadow-low-y-position: var(--dimensions-2); + --shadow-low-blur: var(--dimensions-2); + --shadow-low-spread: var(--dimensions-0); + --shadow-mid-x-position: var(--dimensions-0); + --shadow-mid-y-position: var(--dimensions-12); + --shadow-mid-blur: var(--dimensions-12); + --shadow-mid-spread: var(--dimensions-0); + --shadow-high-x-position: var(--dimensions-0); + --shadow-high-y-position: var(--dimensions-24); + --shadow-high-blur: var(--dimensions-24); + --shadow-high-spread: var(--dimensions-0); + --shadow-higher-x-position: var(--dimensions-0); + --shadow-higher-y-position: var(--dimensions-48); + --shadow-higher-blur: var(--dimensions-48); + --shadow-higher-spread: var(--dimensions-0); + --typography-font-family: var(--font-family-sans); + --typography-heading-semibold: var(--font-weight-semibold); + --typography-heading-xl: var(--font-size-32); + --typography-heading-l: var(--font-size-24); + --typography-heading-m: var(--font-size-20); + --typography-heading-s: var(--font-size-16); + --typography-heading-xs: var(--font-size-12); + --typography-body-regular: var(--font-weight-regular); + --typography-body-xxl: var(--font-size-24); + --typography-body-xl: var(--font-size-20); + --typography-body-l: var(--font-size-18); + --typography-body-m: var(--font-size-16); + --typography-body-s: var(--font-size-14); + --typography-body-xs: var(--font-size-12); + --typography-helper-text-regular: var(--font-weight-regular); + --typography-helper-text-italic: var(--font-style-lightitalic); + --typography-helper-text-m: var(--font-size-14); + --typography-helper-text-s: var(--font-size-12); + --typography-helper-text-semibold: var(--font-weight-semibold); + --typography-helper-text-l: var(--font-size-16); + --typography-title-l: var(--font-size-20); + --typography-title-bold: var(--font-weight-font-weight-bold); + --typography-title-s: var(--font-size-14); + --typography-title-m: var(--font-size-16); + --typography-label-regular: var(--font-weight-regular); + --typography-label-s: var(--font-size-12); + --typography-label-l: var(--font-size-16); + --typography-label-semibold: var(--font-weight-semibold); + --typography-label-m: var(--font-size-14); + --typography-label-xl: var(--font-size-20); + --typography-helper-text-light: var(--font-weight-light); + --typography-title-xl: var(--font-size-24); + --shadow-light: var(--color-alpha-300-a); + --shadow-dark: var(--color-alpha-400-a); + --color-bg-neutral-lightest: var(--color-absolutes-white); + --color-bg-neutral-lighter: var(--color-grey-50); + --color-bg-neutral-light: var(--color-grey-100); + --color-bg-overlay-dark: var(--color-alpha-800-a); + --border-color-success-medium: var(--color-green-600); + --color-fg-success-medium: var(--color-green-600); + --color-fg-error-medium: var(--color-red-600); + --border-color-error-medium: var(--color-red-600); + --border-color-warning-medium: var(--color-orange-500); + --border-color-secondary-medium: var(--color-blue-500); + --color-fg-secondary-light: var(--color-blue-500); + --color-fg-warning-strong: var(--color-orange-600); + --color-bg-warning-light: var(--color-orange-200); + --color-bg-success-light: var(--color-green-200); + --color-bg-warning-strong: var(--color-orange-500); + --color-fg-warning-medium: var(--color-orange-500); + --color-bg-yellow-light: var(--color-yellow-100); + --color-fg-neutral-yellow-dark: var(--color-yellow-800); + --color-fg-neutral-bright: var(--color-absolutes-white); + --border-color-neutral-bright: var(--color-grey-50); + --border-color-neutral-lightest: var(--color-grey-100); + --border-color-primary-light: var(--color-purple-400); + --color-bg-secondary-strong: var(--color-blue-600); + --color-bg-secondary-stronger: var(--color-blue-700); + --color-bg-secondary-strongest: var(--color-blue-800); + --color-bg-neutral-medium: var(--color-grey-200); + --color-bg-neutral-strong: var(--color-grey-300); + --color-bg-neutral-stronger: var(--color-grey-800); + --color-bg-neutral-strongest: var(--color-grey-900); + --color-bg-success-medium: var(--color-green-300); + --color-bg-success-strong: var(--color-green-600); + --color-bg-success-stronger: var(--color-green-700); + --color-bg-success-strongest: var(--color-green-800); + --color-bg-warning-medium: var(--color-orange-300); + --color-bg-warning-stronger: var(--color-orange-600); + --color-bg-warning-strongest: var(--color-orange-700); + --color-bg-error-medium: var(--color-red-300); + --color-bg-error-stronger: var(--color-red-700); + --color-bg-error-strongest: var(--color-red-800); + --color-fg-primary-light: var(--color-purple-300); + --color-fg-primary-strong: var(--color-purple-700); + --color-fg-error-light: var(--color-red-300); + --color-fg-success-light: var(--color-green-300); + --color-fg-neutral-lightest: var(--color-grey-100); + --color-fg-neutral-lighter: var(--color-grey-200); + --color-fg-neutral-light: var(--color-grey-400); + --color-fg-neutral-medium: var(--color-grey-500); + --color-fg-neutral-strong: var(--color-grey-600); + --color-fg-neutral-stronger: var(--color-grey-700); + --color-fg-neutral-dark: var(--color-grey-900); + --border-color-primary-medium: var(--color-purple-500); + --border-color-secondary-strong: var(--color-blue-600); + --border-color-error-strong: var(--color-red-700); + --border-color-error-stronger: var(--color-red-800); + --spacing-gap-none: var(--dimensions-0); + --spacing-gap-xxs: var(--dimensions-2); + --spacing-gap-xs: var(--dimensions-4); + --spacing-gap-s: var(--dimensions-8); + --spacing-gap-m: var(--dimensions-12); + --spacing-gap-ml: var(--dimensions-16); + --spacing-gap-l: var(--dimensions-24); + --spacing-gap-xl: var(--dimensions-48); + --spacing-padding-none: var(--dimensions-0); + --spacing-padding-xxxs: var(--dimensions-2); + --spacing-padding-xs: var(--dimensions-8); + --spacing-padding-s: var(--dimensions-12); + --spacing-padding-m: var(--dimensions-16); + --spacing-padding-ml: var(--dimensions-20); + --spacing-padding-l: var(--dimensions-24); + --spacing-padding-xl: var(--dimensions-32); + --spacing-padding-xxl: var(--dimensions-40); + --border-style-solid: "solid"; + --border-style-dashed: "dashed"; + --spacing-padding-xxs: var(--dimensions-4); + --border-color-secondary-stronger: var(--color-blue-700); + --border-color-secondary-strongest: var(--color-blue-800); + --color-bg-alpha-light: var(--color-alpha-300-a); + --color-bg-alpha-medium: var(--color-alpha-800-a); + --color-bg-alpha-strong: var(--color-alpha-900-a); + --height-l: var(--dimensions-36); + --color-fg-neutral-strongest: var(--color-grey-800); + --height-xxxs: var(--dimensions-12); + --height-xs: var(--dimensions-20); +} \ No newline at end of file From ae24f0815cfa8d182e5da7919ff2ce053e64f9e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 29 Jan 2025 13:40:28 +0100 Subject: [PATCH 2/6] Testing icons in chromatic --- packages/lib/.storybook/preview-head.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html index 00f1a2cb2f..5caa6b2b77 100644 --- a/packages/lib/.storybook/preview-head.html +++ b/packages/lib/.storybook/preview-head.html @@ -1,8 +1,11 @@ - + \ No newline at end of file + From 2d3372578e23936fcc98962b6f5a5a063495053a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Wed, 29 Jan 2025 13:51:09 +0100 Subject: [PATCH 3/6] Font-family updates in storybook --- packages/lib/.storybook/preview-head.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html index 5caa6b2b77..e28cb145ff 100644 --- a/packages/lib/.storybook/preview-head.html +++ b/packages/lib/.storybook/preview-head.html @@ -6,6 +6,7 @@ From 97f443d63dfaf2ca7eff86e8cb250806c0f65e60 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Thu, 30 Jan 2025 10:56:31 +0100 Subject: [PATCH 4/6] Variables.css fixes --- packages/lib/src/styles/variables.css | 486 ++++++++++++-------------- 1 file changed, 215 insertions(+), 271 deletions(-) diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index f8a79302f9..bd9e4dc569 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -1,354 +1,275 @@ :root { - /* _CORE */ + /* _Core */ --color-absolutes-black: #000000; --color-absolutes-white: #ffffff; - --color-grey-50: #fbfbfb; - --color-grey-100: #ebebeb; - --color-grey-200: #dedede; - --color-grey-300: #d1d1d1; - --color-grey-400: #b5b5b5; - --color-grey-500: #9a9a9a; - --color-grey-600: #797979; - --color-grey-700: #5b5b5b; - --color-grey-800: #494949; - --color-grey-900: #333333; - --color-alpha-100-a: rgba(235 235 235 / 0.1); - --color-alpha-200-a: rgba(222 222 222 / 0.2); - --color-alpha-300-a: rgba(209 209 209 / 0.3); - --color-alpha-400-a: rgba(181 181 181 / 0.4); - --color-alpha-500-a: rgba(154 154 154 / 0.5); - --color-alpha-600-a: rgba(121 121 121 / 0.6); - --color-alpha-700-a: rgba(91 91 91 / 0.7); - --color-alpha-800-a: rgba(73 73 73 / 0.8); - --color-alpha-900-a: rgba(51 51 51 / 0.9); - --color-purple-50: #fcfbfe; - --color-purple-100: #f0e8fa; - --color-purple-200: #e7d9f6; - --color-purple-300: #ddc9f3; - --color-purple-400: #c8a7eb; - --color-purple-500: #b487e4; - --color-purple-600: #9363c8; - --color-purple-700: #6f4b97; - --color-purple-800: #5a3c7a; - --color-purple-900: #3e2a55; - --color-blue-50: #f8fcff; + --color-alpha-100-a: #ebebeb1a; + --color-alpha-200-a: #dedede33; + --color-alpha-300-a: #d1d1d14d; + --color-alpha-400-a: #b5b5b566; + --color-alpha-500-a: #9a9a9a80; + --color-alpha-600-a: #79797999; + --color-alpha-700-a: #5b5b5bb2; + --color-alpha-800-a: #494949cc; + --color-alpha-900-a: #333333e5; --color-blue-100: #d9efff; --color-blue-200: #bce3ff; --color-blue-300: #a0d7ff; --color-blue-400: #61bdff; + --color-blue-50: #f8fcff; --color-blue-500: #30a1f1; --color-blue-600: #267fbf; --color-blue-700: #1d6091; --color-blue-800: #174e74; --color-blue-900: #103651; - --color-green-50: #f3fcf5; --color-green-100: #d1f5db; --color-green-200: #acecbe; --color-green-300: #87e3a0; --color-green-400: #53cb75; + --color-green-50: #f3fcf5; --color-green-500: #47ae64; --color-green-600: #39884f; --color-green-700: #2a673b; --color-green-800: #225230; --color-green-900: #183921; - --color-red-50: #fff7f6; + --color-grey-100: #ebebeb; + --color-grey-200: #dedede; + --color-grey-300: #d1d1d1; + --color-grey-400: #b5b5b5; + --color-grey-50: #fbfbfb; + --color-grey-500: #9a9a9a; + --color-grey-600: #797979; + --color-grey-700: #5b5b5b; + --color-grey-800: #494949; + --color-grey-900: #333333; + --color-orange-100: #fde9d2; + --color-orange-200: #fbd9b3; + --color-orange-300: #f9c78f; + --color-orange-400: #f5a344; + --color-orange-50: #fffbf6; + --color-orange-500: #d58a35; + --color-orange-600: #a76d2b; + --color-orange-700: #7f5121; + --color-orange-800: #66421a; + --color-orange-900: #3d3309; + --color-purple-100: #f0e8fa; + --color-purple-200: #e7d9f6; + --color-purple-300: #ddc9f3; + --color-purple-400: #c8a7eb; + --color-purple-50: #fcfbfe; + --color-purple-500: #b487e4; + --color-purple-600: #9363c8; + --color-purple-700: #6f4b97; + --color-purple-800: #5a3c7a; + --color-purple-900: #3e2a55; --color-red-100: #ffe6e4; --color-red-200: #ffd3d0; --color-red-300: #ffc1bd; --color-red-400: #ff9896; + --color-red-50: #fff7f6; --color-red-500: #ff696f; --color-red-600: #e33248; --color-red-700: #a92c37; --color-red-800: #87262d; --color-red-900: #5b1f21; - --color-yellow-50: #fefbef; --color-yellow-100: #fcedae; --color-yellow-200: #f9de6e; --color-yellow-300: #f5cd2b; --color-yellow-400: #d4b226; + --color-yellow-50: #fefbef; --color-yellow-500: #b6981f; --color-yellow-600: #8f7818; --color-yellow-700: #6c5a12; --color-yellow-800: #57490f; --color-yellow-900: #3d3309; - --color-orange-50: #fffbf6; - --color-orange-100: #fde9d2; - --color-orange-200: #fbd9b3; - --color-orange-300: #f9c78f; - --color-orange-400: #f5a344; - --color-orange-500: #d58a35; - --color-orange-600: #a76d2b; - --color-orange-700: #7f5121; - --color-orange-800: #66421a; - --color-orange-900: #3d3309; + --dimensions-0: 0px; --dimensions-1: 1px; - --dimensions-1-rem: 0.0625rem; --dimensions-2: 2px; - --dimensions-2-rem: 0.125rem; --dimensions-4: 4px; - --dimensions-4-rem: 0.25rem; - --dimensions-28: 28px; - --dimensions-28-rem: 1.75rem; - --dimensions-24: 24px; - --dimensions-24-rem: 1.5rem; - --dimensions-20: 20px; - --dimensions-20-rem: 1.25rem; - --dimensions-16: 16px; - --dimensions-16-rem: 1rem; - --dimensions-12: 12px; - --dimensions-12-rem: 0.75rem; --dimensions-8: 8px; - --dimensions-8-rem: 0.5rem; + --dimensions-12: 12px; + --dimensions-16: 16px; + --dimensions-20: 20px; + --dimensions-24: 24px; + --dimensions-28: 28px; --dimensions-32: 32px; - --dimensions-32-rem: 2rem; --dimensions-36: 36px; - --dimensions-36-rem: 2.25rem; --dimensions-40: 40px; - --dimensions-40-rem: 2.5rem; --dimensions-44: 44px; - --dimensions-44-rem: 2.75rem; --dimensions-48: 48px; - --dimensions-48-rem: 3rem; + --dimensions-56: 56px; --dimensions-64: 64px; - --dimensions-64-rem: 4rem; --dimensions-72: 72px; - --dimensions-72-rem: 4.5rem; --dimensions-80: 80px; - --dimensions-80-rem: 5rem; --dimensions-96: 96px; - --dimensions-96-rem: 6rem; - --dimensions-56: 56px; - --dimensions-56-rem: 3.5rem; - --dimensions-0: 0px; - --dimensions-0-rem: 0rem; - --font-family-sans: "Open Sans"; - --font-family-font-family-mono: "Source Code Pro"; --font-size-12: 12px; - --font-size-12-rem: 0.75rem; + --font-size-14: 14px; --font-size-16: 16px; - --font-size-16-rem: 1rem; --font-size-18: 18px; - --font-size-18-rem: 1.125rem; --font-size-20: 20px; - --font-size-20-rem: 1.25rem; --font-size-24: 24px; - --font-size-24-rem: 1.5rem; --font-size-32: 32px; - --font-size-32-rem: 2rem; --font-size-48: 48px; - --font-size-48-rem: 3rem; --font-size-60: 60px; - --font-size-60-rem: 3.75rem; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-semibold: 600; - --font-weight-font-weight-bold: 700; - --font-style-lightitalic: "light italic"; - --font-style-font-style-normal: "normal"; - --font-size-14: 14px; - --font-size-14-rem: 0.875rem; - - /* CORE TYPOGRAPHY */ - --size-font-scale-18: 18px; - --size-font-scale-18-rem: 1.125rem; - --size-font-scale-14: 14px; - --size-font-scale-14-rem: 0.875rem; - --size-font-scale-16: 16px; - --size-font-scale-16-rem: 1rem; - --size-font-scale-20: 20px; - --size-font-scale-20-rem: 1.25rem; - --size-font-scale-24: 24px; - --size-font-scale-24-rem: 1.5rem; - --size-font-scale-32: 32px; - --size-font-scale-32-rem: 2rem; - --size-font-scale-48: 48px; - --size-font-scale-48-rem: 3rem; - --size-font-scale-60: 60px; - --size-font-scale-60-rem: 3.75rem; - --weight-font-weight-light: 300; - --weight-font-weight-regular: 400; - --weight-font-weight-semibold: 600; - --weight-font-weight-bold: 700; - --family-font-family-sans: "Open Sans"; - --family-font-family-mono: "Source Code Pro"; - --style-font-style-lightitalic: "light italic"; - --style-font-style-normal: "normal"; - --size-font-scale-12: 12px; - --size-font-scale-12-rem: 0.75rem; - - /* ALIAS */ - --color-bg-success-lightest: var(--color-green-50); - --color-bg-success-lighter: var(--color-green-100); - --color-fg-success-lighter: var(--color-green-200); - --color-fg-success-strong: var(--color-green-700); - --color-fg-primary-lighter: var(--color-purple-100); - --color-fg-secondary-lighter: var(--color-blue-300); - --color-fg-error-lighter: var(--color-red-200); - --color-fg-error-strong: var(--color-red-700); - --color-fg-warning-light: var(--color-orange-300); - --color-fg-warning-stronger: var(--color-orange-800); - --color-fg-success-stronger: var(--color-green-800); - --color-fg-primary-strongest: var(--color-purple-900); - --color-fg-primary-medium: var(--color-purple-400); - --color-fg-primary-stronger: var(--color-purple-800); - --color-fg-secondary-medium: var(--color-blue-600); - --color-fg-secondary-strongest: var(--color-blue-900); - --color-fg-secondary-stronger: var(--color-blue-800); - --color-fg-secondary-strong: var(--color-blue-700); - --color-fg-error-stronger: var(--color-red-800); - --color-bg-error-lightest: var(--color-red-50); - --color-bg-primary-lighter: var(--color-purple-100); - --color-bg-primary-lightest: var(--color-purple-50); - --color-bg-error-strong: var(--color-red-600); + --font-weight-bold: 700; + --border-dashed: dashed; + --border-solid: solid; + --font-family-mono: Source Code Pro, mono; + --font-family-sans: Open Sans, sans-serif; + --font-style-lightitalic: light italic; + --font-style-normal: normal; + + /* Alias */ + --border-color-error-light: var(--color-red-300); + --border-color-error-medium: var(--color-red-600); + --border-color-error-strong: var(--color-red-700); + --border-color-error-stronger: var(--color-red-800); + --border-color-neutral-bright: var(--color-grey-50); + --border-color-neutral-brighter: var(--color-absolutes-white); + --border-color-neutral-dark: var(--color-grey-900); + --border-color-neutral-light: var(--color-grey-300); + --border-color-neutral-lighter: var(--color-grey-200); + --border-color-neutral-lightest: var(--color-grey-100); + --border-color-neutral-medium: var(--color-grey-400); + --border-color-neutral-strong: var(--color-grey-500); + --border-color-neutral-stronger: var(--color-grey-600); + --border-color-neutral-strongest: var(--color-grey-700); + --border-color-primary-light: var(--color-purple-400); + --border-color-primary-lighter: var(--color-purple-300); + --border-color-primary-medium: var(--color-purple-500); + --border-color-primary-strong: var(--color-purple-600); + --border-color-primary-stronger: var(--color-purple-700); + --border-color-secondary-light: var(--color-blue-300); + --border-color-secondary-medium: var(--color-blue-500); + --border-color-secondary-strong: var(--color-blue-600); + --border-color-secondary-stronger: var(--color-blue-700); + --border-color-secondary-strongest: var(--color-blue-800); + --border-color-success-light: var(--color-green-300); + --border-color-success-medium: var(--color-green-600); + --border-color-warning-light: var(--color-orange-300); + --border-color-warning-medium: var(--color-orange-500); + --color-bg-overlay-dark: var(--color-alpha-800-a); + --color-bg-yellow-light: var(--color-yellow-100); + --color-bg-alpha-light: var(--color-alpha-300-a); + --color-bg-alpha-medium: var(--color-alpha-800-a); + --color-bg-alpha-strong: var(--color-alpha-900-a); --color-bg-error-light: var(--color-red-200); --color-bg-error-lighter: var(--color-red-100); + --color-bg-error-lightest: var(--color-red-50); + --color-bg-error-medium: var(--color-red-300); + --color-bg-error-strong: var(--color-red-600); + --color-bg-error-stronger: var(--color-red-700); + --color-bg-error-strongest: var(--color-red-800); + --color-bg-neutral-light: var(--color-grey-100); + --color-bg-neutral-lighter: var(--color-grey-50); + --color-bg-neutral-lightest: var(--color-absolutes-white); + --color-bg-neutral-medium: var(--color-grey-200); + --color-bg-neutral-strong: var(--color-grey-300); + --color-bg-neutral-stronger: var(--color-grey-800); + --color-bg-neutral-strongest: var(--color-grey-900); --color-bg-primary-light: var(--color-purple-200); + --color-bg-primary-lighter: var(--color-purple-100); + --color-bg-primary-lightest: var(--color-purple-50); --color-bg-primary-medium: var(--color-purple-300); --color-bg-primary-strong: var(--color-purple-700); --color-bg-primary-stronger: var(--color-purple-800); --color-bg-primary-strongest: var(--color-purple-900); - --color-bg-secondary-medium: var(--color-blue-300); --color-bg-secondary-light: var(--color-blue-200); --color-bg-secondary-lighter: var(--color-blue-100); --color-bg-secondary-lightest: var(--color-blue-50); - --color-bg-warning-lightest: var(--color-orange-50); + --color-bg-secondary-medium: var(--color-blue-300); + --color-bg-secondary-strong: var(--color-blue-600); + --color-bg-secondary-stronger: var(--color-blue-700); + --color-bg-secondary-strongest: var(--color-blue-800); + --color-bg-success-light: var(--color-green-200); + --color-bg-success-lighter: var(--color-green-100); + --color-bg-success-lightest: var(--color-green-50); + --color-bg-success-medium: var(--color-green-300); + --color-bg-success-strong: var(--color-green-600); + --color-bg-success-stronger: var(--color-green-700); + --color-bg-success-strongest: var(--color-green-800); + --color-bg-warning-light: var(--color-orange-200); --color-bg-warning-lighter: var(--color-orange-100); - --border-color-primary-lighter: var(--color-purple-300); - --border-color-primary-strong: var(--color-purple-600); - --border-color-primary-stronger: var(--color-purple-700); - --border-color-secondary-light: var(--color-blue-300); - --border-color-success-light: var(--color-green-300); - --border-color-warning-light: var(--color-orange-300); - --border-color-error-light: var(--color-red-300); - --border-color-neutral-brighter: var(--color-absolutes-white); - --border-color-neutral-light: var(--color-grey-300); - --border-color-neutral-medium: var(--color-grey-400); - --border-color-neutral-strongest: var(--color-grey-700); - --border-color-neutral-lighter: var(--color-grey-200); - --border-color-neutral-dark: var(--color-grey-900); - --border-color-neutral-strong: var(--color-grey-500); - --border-color-neutral-stronger: var(--color-grey-600); + --color-bg-warning-lightest: var(--color-orange-50); + --color-bg-warning-medium: var(--color-orange-300); + --color-bg-warning-strong: var(--color-orange-500); + --color-bg-warning-stronger: var(--color-orange-600); + --color-bg-warning-strongest: var(--color-orange-700); + --color-fg-error-light: var(--color-red-300); + --color-fg-error-lighter: var(--color-red-200); + --color-fg-error-medium: var(--color-red-600); + --color-fg-error-strong: var(--color-red-700); + --color-fg-error-stronger: var(--color-red-800); + --color-fg-neutral-bright: var(--color-absolutes-white); + --color-fg-neutral-dark: var(--color-grey-900); + --color-fg-neutral-light: var(--color-grey-400); + --color-fg-neutral-lighter: var(--color-grey-200); + --color-fg-neutral-lightest: var(--color-grey-100); + --color-fg-neutral-medium: var(--color-grey-500); + --color-fg-neutral-strong: var(--color-grey-600); + --color-fg-neutral-stronger: var(--color-grey-700); + --color-fg-neutral-strongest: var(--color-grey-800); + --color-fg-neutral-yellow-dark: var(--color-yellow-800); + --color-fg-primary-light: var(--color-purple-300); + --color-fg-primary-lighter: var(--color-purple-100); + --color-fg-primary-medium: var(--color-purple-400); + --color-fg-primary-strong: var(--color-purple-700); + --color-fg-primary-stronger: var(--color-purple-800); + --color-fg-primary-strongest: var(--color-purple-900); + --color-fg-secondary-light: var(--color-blue-500); + --color-fg-secondary-lighter: var(--color-blue-300); + --color-fg-secondary-medium: var(--color-blue-600); + --color-fg-secondary-strong: var(--color-blue-700); + --color-fg-secondary-stronger: var(--color-blue-800); + --color-fg-secondary-strongest: var(--color-blue-900); + --color-fg-success-light: var(--color-green-300); + --color-fg-success-lighter: var(--color-green-200); + --color-fg-success-medium: var(--color-green-600); + --color-fg-success-strong: var(--color-green-700); + --color-fg-success-stronger: var(--color-green-800); + --color-fg-warning-light: var(--color-orange-300); + --color-fg-warning-medium: var(--color-orange-500); + --color-fg-warning-strong: var(--color-orange-600); + --color-fg-warning-stronger: var(--color-orange-800); + --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); --border-radius-m: var(--dimensions-8); --border-radius-l: var(--dimensions-16); --border-radius-xl: var(--dimensions-24); - --border-width-none: 0px; - --border-width-none-rem: 0rem; + --border-width-none: var(--dimensions-0); --border-width-s: var(--dimensions-1); - --border-width-l: var(--dimensions-4); --border-width-m: var(--dimensions-2); + --border-width-l: var(--dimensions-4); + --height-xxxs: var(--dimensions-12); --height-xxs: var(--dimensions-16); + --height-xs: var(--dimensions-20); --height-s: var(--dimensions-24); --height-m: var(--dimensions-32); + --height-l: var(--dimensions-36); --height-xl: var(--dimensions-40); --height-xxl: var(--dimensions-48); --height-xxxl: var(--dimensions-56); - --shadow-low-x-position: var(--dimensions-0); - --shadow-low-y-position: var(--dimensions-2); - --shadow-low-blur: var(--dimensions-2); - --shadow-low-spread: var(--dimensions-0); - --shadow-mid-x-position: var(--dimensions-0); - --shadow-mid-y-position: var(--dimensions-12); - --shadow-mid-blur: var(--dimensions-12); - --shadow-mid-spread: var(--dimensions-0); + --shadow-high-spread: var(--dimensions-0); --shadow-high-x-position: var(--dimensions-0); - --shadow-high-y-position: var(--dimensions-24); --shadow-high-blur: var(--dimensions-24); - --shadow-high-spread: var(--dimensions-0); + --shadow-high-y-position: var(--dimensions-24); + --shadow-higher-spread: var(--dimensions-0); --shadow-higher-x-position: var(--dimensions-0); - --shadow-higher-y-position: var(--dimensions-48); --shadow-higher-blur: var(--dimensions-48); - --shadow-higher-spread: var(--dimensions-0); - --typography-font-family: var(--font-family-sans); - --typography-heading-semibold: var(--font-weight-semibold); - --typography-heading-xl: var(--font-size-32); - --typography-heading-l: var(--font-size-24); - --typography-heading-m: var(--font-size-20); - --typography-heading-s: var(--font-size-16); - --typography-heading-xs: var(--font-size-12); - --typography-body-regular: var(--font-weight-regular); - --typography-body-xxl: var(--font-size-24); - --typography-body-xl: var(--font-size-20); - --typography-body-l: var(--font-size-18); - --typography-body-m: var(--font-size-16); - --typography-body-s: var(--font-size-14); - --typography-body-xs: var(--font-size-12); - --typography-helper-text-regular: var(--font-weight-regular); - --typography-helper-text-italic: var(--font-style-lightitalic); - --typography-helper-text-m: var(--font-size-14); - --typography-helper-text-s: var(--font-size-12); - --typography-helper-text-semibold: var(--font-weight-semibold); - --typography-helper-text-l: var(--font-size-16); - --typography-title-l: var(--font-size-20); - --typography-title-bold: var(--font-weight-font-weight-bold); - --typography-title-s: var(--font-size-14); - --typography-title-m: var(--font-size-16); - --typography-label-regular: var(--font-weight-regular); - --typography-label-s: var(--font-size-12); - --typography-label-l: var(--font-size-16); - --typography-label-semibold: var(--font-weight-semibold); - --typography-label-m: var(--font-size-14); - --typography-label-xl: var(--font-size-20); - --typography-helper-text-light: var(--font-weight-light); - --typography-title-xl: var(--font-size-24); - --shadow-light: var(--color-alpha-300-a); - --shadow-dark: var(--color-alpha-400-a); - --color-bg-neutral-lightest: var(--color-absolutes-white); - --color-bg-neutral-lighter: var(--color-grey-50); - --color-bg-neutral-light: var(--color-grey-100); - --color-bg-overlay-dark: var(--color-alpha-800-a); - --border-color-success-medium: var(--color-green-600); - --color-fg-success-medium: var(--color-green-600); - --color-fg-error-medium: var(--color-red-600); - --border-color-error-medium: var(--color-red-600); - --border-color-warning-medium: var(--color-orange-500); - --border-color-secondary-medium: var(--color-blue-500); - --color-fg-secondary-light: var(--color-blue-500); - --color-fg-warning-strong: var(--color-orange-600); - --color-bg-warning-light: var(--color-orange-200); - --color-bg-success-light: var(--color-green-200); - --color-bg-warning-strong: var(--color-orange-500); - --color-fg-warning-medium: var(--color-orange-500); - --color-bg-yellow-light: var(--color-yellow-100); - --color-fg-neutral-yellow-dark: var(--color-yellow-800); - --color-fg-neutral-bright: var(--color-absolutes-white); - --border-color-neutral-bright: var(--color-grey-50); - --border-color-neutral-lightest: var(--color-grey-100); - --border-color-primary-light: var(--color-purple-400); - --color-bg-secondary-strong: var(--color-blue-600); - --color-bg-secondary-stronger: var(--color-blue-700); - --color-bg-secondary-strongest: var(--color-blue-800); - --color-bg-neutral-medium: var(--color-grey-200); - --color-bg-neutral-strong: var(--color-grey-300); - --color-bg-neutral-stronger: var(--color-grey-800); - --color-bg-neutral-strongest: var(--color-grey-900); - --color-bg-success-medium: var(--color-green-300); - --color-bg-success-strong: var(--color-green-600); - --color-bg-success-stronger: var(--color-green-700); - --color-bg-success-strongest: var(--color-green-800); - --color-bg-warning-medium: var(--color-orange-300); - --color-bg-warning-stronger: var(--color-orange-600); - --color-bg-warning-strongest: var(--color-orange-700); - --color-bg-error-medium: var(--color-red-300); - --color-bg-error-stronger: var(--color-red-700); - --color-bg-error-strongest: var(--color-red-800); - --color-fg-primary-light: var(--color-purple-300); - --color-fg-primary-strong: var(--color-purple-700); - --color-fg-error-light: var(--color-red-300); - --color-fg-success-light: var(--color-green-300); - --color-fg-neutral-lightest: var(--color-grey-100); - --color-fg-neutral-lighter: var(--color-grey-200); - --color-fg-neutral-light: var(--color-grey-400); - --color-fg-neutral-medium: var(--color-grey-500); - --color-fg-neutral-strong: var(--color-grey-600); - --color-fg-neutral-stronger: var(--color-grey-700); - --color-fg-neutral-dark: var(--color-grey-900); - --border-color-primary-medium: var(--color-purple-500); - --border-color-secondary-strong: var(--color-blue-600); - --border-color-error-strong: var(--color-red-700); - --border-color-error-stronger: var(--color-red-800); + --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); --spacing-gap-none: var(--dimensions-0); --spacing-gap-xxs: var(--dimensions-2); --spacing-gap-xs: var(--dimensions-4); @@ -359,6 +280,7 @@ --spacing-gap-xl: var(--dimensions-48); --spacing-padding-none: var(--dimensions-0); --spacing-padding-xxxs: var(--dimensions-2); + --spacing-padding-xxs: var(--dimensions-4); --spacing-padding-xs: var(--dimensions-8); --spacing-padding-s: var(--dimensions-12); --spacing-padding-m: var(--dimensions-16); @@ -366,16 +288,38 @@ --spacing-padding-l: var(--dimensions-24); --spacing-padding-xl: var(--dimensions-32); --spacing-padding-xxl: var(--dimensions-40); - --border-style-solid: "solid"; - --border-style-dashed: "dashed"; - --spacing-padding-xxs: var(--dimensions-4); - --border-color-secondary-stronger: var(--color-blue-700); - --border-color-secondary-strongest: var(--color-blue-800); - --color-bg-alpha-light: var(--color-alpha-300-a); - --color-bg-alpha-medium: var(--color-alpha-800-a); - --color-bg-alpha-strong: var(--color-alpha-900-a); - --height-l: var(--dimensions-36); - --color-fg-neutral-strongest: var(--color-grey-800); - --height-xxxs: var(--dimensions-12); - --height-xs: var(--dimensions-20); + --typography-body-xs: var(--font-size-12); + --typography-body-s: var(--font-size-14); + --typography-body-m: var(--font-size-16); + --typography-body-l: var(--font-size-18); + --typography-body-xl: var(--font-size-20); + --typography-body-xxl: var(--font-size-24); + --typography-body-regular: var(--font-weight-regular); + --typography-heading-xs: var(--font-size-12); + --typography-heading-s: var(--font-size-16); + --typography-heading-m: var(--font-size-20); + --typography-heading-l: var(--font-size-24); + --typography-heading-xl: var(--font-size-32); + --typography-heading-semibold: var(--font-weight-semibold); + --typography-helper-text-s: var(--font-size-12); + --typography-helper-text-m: var(--font-size-14); + --typography-helper-text-l: var(--font-size-16); + --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-label-s: var(--font-size-12); + --typography-label-m: var(--font-size-14); + --typography-label-l: var(--font-size-16); + --typography-label-xl: var(--font-size-20); + --typography-label-regular: var(--font-weight-regular); + --typography-label-semibold: var(--font-weight-semibold); + --typography-title-s: var(--font-size-14); + --typography-title-m: var(--font-size-16); + --typography-title-l: var(--font-size-20); + --typography-title-xl: var(--font-size-24); + --typography-title-bold: var(--font-weight-bold); + --border-style-dashed: var(--border-dashed); + --border-style-default: var(--border-solid); + --typography-font-family: var(--font-family-sans); + --typography-helper-text-italic: var(--font-style-lightitalic); } \ No newline at end of file From d49b88826db43fb2840631e9c1d3e0fb503d75e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Thu, 30 Jan 2025 14:17:37 +0100 Subject: [PATCH 5/6] More design tokens updates --- packages/lib/src/styles/variables.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index bd9e4dc569..32565ae2bb 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -114,12 +114,12 @@ --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; - --border-dashed: dashed; - --border-solid: solid; --font-family-mono: Source Code Pro, mono; --font-family-sans: Open Sans, sans-serif; --font-style-lightitalic: light italic; --font-style-normal: normal; + --line-style-dashed: dashed; + --line-style-solid: solid; /* Alias */ --border-color-error-light: var(--color-red-300); @@ -318,8 +318,8 @@ --typography-title-l: var(--font-size-20); --typography-title-xl: var(--font-size-24); --typography-title-bold: var(--font-weight-bold); - --border-style-dashed: var(--border-dashed); - --border-style-default: var(--border-solid); + --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); } \ No newline at end of file From 7f0b6164de25425bcc0e85a85c55ccd9f8501771 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?= <44321109+GomezIvann@users.noreply.github.com> Date: Thu, 30 Jan 2025 15:44:29 +0100 Subject: [PATCH 6/6] Ordering design tokens --- packages/lib/src/styles/variables.css | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index 32565ae2bb..4a3516229b 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -11,71 +11,71 @@ --color-alpha-700-a: #5b5b5bb2; --color-alpha-800-a: #494949cc; --color-alpha-900-a: #333333e5; + --color-blue-50: #f8fcff; --color-blue-100: #d9efff; --color-blue-200: #bce3ff; --color-blue-300: #a0d7ff; --color-blue-400: #61bdff; - --color-blue-50: #f8fcff; --color-blue-500: #30a1f1; --color-blue-600: #267fbf; --color-blue-700: #1d6091; --color-blue-800: #174e74; --color-blue-900: #103651; + --color-green-50: #f3fcf5; --color-green-100: #d1f5db; --color-green-200: #acecbe; --color-green-300: #87e3a0; --color-green-400: #53cb75; - --color-green-50: #f3fcf5; --color-green-500: #47ae64; --color-green-600: #39884f; --color-green-700: #2a673b; --color-green-800: #225230; --color-green-900: #183921; + --color-grey-50: #fbfbfb; --color-grey-100: #ebebeb; --color-grey-200: #dedede; --color-grey-300: #d1d1d1; --color-grey-400: #b5b5b5; - --color-grey-50: #fbfbfb; --color-grey-500: #9a9a9a; --color-grey-600: #797979; --color-grey-700: #5b5b5b; --color-grey-800: #494949; --color-grey-900: #333333; + --color-orange-50: #fffbf6; --color-orange-100: #fde9d2; --color-orange-200: #fbd9b3; --color-orange-300: #f9c78f; --color-orange-400: #f5a344; - --color-orange-50: #fffbf6; --color-orange-500: #d58a35; --color-orange-600: #a76d2b; --color-orange-700: #7f5121; --color-orange-800: #66421a; --color-orange-900: #3d3309; + --color-purple-50: #fcfbfe; --color-purple-100: #f0e8fa; --color-purple-200: #e7d9f6; --color-purple-300: #ddc9f3; --color-purple-400: #c8a7eb; - --color-purple-50: #fcfbfe; --color-purple-500: #b487e4; --color-purple-600: #9363c8; --color-purple-700: #6f4b97; --color-purple-800: #5a3c7a; --color-purple-900: #3e2a55; + --color-red-50: #fff7f6; --color-red-100: #ffe6e4; --color-red-200: #ffd3d0; --color-red-300: #ffc1bd; --color-red-400: #ff9896; - --color-red-50: #fff7f6; --color-red-500: #ff696f; --color-red-600: #e33248; --color-red-700: #a92c37; --color-red-800: #87262d; --color-red-900: #5b1f21; + --color-yellow-50: #fefbef; --color-yellow-100: #fcedae; --color-yellow-200: #f9de6e; --color-yellow-300: #f5cd2b; --color-yellow-400: #d4b226; - --color-yellow-50: #fefbef; --color-yellow-500: #b6981f; --color-yellow-600: #8f7818; --color-yellow-700: #6c5a12;