Skip to content

Commit ba48f87

Browse files
masoudmansonmasoudmanson
committed
Merge branch 'main' of https://github.com/chanzuckerberg/sci-components into prod
2 parents 0a57734 + 97ba7f5 commit ba48f87

File tree

55 files changed

+2834
-491
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2834
-491
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@
118118
"webpack": "^5.90.1"
119119
},
120120
"scripts": {
121-
"start": "storybook dev -p 6006 --no-open",
121+
"start": "NODE_OPTIONS=\"--max-old-space-size=8192\" && storybook dev -p 6006 --no-open",
122122
"build-storybook": "storybook build -o docs-build",
123123
"test-storybook": "test-storybook",
124124
"storybook:axe": "yarn build-storybook && yarn storybook:axeOnly",

‎packages/components/src/common/styles-dictionary/css/variables.css

+396-132
Large diffs are not rendered by default.

‎packages/components/src/common/styles-dictionary/design-tokens/colors.json

+28
Original file line numberDiff line numberDiff line change
@@ -106,18 +106,34 @@
106106
"value": "{sds.color.primitive.gray.300.value}",
107107
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
108108
},
109+
"border-disabled-inverse": {
110+
"value": "{sds.color.primitive.gray.600.value}",
111+
"darkValue": "{sds.color.primitive.gray.600.darkValue}"
112+
},
109113
"border-hover": {
110114
"value": "{sds.color.primitive.gray.900.value}",
111115
"darkValue": "{sds.color.primitive.gray.900.darkValue}"
112116
},
117+
"border-hover-inverse": {
118+
"value": "{sds.color.primitive.gray.50.value}",
119+
"darkValue": "{sds.color.primitive.gray.50.darkValue}"
120+
},
113121
"border-inverse": {
122+
"value": "{sds.color.primitive.gray.300.value}",
123+
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
124+
},
125+
"border-on-fill": {
114126
"value": "{sds.color.primitive.gray.50.value}",
115127
"darkValue": "{sds.color.primitive.gray.50.darkValue}"
116128
},
117129
"border-pressed": {
118130
"value": "{sds.color.primitive.gray.900.value}",
119131
"darkValue": "{sds.color.primitive.gray.900.darkValue}"
120132
},
133+
"border-pressed-inverse": {
134+
"value": "{sds.color.primitive.gray.50.value}",
135+
"darkValue": "{sds.color.primitive.gray.50.darkValue}"
136+
},
121137
"border-table": {
122138
"value": "{sds.color.primitive.gray.300.value}",
123139
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
@@ -158,6 +174,10 @@
158174
"value": "{sds.color.primitive.gray.300.value}",
159175
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
160176
},
177+
"ornament-disabled-inverse": {
178+
"value": "{sds.color.primitive.gray.600.value}",
179+
"darkValue": "{sds.color.primitive.gray.600.darkValue}"
180+
},
161181
"ornament-on-fill": {
162182
"value": "{sds.color.primitive.gray.50.value}",
163183
"darkValue": "{sds.color.primitive.gray.50.darkValue}"
@@ -174,6 +194,10 @@
174194
"value": "{sds.color.primitive.gray.600.value}",
175195
"darkValue": "{sds.color.primitive.gray.600.darkValue}"
176196
},
197+
"ornament-secondary-inverse": {
198+
"value": "{sds.color.primitive.gray.300.value}",
199+
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
200+
},
177201
"ornament-secondary-hover": {
178202
"value": "{sds.color.primitive.gray.900.value}",
179203
"darkValue": "{sds.color.primitive.gray.900.darkValue}"
@@ -194,6 +218,10 @@
194218
"value": "{sds.color.primitive.gray.300.value}",
195219
"darkValue": "{sds.color.primitive.gray.300.darkValue}"
196220
},
221+
"text-disabled-inverse": {
222+
"value": "{sds.color.primitive.gray.600.value}",
223+
"darkValue": "{sds.color.primitive.gray.600.darkValue}"
224+
},
197225
"text-primary": {
198226
"value": "{sds.color.primitive.gray.900.value}",
199227
"darkValue": "{sds.color.primitive.gray.900.darkValue}"

‎packages/components/src/common/styles-dictionary/json/tailwind.json

+16-2
Original file line numberDiff line numberDiff line change
@@ -1165,9 +1165,13 @@
11651165
"sds-color-semantic-base-background-tertiary": "#494949",
11661166
"sds-color-semantic-base-border": "#cdcdcd",
11671167
"sds-color-semantic-base-border-disabled": "#696969",
1168+
"sds-color-semantic-base-border-disabled-inverse": "#cdcdcd",
11681169
"sds-color-semantic-base-border-hover": "#ffffff",
1169-
"sds-color-semantic-base-border-inverse": "#000000",
1170+
"sds-color-semantic-base-border-hover-inverse": "#000000",
1171+
"sds-color-semantic-base-border-inverse": "#696969",
1172+
"sds-color-semantic-base-border-on-fill": "#000000",
11701173
"sds-color-semantic-base-border-pressed": "#ffffff",
1174+
"sds-color-semantic-base-border-pressed-inverse": "#000000",
11711175
"sds-color-semantic-base-border-table": "#696969",
11721176
"sds-color-semantic-base-divider": "#494949",
11731177
"sds-color-semantic-base-divider-inverse": "#cdcdcd",
@@ -1178,15 +1182,18 @@
11781182
"sds-color-semantic-base-fill-primary": "#000000",
11791183
"sds-color-semantic-base-fill-selected": "#ffffff",
11801184
"sds-color-semantic-base-ornament-disabled": "#696969",
1185+
"sds-color-semantic-base-ornament-disabled-inverse": "#cdcdcd",
11811186
"sds-color-semantic-base-ornament-on-fill": "#000000",
11821187
"sds-color-semantic-base-ornament-primary": "#ffffff",
11831188
"sds-color-semantic-base-ornament-primary-inverse": "#000000",
11841189
"sds-color-semantic-base-ornament-secondary": "#cdcdcd",
1190+
"sds-color-semantic-base-ornament-secondary-inverse": "#696969",
11851191
"sds-color-semantic-base-ornament-secondary-hover": "#ffffff",
11861192
"sds-color-semantic-base-ornament-secondary-pressed": "#ffffff",
11871193
"sds-color-semantic-base-surface": "#000000",
11881194
"sds-color-semantic-base-surface-inverse": "#ffffff",
11891195
"sds-color-semantic-base-text-disabled": "#696969",
1196+
"sds-color-semantic-base-text-disabled-inverse": "#cdcdcd",
11901197
"sds-color-semantic-base-text-primary": "#ffffff",
11911198
"sds-color-semantic-base-text-primary-inverse": "#000000",
11921199
"sds-color-semantic-base-text-secondary": "#cdcdcd",
@@ -1327,9 +1334,13 @@
13271334
"sds-color-semantic-base-background-tertiary": "#dfdfdf",
13281335
"sds-color-semantic-base-border": "#6c6c6c",
13291336
"sds-color-semantic-base-border-disabled": "#c3c3c3",
1337+
"sds-color-semantic-base-border-disabled-inverse": "#6c6c6c",
13301338
"sds-color-semantic-base-border-hover": "#000000",
1331-
"sds-color-semantic-base-border-inverse": "#ffffff",
1339+
"sds-color-semantic-base-border-hover-inverse": "#ffffff",
1340+
"sds-color-semantic-base-border-inverse": "#c3c3c3",
1341+
"sds-color-semantic-base-border-on-fill": "#ffffff",
13321342
"sds-color-semantic-base-border-pressed": "#000000",
1343+
"sds-color-semantic-base-border-pressed-inverse": "#ffffff",
13331344
"sds-color-semantic-base-border-table": "#c3c3c3",
13341345
"sds-color-semantic-base-divider": "#dfdfdf",
13351346
"sds-color-semantic-base-divider-inverse": "#6c6c6c",
@@ -1340,15 +1351,18 @@
13401351
"sds-color-semantic-base-fill-primary": "#ffffff",
13411352
"sds-color-semantic-base-fill-selected": "#000000",
13421353
"sds-color-semantic-base-ornament-disabled": "#c3c3c3",
1354+
"sds-color-semantic-base-ornament-disabled-inverse": "#6c6c6c",
13431355
"sds-color-semantic-base-ornament-on-fill": "#ffffff",
13441356
"sds-color-semantic-base-ornament-primary": "#000000",
13451357
"sds-color-semantic-base-ornament-primary-inverse": "#ffffff",
13461358
"sds-color-semantic-base-ornament-secondary": "#6c6c6c",
1359+
"sds-color-semantic-base-ornament-secondary-inverse": "#c3c3c3",
13471360
"sds-color-semantic-base-ornament-secondary-hover": "#000000",
13481361
"sds-color-semantic-base-ornament-secondary-pressed": "#000000",
13491362
"sds-color-semantic-base-surface": "#ffffff",
13501363
"sds-color-semantic-base-surface-inverse": "#000000",
13511364
"sds-color-semantic-base-text-disabled": "#c3c3c3",
1365+
"sds-color-semantic-base-text-disabled-inverse": "#6c6c6c",
13521366
"sds-color-semantic-base-text-primary": "#000000",
13531367
"sds-color-semantic-base-text-primary-inverse": "#ffffff",
13541368
"sds-color-semantic-base-text-secondary": "#6c6c6c",

‎packages/components/src/common/styles-dictionary/scss/_variables.scss

+16-2
Original file line numberDiff line numberDiff line change
@@ -191,12 +191,20 @@ $sds-color-semantic-base-border: #6c6c6c;
191191
$sds-color-semantic-base-border-dark: #cdcdcd;
192192
$sds-color-semantic-base-border-disabled: #c3c3c3;
193193
$sds-color-semantic-base-border-disabled-dark: #696969;
194+
$sds-color-semantic-base-border-disabled-inverse: #6c6c6c;
195+
$sds-color-semantic-base-border-disabled-inverse-dark: #cdcdcd;
194196
$sds-color-semantic-base-border-hover: #000000;
195197
$sds-color-semantic-base-border-hover-dark: #ffffff;
196-
$sds-color-semantic-base-border-inverse: #ffffff;
197-
$sds-color-semantic-base-border-inverse-dark: #000000;
198+
$sds-color-semantic-base-border-hover-inverse: #ffffff;
199+
$sds-color-semantic-base-border-hover-inverse-dark: #000000;
200+
$sds-color-semantic-base-border-inverse: #c3c3c3;
201+
$sds-color-semantic-base-border-inverse-dark: #696969;
202+
$sds-color-semantic-base-border-on-fill: #ffffff;
203+
$sds-color-semantic-base-border-on-fill-dark: #000000;
198204
$sds-color-semantic-base-border-pressed: #000000;
199205
$sds-color-semantic-base-border-pressed-dark: #ffffff;
206+
$sds-color-semantic-base-border-pressed-inverse: #ffffff;
207+
$sds-color-semantic-base-border-pressed-inverse-dark: #000000;
200208
$sds-color-semantic-base-border-table: #c3c3c3;
201209
$sds-color-semantic-base-border-table-dark: #696969;
202210
$sds-color-semantic-base-divider: #dfdfdf;
@@ -217,6 +225,8 @@ $sds-color-semantic-base-fill-selected: #000000;
217225
$sds-color-semantic-base-fill-selected-dark: #ffffff;
218226
$sds-color-semantic-base-ornament-disabled: #c3c3c3;
219227
$sds-color-semantic-base-ornament-disabled-dark: #696969;
228+
$sds-color-semantic-base-ornament-disabled-inverse: #6c6c6c;
229+
$sds-color-semantic-base-ornament-disabled-inverse-dark: #cdcdcd;
220230
$sds-color-semantic-base-ornament-on-fill: #ffffff;
221231
$sds-color-semantic-base-ornament-on-fill-dark: #000000;
222232
$sds-color-semantic-base-ornament-primary: #000000;
@@ -225,6 +235,8 @@ $sds-color-semantic-base-ornament-primary-inverse: #ffffff;
225235
$sds-color-semantic-base-ornament-primary-inverse-dark: #000000;
226236
$sds-color-semantic-base-ornament-secondary: #6c6c6c;
227237
$sds-color-semantic-base-ornament-secondary-dark: #cdcdcd;
238+
$sds-color-semantic-base-ornament-secondary-inverse: #c3c3c3;
239+
$sds-color-semantic-base-ornament-secondary-inverse-dark: #696969;
228240
$sds-color-semantic-base-ornament-secondary-hover: #000000;
229241
$sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff;
230242
$sds-color-semantic-base-ornament-secondary-pressed: #000000;
@@ -235,6 +247,8 @@ $sds-color-semantic-base-surface-inverse: #000000;
235247
$sds-color-semantic-base-surface-inverse-dark: #ffffff;
236248
$sds-color-semantic-base-text-disabled: #c3c3c3;
237249
$sds-color-semantic-base-text-disabled-dark: #696969;
250+
$sds-color-semantic-base-text-disabled-inverse: #6c6c6c;
251+
$sds-color-semantic-base-text-disabled-inverse-dark: #cdcdcd;
238252
$sds-color-semantic-base-text-primary: #000000;
239253
$sds-color-semantic-base-text-primary-dark: #ffffff;
240254
$sds-color-semantic-base-text-primary-inverse: #ffffff;

‎packages/components/src/common/warnings.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export enum SDSWarningTypes {
22
ButtonMinimalIsAllCaps = "buttonMinimalIsAllCaps",
33
ButtonMissingSDSProps = "buttonMissingProps",
44
ButtonIconMissingIconProp = "buttonIconMissingIconProp",
5+
ButtonDropdownMinimal = "buttonDropdownMinimal",
56
ButtonToggleMissingIconProp = "buttonToggleMissingIconProp",
67
ChipDeprecated = "chipDeprecated",
78
MenuSelectDeprecated = "menuSelectDeprecated",
@@ -14,7 +15,7 @@ export const SDS_WARNINGS = {
1415
[SDSWarningTypes.ButtonMinimalIsAllCaps]: {
1516
hasWarned: false,
1617
message:
17-
"Warning: isAllCaps is only applied to buttons with sdsStyle='minimal'.",
18+
"Warning: isAllCaps can not be applied to buttons with sdsStyle='icon'.",
1819
},
1920
[SDSWarningTypes.ButtonMissingSDSProps]: {
2021
hasWarned: false,
@@ -26,6 +27,10 @@ export const SDS_WARNINGS = {
2627
message:
2728
"Warning: Buttons with an SDS type of icon require an icon prop to be provided.",
2829
},
30+
[SDSWarningTypes.ButtonDropdownMinimal]: {
31+
hasWarned: false,
32+
message: "Warning: Button Dropdowns can not be of type minimal!",
33+
},
2934
[SDSWarningTypes.ButtonToggleMissingIconProp]: {
3035
hasWarned: false,
3136
message: "Warning: Button Toggles require an icon prop to be provided.",

0 commit comments

Comments
 (0)