diff --git a/packages/.omletrc.json b/.omletrc.json similarity index 100% rename from packages/.omletrc.json rename to .omletrc.json diff --git a/.storybook/components/StatusTag/style.ts b/.storybook/components/StatusTag/style.ts index b9f687d1a..caf4013bb 100644 --- a/.storybook/components/StatusTag/style.ts +++ b/.storybook/components/StatusTag/style.ts @@ -11,16 +11,17 @@ const TypeToColor: Record = { wip: "#D8921F", }; -const TypeToBackGroundColor: Record = { - beta: "#F4F0F9", - deprecated: "#FEF2F2", - wip: "#FCF6EC", +const TypeToBorderColor: Record = { + beta: "#7A41CE", + deprecated: "#DC132C", + wip: "#F5A623", }; export const StyledLabel = styled("label")` ${(props: StyledLabelProps) => { const { type } = props; const color = TypeToColor[type]; + const borderColor = TypeToBorderColor[type]; return ` margin: 0 16px 0 8px; @@ -28,8 +29,7 @@ export const StyledLabel = styled("label")` font-size: 10px; font-weight: 600; color: ${color}; - border: solid 1px transparent; - background-color: ${TypeToBackGroundColor[type]}; + border: solid 1px ${borderColor}; border-radius: 2px; `; }} diff --git a/packages/components/src/common/helpers/scrollStop.ts b/packages/components/src/common/helpers/scrollStop.ts index 3024162ed..492fea308 100644 --- a/packages/components/src/common/helpers/scrollStop.ts +++ b/packages/components/src/common/helpers/scrollStop.ts @@ -54,7 +54,7 @@ const useScrollStopListener = (callback: () => void, timeout = 50) => { } }, timeout); return () => destroyListener(); - }, []); + }, [timeout]); }; export default useScrollStopListener; diff --git a/packages/components/src/common/styles-dictionary/config.js b/packages/components/src/common/styles-dictionary/config.js index cd3d2cf26..19f5f3796 100644 --- a/packages/components/src/common/styles-dictionary/config.js +++ b/packages/components/src/common/styles-dictionary/config.js @@ -54,5 +54,5 @@ module.exports = { transformGroup: "scss", }, }, - source: ["src/common/styles-dictionary/*.json"], + source: ["src/common/styles-dictionary/design-tokens/*.json"], }; diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index 5b2336009..5e2b7af34 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -1,79 +1,20 @@ :root { - --sds-font-color: black; - --sds-font-font-family-body: "Inter", sans-serif; - --sds-font-font-family-caps: "Inter", sans-serif; - --sds-font-font-family-code: "IBM Plex Mono", monospace; - --sds-font-font-family-header: "Inter", sans-serif; - --sds-font-font-family-tabular: "Inter", sans-serif; - --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; - --sds-font-body-xxxs-400-letter-spacing: 0.1px; - --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif; - --sds-font-body-xxxs-600-letter-spacing: 0.1px; - --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif; - --sds-font-body-xxs-400-letter-spacing: 0.1px; - --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif; - --sds-font-body-xxs-600-letter-spacing: 0.1px; - --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif; - --sds-font-body-xs-400-letter-spacing: 0.08px; - --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif; - --sds-font-body-xs-600-letter-spacing: 0.08px; - --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif; - --sds-font-body-s-400-letter-spacing: 0.08px; - --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif; - --sds-font-body-s-600-letter-spacing: 0.08px; - --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif; - --sds-font-body-m-400-letter-spacing: 0px; - --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif; - --sds-font-body-m-600-letter-spacing: 0px; - --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif; - --sds-font-body-l-400-letter-spacing: 0px; - --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif; - --sds-font-body-l-600-letter-spacing: 0px; - --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; - --sds-font-caps-xxxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxxs-600-text-transform: uppercase; - --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; - --sds-font-caps-xxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxs-600-text-transform: uppercase; - --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; - --sds-font-caps-xxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxs-600-text-transform: uppercase; - --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; - --sds-font-header-xxxs-600-letter-spacing: 0.1px; - --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; - --sds-font-header-xxs-600-letter-spacing: 0.1px; - --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif; - --sds-font-header-xs-600-letter-spacing: 0.08px; - --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif; - --sds-font-header-s-600-letter-spacing: 0.08px; - --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif; - --sds-font-header-m-600-letter-spacing: 0px; - --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif; - --sds-font-header-l-600-letter-spacing: 0px; - --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif; - --sds-font-header-xl-600-letter-spacing: 0px; - --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif; - --sds-font-header-xxl-600-letter-spacing: 0px; - --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif; - --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; - --sds-font-tabular-xs-400-letter-spacing: 0px; - --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif; - --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; - --sds-font-tabular-xs-600-letter-spacing: 0px; - --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif; - --sds-font-tabular-s-400-font-variant-numeric: tabular-nums; - --sds-font-tabular-s-400-letter-spacing: 0px; - --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif; - --sds-font-tabular-s-600-font-variant-numeric: tabular-nums; - --sds-font-tabular-s-600-letter-spacing: 0px; - --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace; - --sds-font-code-xs-400-letter-spacing: 0px; - --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace; - --sds-font-code-xs-600-letter-spacing: 0px; - --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace; - --sds-font-code-s-400-letter-spacing: 0px; - --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace; - --sds-font-code-s-600-letter-spacing: 0px; + --sds-borders-error-400: 1px solid #fef2f2; + --sds-borders-gray-100: 1px solid #f8f8f8; + --sds-borders-gray-200: 1px solid #eaeaea; + --sds-borders-gray-300: 1px solid #cccccc; + --sds-borders-gray-400: 1px solid #999999; + --sds-borders-gray-500: 1px solid #767676; + --sds-borders-gray-dashed: 2px dashed #999999; + --sds-borders-link-dashed: 1px dashed; + --sds-borders-link-solid: 1px solid; + --sds-borders-primary-300: 1px solid #a6c9ff; + --sds-borders-primary-400: 1px solid #0b68f8; + --sds-borders-primary-500: 1px solid #0142a4; + --sds-borders-primary-600: 1px solid #002660; + --sds-borders-primary-dashed: 2px dashed #0b68f8; + --sds-borders-success-400: 1px solid #ecf5f0; + --sds-borders-warning-400: 1px solid #fcf6ec; --sds-color-primitive-blue-100: #f5f9ff; --sds-color-primitive-blue-200: #e9f1ff; --sds-color-primitive-blue-300: #a6c9ff; @@ -190,35 +131,89 @@ --sds-color-semantic-component-positive-surface: #e6f7ed; --sds-color-semantic-component-positive-border: #3cb371; --sds-color-semantic-component-positive-icon: #3cb371; + --sds-corners-corner-l: 20px; + --sds-corners-corner-m: 4px; + --sds-corners-corner-s: 2px; + --sds-corners-corner-none: 0px; --sds-drop-shadows-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); --sds-drop-shadows-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), 0px 2px 4px 0px rgba(0, 0, 0, 0.15); --sds-drop-shadows-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); - --sds-borders-error-400: 1px solid #fef2f2; - --sds-borders-gray-100: 1px solid #f8f8f8; - --sds-borders-gray-200: 1px solid #eaeaea; - --sds-borders-gray-300: 1px solid #cccccc; - --sds-borders-gray-400: 1px solid #999999; - --sds-borders-gray-500: 1px solid #767676; - --sds-borders-gray-dashed: 2px dashed #999999; - --sds-borders-link-dashed: 1px dashed; - --sds-borders-link-solid: 1px solid; - --sds-borders-primary-300: 1px solid #a6c9ff; - --sds-borders-primary-400: 1px solid #0b68f8; - --sds-borders-primary-500: 1px solid #0142a4; - --sds-borders-primary-600: 1px solid #002660; - --sds-borders-primary-dashed: 2px dashed #0b68f8; - --sds-borders-success-400: 1px solid #ecf5f0; - --sds-borders-warning-400: 1px solid #fcf6ec; - --sds-spaces-default: 12px; - --sds-spaces-xxxs: 2px; - --sds-spaces-xxs: 4px; - --sds-spaces-xs: 6px; - --sds-spaces-s: 8px; - --sds-spaces-m: 12px; - --sds-spaces-l: 16px; - --sds-spaces-xl: 24px; - --sds-spaces-xxl: 40px; + --sds-font-color: black; + --sds-font-font-family-body: "Inter", sans-serif; + --sds-font-font-family-caps: "Inter", sans-serif; + --sds-font-font-family-code: "IBM Plex Mono", monospace; + --sds-font-font-family-header: "Inter", sans-serif; + --sds-font-font-family-tabular: "Inter", sans-serif; + --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; + --sds-font-body-xxxs-400-letter-spacing: 0.1px; + --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-body-xxxs-600-letter-spacing: 0.1px; + --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif; + --sds-font-body-xxs-400-letter-spacing: 0.1px; + --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-body-xxs-600-letter-spacing: 0.1px; + --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif; + --sds-font-body-xs-400-letter-spacing: 0.08px; + --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif; + --sds-font-body-xs-600-letter-spacing: 0.08px; + --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif; + --sds-font-body-s-400-letter-spacing: 0.08px; + --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif; + --sds-font-body-s-600-letter-spacing: 0.08px; + --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif; + --sds-font-body-m-400-letter-spacing: 0px; + --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif; + --sds-font-body-m-600-letter-spacing: 0px; + --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif; + --sds-font-body-l-400-letter-spacing: 0px; + --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif; + --sds-font-body-l-600-letter-spacing: 0px; + --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; + --sds-font-caps-xxxxs-600-letter-spacing: 0.5px; + --sds-font-caps-xxxxs-600-text-transform: uppercase; + --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-caps-xxxs-600-letter-spacing: 0.5px; + --sds-font-caps-xxxs-600-text-transform: uppercase; + --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-caps-xxs-600-letter-spacing: 0.5px; + --sds-font-caps-xxs-600-text-transform: uppercase; + --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-header-xxxs-600-letter-spacing: 0.1px; + --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-header-xxs-600-letter-spacing: 0.1px; + --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif; + --sds-font-header-xs-600-letter-spacing: 0.08px; + --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif; + --sds-font-header-s-600-letter-spacing: 0.08px; + --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif; + --sds-font-header-m-600-letter-spacing: 0px; + --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif; + --sds-font-header-l-600-letter-spacing: 0px; + --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif; + --sds-font-header-xl-600-letter-spacing: 0px; + --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif; + --sds-font-header-xxl-600-letter-spacing: 0px; + --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif; + --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; + --sds-font-tabular-xs-400-letter-spacing: 0px; + --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif; + --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; + --sds-font-tabular-xs-600-letter-spacing: 0px; + --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif; + --sds-font-tabular-s-400-font-variant-numeric: tabular-nums; + --sds-font-tabular-s-400-letter-spacing: 0px; + --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif; + --sds-font-tabular-s-600-font-variant-numeric: tabular-nums; + --sds-font-tabular-s-600-letter-spacing: 0px; + --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace; + --sds-font-code-xs-400-letter-spacing: 0px; + --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace; + --sds-font-code-xs-600-letter-spacing: 0px; + --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace; + --sds-font-code-s-400-letter-spacing: 0px; + --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace; + --sds-font-code-s-600-letter-spacing: 0px; --sds-icon-sizes-input-height: 16px; --sds-icon-sizes-input-width: 16px; --sds-icon-sizes-xs-height: 12px; @@ -229,8 +224,13 @@ --sds-icon-sizes-l-width: 24px; --sds-icon-sizes-xl-height: 32px; --sds-icon-sizes-xl-width: 32px; - --sds-corners-corner-l: 20px; - --sds-corners-corner-m: 4px; - --sds-corners-corner-s: 2px; - --sds-corners-corner-none: 0px; + --sds-spaces-default: 12px; + --sds-spaces-xxxs: 2px; + --sds-spaces-xxs: 4px; + --sds-spaces-xs: 6px; + --sds-spaces-s: 8px; + --sds-spaces-m: 12px; + --sds-spaces-l: 16px; + --sds-spaces-xl: 24px; + --sds-spaces-xxl: 40px; } diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json new file mode 100644 index 000000000..42bd46866 --- /dev/null +++ b/packages/components/src/common/styles-dictionary/design-tokens/borders.json @@ -0,0 +1,34 @@ +{ + "sds": { + "borders": { + "error": { + "400": { "value": "1px solid {sds.color.primitive.red.100.value}" } + }, + "gray": { + "100": { "value": "1px solid {sds.color.primitive.gray.100.value}" }, + "200": { "value": "1px solid {sds.color.primitive.gray.200.value}" }, + "300": { "value": "1px solid {sds.color.primitive.gray.300.value}" }, + "400": { "value": "1px solid {sds.color.primitive.gray.400.value}" }, + "500": { "value": "1px solid {sds.color.primitive.gray.500.value}" }, + "dashed": { "value": "2px dashed {sds.color.primitive.gray.400.value}" } + }, + "link": { + "dashed": { "value": "1px dashed" }, + "solid": { "value": "1px solid" } + }, + "primary": { + "300": { "value": "1px solid {sds.color.primitive.blue.300.value}" }, + "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" }, + "500": { "value": "1px solid {sds.color.primitive.blue.500.value}" }, + "600": { "value": "1px solid {sds.color.primitive.blue.600.value}" }, + "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" } + }, + "success": { + "400": { "value": "1px solid {sds.color.primitive.green.100.value}" } + }, + "warning": { + "400": { "value": "1px solid {sds.color.primitive.yellow.100.value}" } + } + } + } +} diff --git a/packages/components/src/common/styles-dictionary/design-tokens/color.json b/packages/components/src/common/styles-dictionary/design-tokens/color.json new file mode 100644 index 000000000..3f55a53e1 --- /dev/null +++ b/packages/components/src/common/styles-dictionary/design-tokens/color.json @@ -0,0 +1,206 @@ +{ + "sds": { + "color": { + "primitive": { + "blue": { + "100": { "value": "#F5F9FF" }, + "200": { "value": "#E9F1FF" }, + "300": { "value": "#A6C9FF" }, + "400": { "value": "#0B68F8" }, + "500": { "value": "#0142A4" }, + "600": { "value": "#002660" } + }, + "gray": { + "100": { "value": "#F8F8F8" }, + "200": { "value": "#EAEAEA" }, + "300": { "value": "#CCCCCC" }, + "400": { "value": "#999999" }, + "500": { "value": "#767676" }, + "600": { "value": "#545454" }, + "black": { "value": "#000000" }, + "white": { "value": "#FFFFFF" } + }, + "green": { + "100": { "value": "#ECF5F0" }, + "200": { "value": "#E6F7ED" }, + "400": { "value": "#3CB371" }, + "500": { "value": "#349A61" }, + "600": { "value": "#1C7F48" } + }, + "purple": { + "100": { "value": "#F4F0F9" }, + "200": { "value": "#F0EBF6" }, + "400": { "value": "#7A41CE" }, + "500": { "value": "#703CBE" }, + "600": { "value": "#693BAC" } + }, + "red": { + "100": { "value": "#FEF2F2" }, + "200": { "value": "#F8E8E8" }, + "400": { "value": "#DC132C" }, + "500": { "value": "#C61128" }, + "600": { "value": "#B70016" } + }, + "yellow": { + "100": { "value": "#FCF6EC" }, + "200": { "value": "#FFF3E1" }, + "400": { "value": "#F5A623" }, + "500": { "value": "#D8921F" }, + "600": { "value": "#946314" } + }, + "overlay": { + "100": { "value": "rgba(0, 0, 0, 0.08)" }, + "200": { "value": "rgba(0, 0, 0, 0.03)" } + } + }, + "semantic": { + "text": { + "base": { + "primary": { "value": "{sds.color.primitive.gray.black.value}" }, + "secondary": { "value": "{sds.color.primitive.gray.500.value}" }, + "disabled": { "value": "{sds.color.primitive.gray.300.value}" }, + "on-fill": { "value": "{sds.color.primitive.gray.white.value}" }, + "on-fill-disabled": { + "value": "{sds.color.primitive.gray.400.value}" + }, + "accent": { "value": "{sds.color.primitive.blue.600.value}" } + }, + "action": { + "default": { "value": "{sds.color.primitive.blue.400.value}" }, + "hover": { "value": "{sds.color.primitive.blue.500.value}" }, + "pressed": { "value": "{sds.color.primitive.blue.600.value}" } + }, + "beta": { "value": "{sds.color.primitive.purple.600.value}" }, + "info": { "value": "{sds.color.primitive.blue.600.value}" }, + "negative": { "value": "{sds.color.primitive.red.600.value}" }, + "notice": { "value": "{sds.color.primitive.yellow.600.value}" }, + "positive": { "value": "{sds.color.primitive.green.600.value}" } + }, + "component": { + "base": { + "fill": { "value": "{sds.color.primitive.gray.white.value}" }, + "fill-hover": { "value": "{sds.color.primitive.gray.100.value}" }, + "fill-pressed": { "value": "{sds.color.primitive.gray.100.value}" }, + "fill-open": { "value": "{sds.color.primitive.gray.100.value}" }, + "fill-selected": { + "value": "{sds.color.primitive.gray.black.value}" + }, + "fill-disabled": { + "value": "{sds.color.primitive.gray.300.value}" + }, + "on-fill-disabled": { + "value": "{sds.color.primitive.gray.400.value}" + }, + "surface-primary": { + "value": "{sds.color.primitive.gray.white.value}" + }, + "surface-secondary": { + "value": "{sds.color.primitive.gray.100.value}" + }, + "surface-tertiary": { + "value": "{sds.color.primitive.gray.200.value}" + }, + "divider": { "value": "{sds.color.primitive.gray.200.value}" }, + "border": { "value": "{sds.color.primitive.gray.400.value}" }, + "border-hover": { + "value": "{sds.color.primitive.gray.black.value}" + }, + "border-disabled": { + "value": "{sds.color.primitive.gray.300.value}" + }, + "icon": { "value": "{sds.color.primitive.gray.500.value}" }, + "icon-hover": { "value": "{sds.color.primitive.gray.black.value}" }, + "icon-pressed": { + "value": "{sds.color.primitive.gray.black.value}" + }, + "icon-disabled": { "value": "{sds.color.primitive.gray.300.value}" } + }, + "accent": { + "fill": { "value": "{sds.color.primitive.blue.400.value}" }, + "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" }, + "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" }, + "fill-on-fill": { + "value": "{sds.color.primitive.gray.white.value}" + }, + "fill-disabled": { + "value": "{sds.color.primitive.blue.300.value}" + }, + "surface": { "value": "{sds.color.primitive.blue.200.value}" }, + "border": { "value": "{sds.color.primitive.blue.400.value}" }, + "border-hover": { "value": "{sds.color.primitive.blue.500.value}" }, + "border-open": { "value": "{sds.color.primitive.blue.400.value}" }, + "border-focus": { "value": "{sds.color.primitive.blue.400.value}" }, + "border-selected": { + "value": "{sds.color.primitive.blue.400.value}" + }, + "border-disabled": { + "value": "{sds.color.primitive.blue.300.value}" + }, + "icon": { "value": "{sds.color.primitive.blue.400.value}" } + }, + "beta": { + "fill": { "value": "{sds.color.primitive.purple.400.value}" }, + "fill-hover": { "value": "{sds.color.primitive.purple.500.value}" }, + "fill-pressed": { + "value": "{sds.color.primitive.purple.600.value}" + }, + "fill-on-fill": { + "value": "{sds.color.primitive.gray.white.value}" + }, + "surface": { "value": "{sds.color.primitive.purple.200.value}" }, + "border": { "value": "{sds.color.primitive.purple.400.value}" }, + "icon": { "value": "{sds.color.primitive.purple.400.value}" } + }, + "info": { + "fill": { "value": "{sds.color.primitive.blue.400.value}" }, + "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" }, + "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" }, + "fill-on-fill": { + "value": "{sds.color.primitive.gray.white.value}" + }, + "surface": { "value": "{sds.color.primitive.blue.200.value}" }, + "border": { "value": "{sds.color.primitive.blue.400.value}" }, + "icon": { "value": "{sds.color.primitive.blue.400.value}" } + }, + "negative": { + "fill": { "value": "{sds.color.primitive.red.400.value}" }, + "fill-hover": { "value": "{sds.color.primitive.red.500.value}" }, + "fill-pressed": { "value": "{sds.color.primitive.red.600.value}" }, + "fill-on-fill": { + "value": "{sds.color.primitive.gray.white.value}" + }, + "surface": { "value": "{sds.color.primitive.red.200.value}" }, + "border": { "value": "{sds.color.primitive.red.400.value}" }, + "icon": { "value": "{sds.color.primitive.red.400.value}" } + }, + "notice": { + "fill": { "value": "{sds.color.primitive.yellow.400.value}" }, + "fill-hover": { "value": "{sds.color.primitive.yellow.500.value}" }, + "fill-pressed": { + "value": "{sds.color.primitive.yellow.600.value}" + }, + "fill-on-fill": { + "value": "{sds.color.primitive.gray.white.value}" + }, + "surface": { "value": "{sds.color.primitive.yellow.200.value}" }, + "border": { "value": "{sds.color.primitive.yellow.400.value}" }, + "icon": { "value": "{sds.color.primitive.yellow.400.value}" } + }, + "positive": { + "fill": { "value": "{sds.color.primitive.green.400.value}" }, + "fill-hover": { "value": "{sds.color.primitive.green.500.value}" }, + "fill-pressed": { + "value": "{sds.color.primitive.green.600.value}" + }, + "fill-on-fill": { + "value": "{sds.color.primitive.gray.white.value}" + }, + "surface": { "value": "{sds.color.primitive.green.200.value}" }, + "border": { "value": "{sds.color.primitive.green.400.value}" }, + "icon": { "value": "{sds.color.primitive.green.400.value}" } + } + } + } + } + } +} diff --git a/packages/components/src/common/styles-dictionary/design-tokens/corners.json b/packages/components/src/common/styles-dictionary/design-tokens/corners.json new file mode 100644 index 000000000..238dea00c --- /dev/null +++ b/packages/components/src/common/styles-dictionary/design-tokens/corners.json @@ -0,0 +1,10 @@ +{ + "sds": { + "corners": { + "cornerL": { "value": "20px" }, + "cornerM": { "value": "4px" }, + "cornerS": { "value": "2px" }, + "cornerNone": { "value": "0px" } + } + } +} diff --git a/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json b/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json new file mode 100644 index 000000000..a62068a33 --- /dev/null +++ b/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json @@ -0,0 +1,15 @@ +{ + "sds": { + "drop-shadows": { + "shadowL": { + "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)" + }, + "shadowM": { + "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)" + }, + "shadowS": { + "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)" + } + } + } +} diff --git a/packages/components/src/common/styles-dictionary/design-tokens/font.json b/packages/components/src/common/styles-dictionary/design-tokens/font.json new file mode 100644 index 000000000..cf5d0db65 --- /dev/null +++ b/packages/components/src/common/styles-dictionary/design-tokens/font.json @@ -0,0 +1,271 @@ +{ + "sds": { + "font": { + "color": { + "value": "black" + }, + "font-family": { + "body": { + "value": "\"Inter\", sans-serif" + }, + "caps": { + "value": "\"Inter\", sans-serif" + }, + "code": { + "value": "\"IBM Plex Mono\", monospace" + }, + "header": { + "value": "\"Inter\", sans-serif" + }, + "tabular": { + "value": "\"Inter\", sans-serif" + } + }, + "body": { + "xxxs": { + "400": { + "font": { + "value": "400 11px/16px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0.1px" } + }, + "600": { + "font": { + "value": "600 11px/16px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0.1px" } + } + }, + "xxs": { + "400": { + "font": { + "value": "400 12px/18px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0.1px" } + }, + "600": { + "font": { + "value": "600 12px/18px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0.1px" } + } + }, + "xs": { + "400": { + "font": { + "value": "400 13px/20px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0.08px" } + }, + "600": { + "font": { + "value": "600 13px/20px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0.08px" } + } + }, + "s": { + "400": { + "font": { + "value": "400 14px/24px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0.08px" } + }, + "600": { + "font": { + "value": "600 14px/24px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0.08px" } + } + }, + "m": { + "400": { + "font": { + "value": "400 16px/26px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0px" } + }, + "600": { + "font": { + "value": "600 16px/26px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0px" } + } + }, + "l": { + "400": { + "font": { + "value": "400 18px/28px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0px" } + }, + "600": { + "font": { + "value": "600 18px/28px {sds.font.font-family.body.value}" + }, + "letter-spacing": { "value": "0px" } + } + } + }, + "caps": { + "xxxxs": { + "600": { + "font": { + "value": "600 10px/14px {sds.font.font-family.caps.value}" + }, + "letter-spacing": { "value": "0.5px" }, + "text-transform": { "value": " uppercase" } + } + }, + "xxxs": { + "600": { + "font": { + "value": "600 11px/16px {sds.font.font-family.caps.value}" + }, + "letter-spacing": { "value": "0.5px" }, + "text-transform": { "value": " uppercase" } + } + }, + "xxs": { + "600": { + "font": { + "value": "600 12px/18px {sds.font.font-family.caps.value}" + }, + "letter-spacing": { "value": "0.5px" }, + "text-transform": { "value": " uppercase" } + } + } + }, + "header": { + "xxxs": { + "600": { + "font": { + "value": "600 11px/16px {sds.font.font-family.header.value}" + }, + "letter-spacing": { "value": "0.1px" } + } + }, + "xxs": { + "600": { + "font": { + "value": "600 12px/18px {sds.font.font-family.header.value}" + }, + "letter-spacing": { "value": "0.1px" } + } + }, + "xs": { + "600": { + "font": { + "value": "600 13px/18px {sds.font.font-family.header.value}" + }, + "letter-spacing": { "value": "0.08px" } + } + }, + "s": { + "600": { + "font": { + "value": "600 14px/20px {sds.font.font-family.header.value}" + }, + "letter-spacing": { "value": "0.08px" } + } + }, + "m": { + "600": { + "font": { + "value": "600 16px/22px {sds.font.font-family.header.value}" + }, + "letter-spacing": { "value": "0px" } + } + }, + "l": { + "600": { + "font": { + "value": "600 18px/24px {sds.font.font-family.header.value}" + }, + "letter-spacing": { "value": "0px" } + } + }, + "xl": { + "600": { + "font": { + "value": "600 22px/30px {sds.font.font-family.header.value}" + }, + "letter-spacing": { "value": "0px" } + } + }, + "xxl": { + "600": { + "font": { + "value": "600 26px/34px {sds.font.font-family.header.value}" + }, + "letter-spacing": { "value": "0px" } + } + } + }, + "tabular": { + "xs": { + "400": { + "font": { + "value": "400 13px/20px {sds.font.font-family.tabular.value}" + }, + "font-variant-numeric": { "value": "tabular-nums" }, + "letter-spacing": { "value": "0px" } + }, + "600": { + "font": { + "value": "600 13px/20px {sds.font.font-family.tabular.value}" + }, + "font-variant-numeric": { "value": "tabular-nums" }, + "letter-spacing": { "value": "0px" } + } + }, + "s": { + "400": { + "font": { + "value": "400 14px/24px {sds.font.font-family.tabular.value}" + }, + "font-variant-numeric": { "value": "tabular-nums" }, + "letter-spacing": { "value": "0px" } + }, + "600": { + "font": { + "value": "600 14px/24px {sds.font.font-family.tabular.value}" + }, + "font-variant-numeric": { "value": "tabular-nums" }, + "letter-spacing": { "value": "0px" } + } + } + }, + "code": { + "xs": { + "400": { + "font": { + "value": "400 13px/20px {sds.font.font-family.code.value}" + }, + "letter-spacing": { "value": "0px" } + }, + "600": { + "font": { + "value": "600 13px/20px {sds.font.font-family.code.value}" + }, + "letter-spacing": { "value": "0px" } + } + }, + "s": { + "400": { + "font": { + "value": "400 14px/24px {sds.font.font-family.code.value}" + }, + "letter-spacing": { "value": "0px" } + }, + "600": { + "font": { + "value": "600 14px/24px {sds.font.font-family.code.value}" + }, + "letter-spacing": { "value": "0px" } + } + } + } + } + } +} diff --git a/packages/components/src/common/styles-dictionary/design-tokens/icon-sizes.json b/packages/components/src/common/styles-dictionary/design-tokens/icon-sizes.json new file mode 100644 index 000000000..4cd311e2e --- /dev/null +++ b/packages/components/src/common/styles-dictionary/design-tokens/icon-sizes.json @@ -0,0 +1,30 @@ +{ + "sds": { + "iconSizes": { + "input": { + "height": { + "value": "16px" + }, + "width": { + "value": "16px" + } + }, + "xs": { + "height": { "value": "12px" }, + "width": { "value": "12px" } + }, + "s": { + "height": { "value": "16px" }, + "width": { "value": "16px" } + }, + "l": { + "height": { "value": "24px" }, + "width": { "value": "24px" } + }, + "xl": { + "height": { "value": "32px" }, + "width": { "value": "32px" } + } + } + } +} diff --git a/packages/components/src/common/styles-dictionary/design-tokens/spaces.json b/packages/components/src/common/styles-dictionary/design-tokens/spaces.json new file mode 100644 index 000000000..a94de7f2e --- /dev/null +++ b/packages/components/src/common/styles-dictionary/design-tokens/spaces.json @@ -0,0 +1,15 @@ +{ + "sds": { + "spaces": { + "default": { "value": "12px" }, + "xxxs": { "value": "2px" }, + "xxs": { "value": "4px" }, + "xs": { "value": "6px" }, + "s": { "value": "8px" }, + "m": { "value": "12px" }, + "l": { "value": "16px" }, + "xl": { "value": "24px" }, + "xxl": { "value": "40px" } + } + } +} diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss index a05415fc1..baf2fb840 100644 --- a/packages/components/src/common/styles-dictionary/scss/_variables.scss +++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss @@ -1,78 +1,19 @@ -$sds-font-color: black; -$sds-font-font-family-body: "Inter", sans-serif; -$sds-font-font-family-caps: "Inter", sans-serif; -$sds-font-font-family-code: "IBM Plex Mono", monospace; -$sds-font-font-family-header: "Inter", sans-serif; -$sds-font-font-family-tabular: "Inter", sans-serif; -$sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; -$sds-font-body-xxxs-400-letter-spacing: 0.1px; -$sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif; -$sds-font-body-xxxs-600-letter-spacing: 0.1px; -$sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif; -$sds-font-body-xxs-400-letter-spacing: 0.1px; -$sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif; -$sds-font-body-xxs-600-letter-spacing: 0.1px; -$sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif; -$sds-font-body-xs-400-letter-spacing: 0.08px; -$sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif; -$sds-font-body-xs-600-letter-spacing: 0.08px; -$sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif; -$sds-font-body-s-400-letter-spacing: 0.08px; -$sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif; -$sds-font-body-s-600-letter-spacing: 0.08px; -$sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif; -$sds-font-body-m-400-letter-spacing: 0px; -$sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif; -$sds-font-body-m-600-letter-spacing: 0px; -$sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif; -$sds-font-body-l-400-letter-spacing: 0px; -$sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif; -$sds-font-body-l-600-letter-spacing: 0px; -$sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; -$sds-font-caps-xxxxs-600-letter-spacing: 0.5px; -$sds-font-caps-xxxxs-600-text-transform: uppercase; -$sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; -$sds-font-caps-xxxs-600-letter-spacing: 0.5px; -$sds-font-caps-xxxs-600-text-transform: uppercase; -$sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; -$sds-font-caps-xxs-600-letter-spacing: 0.5px; -$sds-font-caps-xxs-600-text-transform: uppercase; -$sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; -$sds-font-header-xxxs-600-letter-spacing: 0.1px; -$sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; -$sds-font-header-xxs-600-letter-spacing: 0.1px; -$sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif; -$sds-font-header-xs-600-letter-spacing: 0.08px; -$sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif; -$sds-font-header-s-600-letter-spacing: 0.08px; -$sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif; -$sds-font-header-m-600-letter-spacing: 0px; -$sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif; -$sds-font-header-l-600-letter-spacing: 0px; -$sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif; -$sds-font-header-xl-600-letter-spacing: 0px; -$sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif; -$sds-font-header-xxl-600-letter-spacing: 0px; -$sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif; -$sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; -$sds-font-tabular-xs-400-letter-spacing: 0px; -$sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif; -$sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; -$sds-font-tabular-xs-600-letter-spacing: 0px; -$sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif; -$sds-font-tabular-s-400-font-variant-numeric: tabular-nums; -$sds-font-tabular-s-400-letter-spacing: 0px; -$sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif; -$sds-font-tabular-s-600-font-variant-numeric: tabular-nums; -$sds-font-tabular-s-600-letter-spacing: 0px; -$sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace; -$sds-font-code-xs-400-letter-spacing: 0px; -$sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace; -$sds-font-code-xs-600-letter-spacing: 0px; -$sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace; -$sds-font-code-s-400-letter-spacing: 0px; -$sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace; -$sds-font-code-s-600-letter-spacing: 0px; +$sds-borders-error-400: 1px solid #FEF2F2; +$sds-borders-gray-100: 1px solid #F8F8F8; +$sds-borders-gray-200: 1px solid #EAEAEA; +$sds-borders-gray-300: 1px solid #CCCCCC; +$sds-borders-gray-400: 1px solid #999999; +$sds-borders-gray-500: 1px solid #767676; +$sds-borders-gray-dashed: 2px dashed #999999; +$sds-borders-link-dashed: 1px dashed; +$sds-borders-link-solid: 1px solid; +$sds-borders-primary-300: 1px solid #A6C9FF; +$sds-borders-primary-400: 1px solid #0B68F8; +$sds-borders-primary-500: 1px solid #0142A4; +$sds-borders-primary-600: 1px solid #002660; +$sds-borders-primary-dashed: 2px dashed #0B68F8; +$sds-borders-success-400: 1px solid #ECF5F0; +$sds-borders-warning-400: 1px solid #FCF6EC; $sds-color-primitive-blue-100: #F5F9FF; $sds-color-primitive-blue-200: #E9F1FF; $sds-color-primitive-blue-300: #A6C9FF; @@ -189,34 +130,88 @@ $sds-color-semantic-component-positive-fill-on-fill: #FFFFFF; $sds-color-semantic-component-positive-surface: #E6F7ED; $sds-color-semantic-component-positive-border: #3CB371; $sds-color-semantic-component-positive-icon: #3CB371; +$sds-corners-corner-l: 20px; +$sds-corners-corner-m: 4px; +$sds-corners-corner-s: 2px; +$sds-corners-corner-none: 0px; $sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); $sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); $sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); -$sds-borders-error-400: 1px solid #FEF2F2; -$sds-borders-gray-100: 1px solid #F8F8F8; -$sds-borders-gray-200: 1px solid #EAEAEA; -$sds-borders-gray-300: 1px solid #CCCCCC; -$sds-borders-gray-400: 1px solid #999999; -$sds-borders-gray-500: 1px solid #767676; -$sds-borders-gray-dashed: 2px dashed #999999; -$sds-borders-link-dashed: 1px dashed; -$sds-borders-link-solid: 1px solid; -$sds-borders-primary-300: 1px solid #A6C9FF; -$sds-borders-primary-400: 1px solid #0B68F8; -$sds-borders-primary-500: 1px solid #0142A4; -$sds-borders-primary-600: 1px solid #002660; -$sds-borders-primary-dashed: 2px dashed #0B68F8; -$sds-borders-success-400: 1px solid #ECF5F0; -$sds-borders-warning-400: 1px solid #FCF6EC; -$sds-spaces-default: 12px; -$sds-spaces-xxxs: 2px; -$sds-spaces-xxs: 4px; -$sds-spaces-xs: 6px; -$sds-spaces-s: 8px; -$sds-spaces-m: 12px; -$sds-spaces-l: 16px; -$sds-spaces-xl: 24px; -$sds-spaces-xxl: 40px; +$sds-font-color: black; +$sds-font-font-family-body: "Inter", sans-serif; +$sds-font-font-family-caps: "Inter", sans-serif; +$sds-font-font-family-code: "IBM Plex Mono", monospace; +$sds-font-font-family-header: "Inter", sans-serif; +$sds-font-font-family-tabular: "Inter", sans-serif; +$sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; +$sds-font-body-xxxs-400-letter-spacing: 0.1px; +$sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif; +$sds-font-body-xxxs-600-letter-spacing: 0.1px; +$sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif; +$sds-font-body-xxs-400-letter-spacing: 0.1px; +$sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif; +$sds-font-body-xxs-600-letter-spacing: 0.1px; +$sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif; +$sds-font-body-xs-400-letter-spacing: 0.08px; +$sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif; +$sds-font-body-xs-600-letter-spacing: 0.08px; +$sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif; +$sds-font-body-s-400-letter-spacing: 0.08px; +$sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif; +$sds-font-body-s-600-letter-spacing: 0.08px; +$sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif; +$sds-font-body-m-400-letter-spacing: 0px; +$sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif; +$sds-font-body-m-600-letter-spacing: 0px; +$sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif; +$sds-font-body-l-400-letter-spacing: 0px; +$sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif; +$sds-font-body-l-600-letter-spacing: 0px; +$sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; +$sds-font-caps-xxxxs-600-letter-spacing: 0.5px; +$sds-font-caps-xxxxs-600-text-transform: uppercase; +$sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; +$sds-font-caps-xxxs-600-letter-spacing: 0.5px; +$sds-font-caps-xxxs-600-text-transform: uppercase; +$sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; +$sds-font-caps-xxs-600-letter-spacing: 0.5px; +$sds-font-caps-xxs-600-text-transform: uppercase; +$sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; +$sds-font-header-xxxs-600-letter-spacing: 0.1px; +$sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; +$sds-font-header-xxs-600-letter-spacing: 0.1px; +$sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif; +$sds-font-header-xs-600-letter-spacing: 0.08px; +$sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif; +$sds-font-header-s-600-letter-spacing: 0.08px; +$sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif; +$sds-font-header-m-600-letter-spacing: 0px; +$sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif; +$sds-font-header-l-600-letter-spacing: 0px; +$sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif; +$sds-font-header-xl-600-letter-spacing: 0px; +$sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif; +$sds-font-header-xxl-600-letter-spacing: 0px; +$sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif; +$sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; +$sds-font-tabular-xs-400-letter-spacing: 0px; +$sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif; +$sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; +$sds-font-tabular-xs-600-letter-spacing: 0px; +$sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif; +$sds-font-tabular-s-400-font-variant-numeric: tabular-nums; +$sds-font-tabular-s-400-letter-spacing: 0px; +$sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif; +$sds-font-tabular-s-600-font-variant-numeric: tabular-nums; +$sds-font-tabular-s-600-letter-spacing: 0px; +$sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace; +$sds-font-code-xs-400-letter-spacing: 0px; +$sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace; +$sds-font-code-xs-600-letter-spacing: 0px; +$sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace; +$sds-font-code-s-400-letter-spacing: 0px; +$sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace; +$sds-font-code-s-600-letter-spacing: 0px; $sds-icon-sizes-input-height: 16px; $sds-icon-sizes-input-width: 16px; $sds-icon-sizes-xs-height: 12px; @@ -227,7 +222,12 @@ $sds-icon-sizes-l-height: 24px; $sds-icon-sizes-l-width: 24px; $sds-icon-sizes-xl-height: 32px; $sds-icon-sizes-xl-width: 32px; -$sds-corners-corner-l: 20px; -$sds-corners-corner-m: 4px; -$sds-corners-corner-s: 2px; -$sds-corners-corner-none: 0px; +$sds-spaces-default: 12px; +$sds-spaces-xxxs: 2px; +$sds-spaces-xxs: 4px; +$sds-spaces-xs: 6px; +$sds-spaces-s: 8px; +$sds-spaces-m: 12px; +$sds-spaces-l: 16px; +$sds-spaces-xl: 24px; +$sds-spaces-xxl: 40px; diff --git a/packages/components/src/common/styles-dictionary/style-dictionary.json b/packages/components/src/common/styles-dictionary/style-dictionary.json deleted file mode 100644 index 5c2fd1a95..000000000 --- a/packages/components/src/common/styles-dictionary/style-dictionary.json +++ /dev/null @@ -1,557 +0,0 @@ -{ - "sds": { - "font": { - "color": { - "value": "black" - }, - "font-family": { - "body": { - "value": "\"Inter\", sans-serif" - }, - "caps": { - "value": "\"Inter\", sans-serif" - }, - "code": { - "value": "\"IBM Plex Mono\", monospace" - }, - "header": { - "value": "\"Inter\", sans-serif" - }, - "tabular": { - "value": "\"Inter\", sans-serif" - } - }, - "body": { - "xxxs": { - "400": { - "font": { - "value": "400 11px/16px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0.1px" } - }, - "600": { - "font": { - "value": "600 11px/16px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0.1px" } - } - }, - "xxs": { - "400": { - "font": { - "value": "400 12px/18px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0.1px" } - }, - "600": { - "font": { - "value": "600 12px/18px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0.1px" } - } - }, - "xs": { - "400": { - "font": { - "value": "400 13px/20px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0.08px" } - }, - "600": { - "font": { - "value": "600 13px/20px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0.08px" } - } - }, - "s": { - "400": { - "font": { - "value": "400 14px/24px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0.08px" } - }, - "600": { - "font": { - "value": "600 14px/24px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0.08px" } - } - }, - "m": { - "400": { - "font": { - "value": "400 16px/26px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0px" } - }, - "600": { - "font": { - "value": "600 16px/26px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0px" } - } - }, - "l": { - "400": { - "font": { - "value": "400 18px/28px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0px" } - }, - "600": { - "font": { - "value": "600 18px/28px {sds.font.font-family.body.value}" - }, - "letter-spacing": { "value": "0px" } - } - } - }, - "caps": { - "xxxxs": { - "600": { - "font": { - "value": "600 10px/14px {sds.font.font-family.caps.value}" - }, - "letter-spacing": { "value": "0.5px" }, - "text-transform": { "value": " uppercase" } - } - }, - "xxxs": { - "600": { - "font": { - "value": "600 11px/16px {sds.font.font-family.caps.value}" - }, - "letter-spacing": { "value": "0.5px" }, - "text-transform": { "value": " uppercase" } - } - }, - "xxs": { - "600": { - "font": { - "value": "600 12px/18px {sds.font.font-family.caps.value}" - }, - "letter-spacing": { "value": "0.5px" }, - "text-transform": { "value": " uppercase" } - } - } - }, - "header": { - "xxxs": { - "600": { - "font": { - "value": "600 11px/16px {sds.font.font-family.header.value}" - }, - "letter-spacing": { "value": "0.1px" } - } - }, - "xxs": { - "600": { - "font": { - "value": "600 12px/18px {sds.font.font-family.header.value}" - }, - "letter-spacing": { "value": "0.1px" } - } - }, - "xs": { - "600": { - "font": { - "value": "600 13px/18px {sds.font.font-family.header.value}" - }, - "letter-spacing": { "value": "0.08px" } - } - }, - "s": { - "600": { - "font": { - "value": "600 14px/20px {sds.font.font-family.header.value}" - }, - "letter-spacing": { "value": "0.08px" } - } - }, - "m": { - "600": { - "font": { - "value": "600 16px/22px {sds.font.font-family.header.value}" - }, - "letter-spacing": { "value": "0px" } - } - }, - "l": { - "600": { - "font": { - "value": "600 18px/24px {sds.font.font-family.header.value}" - }, - "letter-spacing": { "value": "0px" } - } - }, - "xl": { - "600": { - "font": { - "value": "600 22px/30px {sds.font.font-family.header.value}" - }, - "letter-spacing": { "value": "0px" } - } - }, - "xxl": { - "600": { - "font": { - "value": "600 26px/34px {sds.font.font-family.header.value}" - }, - "letter-spacing": { "value": "0px" } - } - } - }, - "tabular": { - "xs": { - "400": { - "font": { - "value": "400 13px/20px {sds.font.font-family.tabular.value}" - }, - "font-variant-numeric": { "value": "tabular-nums" }, - "letter-spacing": { "value": "0px" } - }, - "600": { - "font": { - "value": "600 13px/20px {sds.font.font-family.tabular.value}" - }, - "font-variant-numeric": { "value": "tabular-nums" }, - "letter-spacing": { "value": "0px" } - } - }, - "s": { - "400": { - "font": { - "value": "400 14px/24px {sds.font.font-family.tabular.value}" - }, - "font-variant-numeric": { "value": "tabular-nums" }, - "letter-spacing": { "value": "0px" } - }, - "600": { - "font": { - "value": "600 14px/24px {sds.font.font-family.tabular.value}" - }, - "font-variant-numeric": { "value": "tabular-nums" }, - "letter-spacing": { "value": "0px" } - } - } - }, - "code": { - "xs": { - "400": { - "font": { - "value": "400 13px/20px {sds.font.font-family.code.value}" - }, - "letter-spacing": { "value": "0px" } - }, - "600": { - "font": { - "value": "600 13px/20px {sds.font.font-family.code.value}" - }, - "letter-spacing": { "value": "0px" } - } - }, - "s": { - "400": { - "font": { - "value": "400 14px/24px {sds.font.font-family.code.value}" - }, - "letter-spacing": { "value": "0px" } - }, - "600": { - "font": { - "value": "600 14px/24px {sds.font.font-family.code.value}" - }, - "letter-spacing": { "value": "0px" } - } - } - } - }, - "color": { - "primitive": { - "blue": { - "100": { "value": "#F5F9FF" }, - "200": { "value": "#E9F1FF" }, - "300": { "value": "#A6C9FF" }, - "400": { "value": "#0B68F8" }, - "500": { "value": "#0142A4" }, - "600": { "value": "#002660" } - }, - "gray": { - "100": { "value": "#F8F8F8" }, - "200": { "value": "#EAEAEA" }, - "300": { "value": "#CCCCCC" }, - "400": { "value": "#999999" }, - "500": { "value": "#767676" }, - "600": { "value": "#545454" }, - "black": { "value": "#000000" }, - "white": { "value": "#FFFFFF" } - }, - "green": { - "100": { "value": "#ECF5F0" }, - "200": { "value": "#E6F7ED" }, - "400": { "value": "#3CB371" }, - "500": { "value": "#349A61" }, - "600": { "value": "#1C7F48" } - }, - "purple": { - "100": { "value": "#F4F0F9" }, - "200": { "value": "#F0EBF6" }, - "400": { "value": "#7A41CE" }, - "500": { "value": "#703CBE" }, - "600": { "value": "#693BAC" } - }, - "red": { - "100": { "value": "#FEF2F2" }, - "200": { "value": "#F8E8E8" }, - "400": { "value": "#DC132C" }, - "500": { "value": "#C61128" }, - "600": { "value": "#B70016" } - }, - "yellow": { - "100": { "value": "#FCF6EC" }, - "200": { "value": "#FFF3E1" }, - "400": { "value": "#F5A623" }, - "500": { "value": "#D8921F" }, - "600": { "value": "#946314" } - }, - "overlay": { - "100": { "value": "rgba(0, 0, 0, 0.08)" }, - "200": { "value": "rgba(0, 0, 0, 0.03)" } - } - }, - "semantic": { - "text": { - "base": { - "primary": { "value": "{sds.color.primitive.gray.black.value}" }, - "secondary": { "value": "{sds.color.primitive.gray.500.value}" }, - "disabled": { "value": "{sds.color.primitive.gray.300.value}" }, - "on-fill": { "value": "{sds.color.primitive.gray.white.value}" }, - "on-fill-disabled": { - "value": "{sds.color.primitive.gray.400.value}" - }, - "accent": { "value": "{sds.color.primitive.blue.600.value}" } - }, - "action": { - "default": { "value": "{sds.color.primitive.blue.400.value}" }, - "hover": { "value": "{sds.color.primitive.blue.500.value}" }, - "pressed": { "value": "{sds.color.primitive.blue.600.value}" } - }, - "beta": { "value": "{sds.color.primitive.purple.600.value}" }, - "info": { "value": "{sds.color.primitive.blue.600.value}" }, - "negative": { "value": "{sds.color.primitive.red.600.value}" }, - "notice": { "value": "{sds.color.primitive.yellow.600.value}" }, - "positive": { "value": "{sds.color.primitive.green.600.value}" } - }, - "component": { - "base": { - "fill": { "value": "{sds.color.primitive.gray.white.value}" }, - "fill-hover": { "value": "{sds.color.primitive.gray.100.value}" }, - "fill-pressed": { "value": "{sds.color.primitive.gray.100.value}" }, - "fill-open": { "value": "{sds.color.primitive.gray.100.value}" }, - "fill-selected": { - "value": "{sds.color.primitive.gray.black.value}" - }, - "fill-disabled": { - "value": "{sds.color.primitive.gray.300.value}" - }, - "on-fill-disabled": { - "value": "{sds.color.primitive.gray.400.value}" - }, - "surface-primary": { - "value": "{sds.color.primitive.gray.white.value}" - }, - "surface-secondary": { - "value": "{sds.color.primitive.gray.100.value}" - }, - "surface-tertiary": { - "value": "{sds.color.primitive.gray.200.value}" - }, - "divider": { "value": "{sds.color.primitive.gray.200.value}" }, - "border": { "value": "{sds.color.primitive.gray.400.value}" }, - "border-hover": { - "value": "{sds.color.primitive.gray.black.value}" - }, - "border-disabled": { - "value": "{sds.color.primitive.gray.300.value}" - }, - "icon": { "value": "{sds.color.primitive.gray.500.value}" }, - "icon-hover": { "value": "{sds.color.primitive.gray.black.value}" }, - "icon-pressed": { - "value": "{sds.color.primitive.gray.black.value}" - }, - "icon-disabled": { "value": "{sds.color.primitive.gray.300.value}" } - }, - "accent": { - "fill": { "value": "{sds.color.primitive.blue.400.value}" }, - "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" }, - "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" }, - "fill-on-fill": { - "value": "{sds.color.primitive.gray.white.value}" - }, - "fill-disabled": { - "value": "{sds.color.primitive.blue.300.value}" - }, - "surface": { "value": "{sds.color.primitive.blue.200.value}" }, - "border": { "value": "{sds.color.primitive.blue.400.value}" }, - "border-hover": { "value": "{sds.color.primitive.blue.500.value}" }, - "border-open": { "value": "{sds.color.primitive.blue.400.value}" }, - "border-focus": { "value": "{sds.color.primitive.blue.400.value}" }, - "border-selected": { - "value": "{sds.color.primitive.blue.400.value}" - }, - "border-disabled": { - "value": "{sds.color.primitive.blue.300.value}" - }, - "icon": { "value": "{sds.color.primitive.blue.400.value}" } - }, - "beta": { - "fill": { "value": "{sds.color.primitive.purple.400.value}" }, - "fill-hover": { "value": "{sds.color.primitive.purple.500.value}" }, - "fill-pressed": { - "value": "{sds.color.primitive.purple.600.value}" - }, - "fill-on-fill": { - "value": "{sds.color.primitive.gray.white.value}" - }, - "surface": { "value": "{sds.color.primitive.purple.200.value}" }, - "border": { "value": "{sds.color.primitive.purple.400.value}" }, - "icon": { "value": "{sds.color.primitive.purple.400.value}" } - }, - "info": { - "fill": { "value": "{sds.color.primitive.blue.400.value}" }, - "fill-hover": { "value": "{sds.color.primitive.blue.500.value}" }, - "fill-pressed": { "value": "{sds.color.primitive.blue.600.value}" }, - "fill-on-fill": { - "value": "{sds.color.primitive.gray.white.value}" - }, - "surface": { "value": "{sds.color.primitive.blue.200.value}" }, - "border": { "value": "{sds.color.primitive.blue.400.value}" }, - "icon": { "value": "{sds.color.primitive.blue.400.value}" } - }, - "negative": { - "fill": { "value": "{sds.color.primitive.red.400.value}" }, - "fill-hover": { "value": "{sds.color.primitive.red.500.value}" }, - "fill-pressed": { "value": "{sds.color.primitive.red.600.value}" }, - "fill-on-fill": { - "value": "{sds.color.primitive.gray.white.value}" - }, - "surface": { "value": "{sds.color.primitive.red.200.value}" }, - "border": { "value": "{sds.color.primitive.red.400.value}" }, - "icon": { "value": "{sds.color.primitive.red.400.value}" } - }, - "notice": { - "fill": { "value": "{sds.color.primitive.yellow.400.value}" }, - "fill-hover": { "value": "{sds.color.primitive.yellow.500.value}" }, - "fill-pressed": { - "value": "{sds.color.primitive.yellow.600.value}" - }, - "fill-on-fill": { - "value": "{sds.color.primitive.gray.white.value}" - }, - "surface": { "value": "{sds.color.primitive.yellow.200.value}" }, - "border": { "value": "{sds.color.primitive.yellow.400.value}" }, - "icon": { "value": "{sds.color.primitive.yellow.400.value}" } - }, - "positive": { - "fill": { "value": "{sds.color.primitive.green.400.value}" }, - "fill-hover": { "value": "{sds.color.primitive.green.500.value}" }, - "fill-pressed": { - "value": "{sds.color.primitive.green.600.value}" - }, - "fill-on-fill": { - "value": "{sds.color.primitive.gray.white.value}" - }, - "surface": { "value": "{sds.color.primitive.green.200.value}" }, - "border": { "value": "{sds.color.primitive.green.400.value}" }, - "icon": { "value": "{sds.color.primitive.green.400.value}" } - } - } - } - }, - "drop-shadows": { - "shadowL": { - "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)" - }, - "shadowM": { - "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)" - }, - "shadowS": { - "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)" - } - }, - "borders": { - "error": { - "400": { "value": "1px solid {sds.color.primitive.red.100.value}" } - }, - "gray": { - "100": { "value": "1px solid {sds.color.primitive.gray.100.value}" }, - "200": { "value": "1px solid {sds.color.primitive.gray.200.value}" }, - "300": { "value": "1px solid {sds.color.primitive.gray.300.value}" }, - "400": { "value": "1px solid {sds.color.primitive.gray.400.value}" }, - "500": { "value": "1px solid {sds.color.primitive.gray.500.value}" }, - "dashed": { "value": "2px dashed {sds.color.primitive.gray.400.value}" } - }, - "link": { - "dashed": { "value": "1px dashed" }, - "solid": { "value": "1px solid" } - }, - "primary": { - "300": { "value": "1px solid {sds.color.primitive.blue.300.value}" }, - "400": { "value": "1px solid {sds.color.primitive.blue.400.value}" }, - "500": { "value": "1px solid {sds.color.primitive.blue.500.value}" }, - "600": { "value": "1px solid {sds.color.primitive.blue.600.value}" }, - "dashed": { "value": "2px dashed {sds.color.primitive.blue.400.value}" } - }, - "success": { - "400": { "value": "1px solid {sds.color.primitive.green.100.value}" } - }, - "warning": { - "400": { "value": "1px solid {sds.color.primitive.yellow.100.value}" } - } - }, - "spaces": { - "default": { "value": "12px" }, - "xxxs": { "value": "2px" }, - "xxs": { "value": "4px" }, - "xs": { "value": "6px" }, - "s": { "value": "8px" }, - "m": { "value": "12px" }, - "l": { "value": "16px" }, - "xl": { "value": "24px" }, - "xxl": { "value": "40px" } - }, - "iconSizes": { - "input": { - "height": { - "value": "16px" - }, - "width": { - "value": "16px" - } - }, - "xs": { - "height": { "value": "12px" }, - "width": { "value": "12px" } - }, - "s": { - "height": { "value": "16px" }, - "width": { "value": "16px" } - }, - "l": { - "height": { "value": "24px" }, - "width": { "value": "24px" } - }, - "xl": { - "height": { "value": "32px" }, - "width": { "value": "32px" } - } - }, - "corners": { - "cornerL": { "value": "20px" }, - "cornerM": { "value": "4px" }, - "cornerS": { "value": "2px" }, - "cornerNone": { "value": "0px" } - } - } -} diff --git a/packages/components/src/core/Accordion/style.ts b/packages/components/src/core/Accordion/style.ts index 841b42fd4..ec2d2bcf2 100644 --- a/packages/components/src/core/Accordion/style.ts +++ b/packages/components/src/core/Accordion/style.ts @@ -32,7 +32,7 @@ export const StyledAccordion = styled(Accordion, { return css` &.MuiAccordion-root { box-shadow: ${shadows?.none}; - font-family: ${typography?.fontFamily}; + font-family: ${typography?.styles?.body?.s?.fontFamily}; border-bottom: ${useDivider ? border?.gray[300] : "none"}; height: fit-content; diff --git a/packages/components/src/core/Icon/style.ts b/packages/components/src/core/Icon/style.ts index 3ef10d2aa..3e2f70170 100644 --- a/packages/components/src/core/Icon/style.ts +++ b/packages/components/src/core/Icon/style.ts @@ -14,14 +14,12 @@ export interface IconExtraProps } export type SdsIconColorType = - | "beta" + | "purple" | "gray" - | "primary" - | "secondary" - | "info" - | "success" - | "warning" - | "error"; + | "blue" + | "green" + | "yellow" + | "red"; interface SdsIconWithColor { iconColor?: SdsIconColorType; @@ -58,7 +56,7 @@ function buttonStyle(): SerializedStyles { function staticStyle( props: StyledSvgIconProps ): SerializedStyles { - const { iconColor = "primary", shade = 400 } = props; + const { iconColor = "blue", shade = 400 } = props; const colors = getColors(props); return css` @@ -70,7 +68,7 @@ function interactive( props: StyledSvgIconProps ): SerializedStyles { const colors = getColors(props); - const { iconColor = "primary", shade = 400 } = props; + const { iconColor = "blue", shade = 400 } = props; return css` color: ${colors?.gray[500]}; diff --git a/packages/components/src/core/styles/common/defaultTheme.ts b/packages/components/src/core/styles/common/defaultTheme.ts index 707cf72d2..1d89387af 100644 --- a/packages/components/src/core/styles/common/defaultTheme.ts +++ b/packages/components/src/core/styles/common/defaultTheme.ts @@ -1,15 +1,14 @@ import { colors } from "@mui/material"; -import { - createTheme, - Theme, - ThemeOptions, - TypographyStyle, -} from "@mui/material/styles"; +import { createTheme } from "@mui/material/styles"; +import { AppTheme, SDSThemeOptions } from "./defaultThemeTypes"; const createThemeAdaptor = createTheme; const { common } = colors; +const fontFamilyCode = '"IBM Plex Mono", monospace'; +const tabularNums = "tabular-nums"; + enum FontWeight { bold = 700, light = 300, @@ -19,19 +18,13 @@ enum FontWeight { } const defaultThemeColors = { - beta: { - "100": "#F4F0F9", - "200": "#F0EBF6", - "400": "#7A41CE", - "500": "#703CBE", - "600": "#693BAC", - }, - error: { - "100": "#FEF2F2", - "200": "#FBE8E8", - "400": "#DC132C", - "500": "#C61128", - "600": "#B70016", + blue: { + "100": "#F5F9FF", + "200": "#E9F1FF", + "300": "#A6C9FF", + "400": "#0B68F8", + "500": "#0142A4", + "600": "#002660", }, gray: { "100": "#F8F8F8", @@ -41,32 +34,28 @@ const defaultThemeColors = { "500": "#767676", "600": "#545454", }, - info: { - "100": "#EFF2FC", - "200": "#EBEFFC", - "400": "#3867FA", - "500": "#2B52CD", - "600": "#223F9C", - }, - primary: { - "100": "#F8F9FE", - "200": "#EFF2FC", - "300": "#A9BDFC", - "400": "#3867FA", - "500": "#2B52CD", - "600": "#223F9C", - }, - secondary: { - "400": "#9BC74E", - }, - success: { + green: { "100": "#ECF5F0", "200": "#E6F7ED", "400": "#3CB371", "500": "#349A61", "600": "#1C7F48", }, - warning: { + purple: { + "100": "#F4F0F9", + "200": "#F0EBF6", + "400": "#7A41CE", + "500": "#703CBE", + "600": "#693BAC", + }, + red: { + "100": "#FEF2F2", + "200": "#FBE8E8", + "400": "#DC132C", + "500": "#C61128", + "600": "#B70016", + }, + yellow: { "100": "#FCF6EC", "200": "#FFF3E1", "400": "#F5A623", @@ -84,18 +73,16 @@ export const defaultAppTheme: AppTheme = { s: 2, }, fontWeights: { - bold: 700, - light: 300, - medium: 800, regular: 400, semibold: 600, }, iconSizes: { - input: { height: 16, width: 16 }, // for use with input icons only (radio and checkbox) - l: { height: 22, width: 22 }, - s: { height: 14, width: 14 }, + // for use with input icons only (radio and checkbox) + input: { height: 16, width: 16 }, + l: { height: 24, width: 24 }, + s: { height: 16, width: 16 }, xl: { height: 32, width: 32 }, - xs: { height: 10, width: 10 }, + xs: { height: 12, width: 12 }, }, shadows: { l: "0 2px 12px 0 rgba(0,0,0, 0.3)", @@ -104,137 +91,274 @@ export const defaultAppTheme: AppTheme = { s: "0 2px 4px 0 rgba(0,0,0, 0.25)", }, spacing: { - default: 10, - l: 14, - m: 10, + default: 12, + l: 16, + m: 12, s: 8, - xl: 22, + xl: 24, xs: 6, - xxl: 38, + xxl: 40, xxs: 4, xxxs: 2, }, typography: { - fontFamily: "Inter", styles: { body: { button: { + fontFamily: "Inter", fontSize: 13, - fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + fontWeight: FontWeight.regular, + letterSpacing: "0.08px", lineHeight: "20px", textTransform: "none", }, l: { + fontFamily: "Inter", fontSize: 18, fontWeight: FontWeight.regular, - letterSpacing: "0.3px", + letterSpacing: "0px", lineHeight: "28px", }, m: { + fontFamily: "Inter", fontSize: 16, fontWeight: FontWeight.regular, - letterSpacing: "0.3px", + letterSpacing: "0px", lineHeight: "26px", }, s: { + fontFamily: "Inter", fontSize: 14, fontWeight: FontWeight.regular, - letterSpacing: "0.3px", + letterSpacing: "0.08px", lineHeight: "24px", }, xs: { + fontFamily: "Inter", fontSize: 13, fontWeight: FontWeight.regular, - letterSpacing: "0.3px", + letterSpacing: "0.08px", lineHeight: "20px", }, xxs: { + fontFamily: "Inter", fontSize: 12, fontWeight: FontWeight.regular, - letterSpacing: "0.3px", + letterSpacing: "0.1px", lineHeight: "18px", }, xxxs: { + fontFamily: "Inter", fontSize: 11, fontWeight: FontWeight.regular, - letterSpacing: "0.3px", + letterSpacing: "0.1px", + lineHeight: "16px", + }, + }, + body2: { + button: { + fontFamily: "Inter", + fontSize: 13, + fontWeight: FontWeight.semibold, + letterSpacing: "0.08px", + lineHeight: "20px", + textTransform: "none", + }, + l: { + fontFamily: "Inter", + fontSize: 18, + fontWeight: FontWeight.semibold, + letterSpacing: "0px", + lineHeight: "28px", + }, + m: { + fontFamily: "Inter", + fontSize: 16, + fontWeight: FontWeight.semibold, + letterSpacing: "0px", + lineHeight: "26px", + }, + s: { + fontFamily: "Inter", + fontSize: 14, + fontWeight: FontWeight.semibold, + letterSpacing: "0.08px", + lineHeight: "24px", + }, + xs: { + fontFamily: "Inter", + fontSize: 13, + fontWeight: FontWeight.semibold, + letterSpacing: "0.08px", + lineHeight: "20px", + }, + xxs: { + fontFamily: "Inter", + fontSize: 12, + fontWeight: FontWeight.semibold, + letterSpacing: "0.1px", + lineHeight: "18px", + }, + xxxs: { + fontFamily: "Inter", + fontSize: 11, + fontWeight: FontWeight.semibold, + letterSpacing: "0.1px", lineHeight: "16px", }, }, caps: { xxs: { + fontFamily: "Inter", fontSize: 12, fontWeight: FontWeight.semibold, - letterSpacing: "1.0px", + letterSpacing: "0.5px", lineHeight: "18px", textTransform: "uppercase", }, xxxs: { + fontFamily: "Inter", fontSize: 11, fontWeight: FontWeight.semibold, - letterSpacing: "1.0px", + letterSpacing: "0.5px", lineHeight: "16px", textTransform: "uppercase", }, xxxxs: { + fontFamily: "Inter", fontSize: 10, fontWeight: FontWeight.semibold, - letterSpacing: "1.0px", + letterSpacing: "0.5px", lineHeight: "14px", textTransform: "uppercase", }, }, + code: { + s: { + fontFamily: fontFamilyCode, + fontSize: 14, + fontWeight: FontWeight.regular, + letterSpacing: "0px", + lineHeight: "24px", + }, + xs: { + fontFamily: fontFamilyCode, + fontSize: 13, + fontWeight: FontWeight.regular, + letterSpacing: "0px", + lineHeight: "20px", + }, + }, + code2: { + s: { + fontFamily: fontFamilyCode, + fontSize: 14, + fontWeight: FontWeight.semibold, + letterSpacing: "0px", + lineHeight: "24px", + }, + xs: { + fontFamily: fontFamilyCode, + fontSize: 13, + fontWeight: FontWeight.semibold, + letterSpacing: "0px", + lineHeight: "20px", + }, + }, header: { l: { + fontFamily: "Inter", fontSize: 18, fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + letterSpacing: "0px", lineHeight: "24px", }, m: { + fontFamily: "Inter", fontSize: 16, fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + letterSpacing: "0px", lineHeight: "22px", }, s: { + fontFamily: "Inter", fontSize: 14, fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + letterSpacing: "0.08px", lineHeight: "20px", }, xl: { + fontFamily: "Inter", fontSize: 22, fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + letterSpacing: "0px", lineHeight: "30px", }, xs: { + fontFamily: "Inter", fontSize: 13, fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + letterSpacing: "0.08px", lineHeight: "18px", }, xxl: { + fontFamily: "Inter", fontSize: 26, fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + letterSpacing: "0px", lineHeight: "34px", }, xxs: { + fontFamily: "Inter", fontSize: 12, fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + letterSpacing: "0.1px", lineHeight: "18px", }, xxxs: { + fontFamily: "Inter", fontSize: 11, fontWeight: FontWeight.semibold, - letterSpacing: "0.3px", + letterSpacing: "0.1px", lineHeight: "16px", }, }, + tabular: { + s: { + fontFamily: "Inter", + fontSize: 14, + fontVariantNumeric: tabularNums, + fontWeight: FontWeight.regular, + letterSpacing: "0px", + lineHeight: "24px", + }, + xs: { + fontFamily: "Inter", + fontSize: 13, + fontVariantNumeric: tabularNums, + fontWeight: FontWeight.regular, + letterSpacing: "0px", + lineHeight: "20px", + }, + }, + tabular2: { + s: { + fontFamily: "Inter", + fontSize: 14, + fontVariantNumeric: tabularNums, + fontWeight: FontWeight.semibold, + letterSpacing: "0px", + lineHeight: "24px", + }, + xs: { + fontFamily: "Inter", + fontSize: 13, + fontVariantNumeric: tabularNums, + fontWeight: FontWeight.semibold, + letterSpacing: "0px", + lineHeight: "20px", + }, + }, }, }, }; @@ -247,7 +371,7 @@ export const defaultAppTheme: AppTheme = { // override every theme property that makes use of colors. defaultAppTheme.borders = { error: { - "400": `1px solid ${defaultAppTheme.colors.error[400]}`, + "400": `1px solid ${defaultAppTheme.colors.red[400]}`, }, gray: { "100": `1px solid ${defaultAppTheme.colors.gray[100]}`, @@ -262,17 +386,17 @@ defaultAppTheme.borders = { solid: `1px solid`, }, primary: { - "300": `1px solid ${defaultAppTheme.colors.primary[300]}`, - "400": `1px solid ${defaultAppTheme.colors.primary[400]}`, - "500": `1px solid ${defaultAppTheme.colors.primary[500]}`, - "600": `1px solid${defaultAppTheme.colors.primary[600]}`, - dashed: `2px dashed ${defaultAppTheme.colors.primary[400]}`, + "300": `1px solid ${defaultAppTheme.colors.blue[300]}`, + "400": `1px solid ${defaultAppTheme.colors.blue[400]}`, + "500": `1px solid ${defaultAppTheme.colors.blue[500]}`, + "600": `1px solid${defaultAppTheme.colors.blue[600]}`, + dashed: `2px dashed ${defaultAppTheme.colors.blue[400]}`, }, success: { - "400": `1px solid ${defaultAppTheme.colors.success[400]}`, + "400": `1px solid ${defaultAppTheme.colors.green[400]}`, }, warning: { - "400": `1px solid ${defaultAppTheme.colors.warning[400]}`, + "400": `1px solid ${defaultAppTheme.colors.yellow[400]}`, }, }; @@ -303,9 +427,9 @@ export function makeThemeOptions(appTheme: AppTheme): SDSThemeOptions { }, divider: appTheme.colors.gray[200], error: { - dark: appTheme.colors.error[600], - light: appTheme.colors.error[200], - main: appTheme.colors.error[400], + dark: appTheme.colors.red[600], + light: appTheme.colors.red[200], + main: appTheme.colors.red[400], }, grey: { "100": appTheme.colors.gray[100], @@ -316,23 +440,23 @@ export function makeThemeOptions(appTheme: AppTheme): SDSThemeOptions { "600": appTheme.colors.gray[600], }, info: { - dark: appTheme.colors.info[600], - light: appTheme.colors.info[200], - main: appTheme.colors.info[400], + dark: appTheme.colors.blue[600], + light: appTheme.colors.blue[200], + main: appTheme.colors.blue[400], }, mode: "light", primary: { - dark: appTheme.colors.primary[600], - light: appTheme.colors.primary[300], - main: appTheme.colors.primary[400], + dark: appTheme.colors.blue[600], + light: appTheme.colors.blue[300], + main: appTheme.colors.blue[400], }, secondary: { - main: appTheme.colors.secondary[400], + main: appTheme.colors.green[400], }, success: { - dark: appTheme.colors.success[600], - light: appTheme.colors.success[200], - main: appTheme.colors.success[400], + dark: appTheme.colors.green[600], + light: appTheme.colors.green[200], + main: appTheme.colors.green[400], }, text: { disabled: appTheme.colors.gray[400], @@ -340,9 +464,9 @@ export function makeThemeOptions(appTheme: AppTheme): SDSThemeOptions { secondary: appTheme.colors.gray[500], }, warning: { - dark: appTheme.colors.warning[600], - light: appTheme.colors.warning[200], - main: appTheme.colors.warning[400], + dark: appTheme.colors.yellow[600], + light: appTheme.colors.yellow[200], + main: appTheme.colors.yellow[400], }, }, shadows: [ @@ -408,7 +532,7 @@ export function makeThemeOptions(appTheme: AppTheme): SDSThemeOptions { body2: appTheme.typography.styles.body.xxs, button: appTheme.typography.styles.body.button, caption: appTheme.typography.styles.body.xxxs, - fontFamily: `${appTheme.typography.fontFamily}, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif`, + fontFamily: `${appTheme.typography.styles.body.s.fontFamily}, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif`, h1: appTheme.typography.styles.header.xxl, h2: appTheme.typography.styles.header.xl, h3: appTheme.typography.styles.header.l, @@ -424,141 +548,4 @@ export function makeThemeOptions(appTheme: AppTheme): SDSThemeOptions { const defaultThemeOptions: SDSThemeOptions = makeThemeOptions(defaultAppTheme); -export interface SDSTheme extends Theme { - app?: AppTheme; -} - -export interface SDSThemeOptions extends ThemeOptions { - app?: AppTheme; -} - -interface AppTheme { - borders?: Borders; - colors: Colors; - corners: Corners; - fontWeights: FontWeights; - iconSizes: IconSizes; - shadows: Shadows; - spacing: Spacings; - typography: Typography; -} - -export interface Shadows { - none: "none"; - s: string; - m: string; - l: string; -} - -export interface Typography { - fontFamily: React.CSSProperties["fontFamily"]; - styles: { - header: { - xxl: TypographyStyle; - xl: TypographyStyle; - l: TypographyStyle; - m: TypographyStyle; - s: TypographyStyle; - xs: TypographyStyle; - xxs: TypographyStyle; - xxxs: TypographyStyle; - }; - body: { - button: TypographyStyle; - l: TypographyStyle; - m: TypographyStyle; - s: TypographyStyle; - xs: TypographyStyle; - xxs: TypographyStyle; - xxxs: TypographyStyle; - }; - caps: { - xxs: TypographyStyle; - xxxs: TypographyStyle; - xxxxs: TypographyStyle; - }; - }; -} - -export interface FontWeights { - bold: number; - light: number; - medium: number; - regular: number; - semibold: number; -} - -export interface Corners { - none: number; - s: number; - m: number; - l: number; -} - -export interface Spaces { - default: number; - xxxs: number; - xxs: number; - xs: number; - s: number; - m: number; - l: number; - xl: number; - xxl: number; -} -export type Spacings = Spaces; - -export interface Color { - 600?: string; - 500?: string; - 400: string; - 300?: string; - 200?: string; - 100?: string; -} - -export interface Colors { - beta: Color; - primary: Color; - secondary: Color; - gray: Color; - info: Color; - success: Color; - warning: Color; - error: Color; -} - -interface IconSize { - height: number; - width: number; -} - -export interface IconSizes { - xs: IconSize; - s: IconSize; - l: IconSize; - xl: IconSize; - input: IconSize; -} - -export interface Border { - 600?: string; - 500?: string; - 400?: string; - 300?: string; - 200?: string; - 100?: string; - dashed?: string; - solid?: string; -} - -export interface Borders { - error: Border; - gray: Border; - link: Border; - primary: Border; - success: Border; - warning: Border; -} - export const defaultTheme = createThemeAdaptor(defaultThemeOptions); diff --git a/packages/components/src/core/styles/common/defaultThemeTypes.ts b/packages/components/src/core/styles/common/defaultThemeTypes.ts new file mode 100644 index 000000000..5ceb902d8 --- /dev/null +++ b/packages/components/src/core/styles/common/defaultThemeTypes.ts @@ -0,0 +1,157 @@ +import { Theme, ThemeOptions, TypographyStyle } from "@mui/material/styles"; + +export interface SDSTheme extends Theme { + app?: AppTheme; +} + +export interface SDSThemeOptions extends ThemeOptions { + app?: AppTheme; +} + +export interface AppTheme { + borders?: Borders; + colors: Colors; + corners: Corners; + fontWeights: FontWeights; + iconSizes: IconSizes; + shadows: Shadows; + spacing: Spacings; + typography: Typography; +} + +export interface Shadows { + none: "none"; + s: string; + m: string; + l: string; +} + +export interface Typography { + styles: { + header: { + xxl: TypographyStyle; + xl: TypographyStyle; + l: TypographyStyle; + m: TypographyStyle; + s: TypographyStyle; + xs: TypographyStyle; + xxs: TypographyStyle; + xxxs: TypographyStyle; + }; + body: { + button: TypographyStyle; + l: TypographyStyle; + m: TypographyStyle; + s: TypographyStyle; + xs: TypographyStyle; + xxs: TypographyStyle; + xxxs: TypographyStyle; + }; + body2: { + button: TypographyStyle; + l: TypographyStyle; + m: TypographyStyle; + s: TypographyStyle; + xs: TypographyStyle; + xxs: TypographyStyle; + xxxs: TypographyStyle; + }; + caps: { + xxs: TypographyStyle; + xxxs: TypographyStyle; + xxxxs: TypographyStyle; + }; + code: { + s: TypographyStyle; + xs: TypographyStyle; + }; + code2: { + s: TypographyStyle; + xs: TypographyStyle; + }; + tabular: { + s: TypographyStyle; + xs: TypographyStyle; + }; + tabular2: { + s: TypographyStyle; + xs: TypographyStyle; + }; + }; +} + +export interface FontWeights { + regular: number; + semibold: number; +} + +export interface Corners { + none: number; + s: number; + m: number; + l: number; +} + +export interface Spaces { + default: number; + xxxs: number; + xxs: number; + xs: number; + s: number; + m: number; + l: number; + xl: number; + xxl: number; +} +export type Spacings = Spaces; + +export interface Color { + 600?: string; + 500?: string; + 400: string; + 300?: string; + 200?: string; + 100?: string; +} + +export interface Colors { + blue: Color; + gray: Color; + green: Color; + purple: Color; + red: Color; + yellow: Color; +} + +export interface IconSize { + height: number; + width: number; +} + +export interface IconSizes { + xs: IconSize; + s: IconSize; + l: IconSize; + xl: IconSize; + input: IconSize; +} + +export interface Border { + 600?: string; + 500?: string; + 400?: string; + 300?: string; + 200?: string; + 100?: string; + dashed?: string; + solid?: string; +} + +export interface Borders { + error: Border; + gray: Border; + link: Border; + primary: Border; + success: Border; + warning: Border; +} diff --git a/packages/components/src/core/styles/common/mixins/fonts.ts b/packages/components/src/core/styles/common/mixins/fonts.ts index b688dc599..310562076 100644 --- a/packages/components/src/core/styles/common/mixins/fonts.ts +++ b/packages/components/src/core/styles/common/mixins/fonts.ts @@ -1,8 +1,10 @@ import { css, SerializedStyles } from "@emotion/react"; import { TypographyStyle } from "@mui/material"; -import { Typography } from "../defaultTheme"; +import { Typography } from "../defaultThemeTypes"; import { CommonThemeProps, getTypography } from "../selectors/theme"; +// Font Body + type FontBodySize = keyof Typography["styles"]["body"]; export const fontBody = (fontSize: FontBodySize) => { @@ -26,6 +28,8 @@ export const fontBodyXs = fontBody("xs"); export const fontBodyXxs = fontBody("xxs"); export const fontBodyXxxs = fontBody("xxxs"); +// Font Caps + type FontCapsSize = keyof Typography["styles"]["caps"]; export const fontCaps = (fontSize: FontCapsSize) => { @@ -49,6 +53,8 @@ export const fontCapsXxs = fontCaps("xxs"); export const fontCapsXxxs = fontCaps("xxxs"); export const fontCapsXxxxs = fontCaps("xxxxs"); +// Font Header + type FontHeaderSize = keyof Typography["styles"]["header"]; export const fontHeader = (fontSize: FontHeaderSize) => { @@ -74,6 +80,53 @@ export const fontHeaderXs = fontHeader("xs"); export const fontHeaderXxs = fontHeader("xxs"); export const fontHeaderXxxs = fontHeader("xxxs"); +// Font Code + +type FontCodeSize = keyof Typography["styles"]["code"]; + +export const fontCode = (fontSize: FontCodeSize) => { + return (props: CommonThemeProps): SerializedStyles | null => { + const typography = getTypography(props); + + if (!typography) return null; + + const { + styles: { code }, + } = typography; + + return css` + ${themeToCss(code[fontSize])} + `; + }; +}; + +export const fontCodeXs = fontCode("xs"); +export const fontCodeS = fontCode("s"); + +// Font Tabular + +type FontTabularSize = keyof Typography["styles"]["tabular"]; + +export const fontTabular = (fontSize: FontTabularSize) => { + return (props: CommonThemeProps): SerializedStyles | null => { + const typography = getTypography(props); + + if (!typography) return null; + + const { + styles: { tabular }, + } = typography; + + return css` + ${themeToCss(tabular[fontSize])} + font-variant-numeric: "tabular-nums", + `; + }; +}; + +export const fontTabularXs = fontTabular("xs"); +export const fontTabularS = fontTabular("s"); + function themeToCss(fontTheme: TypographyStyle) { return css` font-size: ${fontTheme.fontSize}px; diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 33c3cac66..c8ba561df 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -8,7 +8,7 @@ "include": [ "./src/**/*", "jest.setup.ts", - "../../.eslintrc.js", + "../../.eslintrc.js" ], "exclude": [ "node_modules" diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/style.ts b/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/style.ts index dc66a13b1..187ac11ac 100644 --- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/style.ts +++ b/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/ControlPanel/style.ts @@ -25,7 +25,7 @@ export const StyledForm = styled("div")` `; export const StyledLabel = styled("span")` - font-family: "Open Sans", sans-serif; + font-family: "Inter", sans-serif; font-size: 12px; margin-bottom: 2px; line-height: 18px; diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/style.ts b/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/style.ts index 56f05f400..a049fc5f6 100644 --- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/style.ts +++ b/packages/data-viz/src/core/HeatmapChart/heatmapDemo/components/Header/style.ts @@ -16,6 +16,7 @@ export const StyledHeader = styled("div")` h3 { margin: 0; + line-height: 32px; } `; diff --git a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/style.ts b/packages/data-viz/src/core/HeatmapChart/heatmapDemo/style.ts index 2384104e9..e6cf89b8d 100644 --- a/packages/data-viz/src/core/HeatmapChart/heatmapDemo/style.ts +++ b/packages/data-viz/src/core/HeatmapChart/heatmapDemo/style.ts @@ -1,7 +1,7 @@ import { styled } from "@mui/material"; export const Container = styled("div")` - font-family: "Open Sans", sans-serif; + font-family: "Inter", sans-serif; display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 70px 1fr; diff --git a/tsconfig.json b/tsconfig.json index a5ca496a7..cba9e60ba 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -59,12 +59,12 @@ "skipLibCheck": true }, "include": [ - "./packages/*/src/**/*", + "./packages/**/src/**/*", ".eslintrc.js" ], "exclude": ["node_modules", "./packages/*/node_modules"], "references": [ - { "path": "./packages/components" }, - { "path": "./packages/data-viz" } + // { "path": "./packages/components" }, + // { "path": "./packages/data-viz" } ] }