diff --git a/packages/lib/.storybook/preview-head.html b/packages/lib/.storybook/preview-head.html new file mode 100644 index 0000000000..e28cb145ff --- /dev/null +++ b/packages/lib/.storybook/preview-head.html @@ -0,0 +1,12 @@ + + + + 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..4a3516229b --- /dev/null +++ b/packages/lib/src/styles/variables.css @@ -0,0 +1,325 @@ +:root { + /* _Core */ + --color-absolutes-black: #000000; + --color-absolutes-white: #ffffff; + --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-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-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-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; + --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-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; + --dimensions-0: 0px; + --dimensions-1: 1px; + --dimensions-2: 2px; + --dimensions-4: 4px; + --dimensions-8: 8px; + --dimensions-12: 12px; + --dimensions-16: 16px; + --dimensions-20: 20px; + --dimensions-24: 24px; + --dimensions-28: 28px; + --dimensions-32: 32px; + --dimensions-36: 36px; + --dimensions-40: 40px; + --dimensions-44: 44px; + --dimensions-48: 48px; + --dimensions-56: 56px; + --dimensions-64: 64px; + --dimensions-72: 72px; + --dimensions-80: 80px; + --dimensions-96: 96px; + --font-size-12: 12px; + --font-size-14: 14px; + --font-size-16: 16px; + --font-size-18: 18px; + --font-size-20: 20px; + --font-size-24: 24px; + --font-size-32: 32px; + --font-size-48: 48px; + --font-size-60: 60px; + --font-weight-light: 300; + --font-weight-regular: 400; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --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); + --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-light: var(--color-blue-200); + --color-bg-secondary-lighter: var(--color-blue-100); + --color-bg-secondary-lightest: var(--color-blue-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); + --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: var(--dimensions-0); + --border-width-s: var(--dimensions-1); + --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-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); + --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-xxs: var(--dimensions-4); + --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); + --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-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