Skip to content

Commit

Permalink
feat(designtokens): separate design tokens in smaller files and fix t…
Browse files Browse the repository at this point in the history
…ailwinds formatter
  • Loading branch information
masoudmanson committed Feb 16, 2024
1 parent bb86978 commit 00df2a2
Show file tree
Hide file tree
Showing 24 changed files with 1,243 additions and 1,023 deletions.
File renamed without changes.
12 changes: 6 additions & 6 deletions .storybook/components/StatusTag/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,25 @@ const TypeToColor: Record<StatusType, string> = {
wip: "#D8921F",
};

const TypeToBackGroundColor: Record<StatusType, string> = {
beta: "#F4F0F9",
deprecated: "#FEF2F2",
wip: "#FCF6EC",
const TypeToBorderColor: Record<StatusType, string> = {
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;
padding: 1px 4px;
font-size: 10px;
font-weight: 600;
color: ${color};
border: solid 1px transparent;
background-color: ${TypeToBackGroundColor[type]};
border: solid 1px ${borderColor};
border-radius: 2px;
`;
}}
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/common/helpers/scrollStop.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const useScrollStopListener = (callback: () => void, timeout = 50) => {
}
}, timeout);
return () => destroyListener();
}, []);
}, [timeout]);
};

export default useScrollStopListener;
2 changes: 1 addition & 1 deletion packages/components/src/common/styles-dictionary/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,5 @@ module.exports = {
transformGroup: "scss",
},
},
source: ["src/common/styles-dictionary/*.json"],
source: ["src/common/styles-dictionary/design-tokens/*.json"],
};
208 changes: 104 additions & 104 deletions packages/components/src/common/styles-dictionary/css/variables.css
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
Original file line number Diff line number Diff line change
@@ -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}" }
}
}
}
}
Loading

0 comments on commit 00df2a2

Please sign in to comment.