Skip to content

Commit a603d35

Browse files
castastrophecastastrophe
committed
feat: bug fixes for reducing theming variables
1 parent a6ce1d8 commit a603d35

File tree

103 files changed

+2125
-2137
lines changed

Some content is hidden

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

103 files changed

+2125
-2137
lines changed

‎.storybook/assets/index.css

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,6 @@ body {
2626
font-family: var(--spectrum-font-family);
2727
font-size: var(--spectrum-font-size);
2828
font-style: var(--spectrum-font-style);
29-
30-
color: var(--spectrum-neutral-content-color-default);
31-
background-color: var(--spectrum-background-layer-2-color);
3229
}
3330

3431
body:lang(ar) {
@@ -72,15 +69,9 @@ div.sb-bar > div > div > span:first-child {
7269
display: none;
7370
}
7471

75-
div.sb-bar > div > div > div > button {
76-
background-color: white !important;
77-
}
78-
7972
.docblock-argstable-body tr td {
8073
letter-spacing: unset;
8174
font-size: 11px;
82-
color: rgb(34, 34, 34);
83-
background-color: rgb(255, 255, 255);
8475
}
8576

8677
.docblock-argstable-body td > span:has(select),
@@ -128,11 +119,4 @@ select:focus,
128119
border-color: rgb(2, 101, 220) !important;
129120
box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
130121
}
131-
132-
nav.sidebar-container,
133-
div.sb-bar {
134-
color: var(--spectrum-neutral-content-color-default) !important;
135-
background-color: var(--spectrum-background-layer-2-color) !important;
136-
}
137-
138122
/* stylelint-enable selector-class-pattern */

‎.storybook/decorators/utilities.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,10 +331,12 @@ export const ArgGrid = ({
331331
export const Sizes = ({
332332
withHeading = true,
333333
withBorder = false,
334+
withWrapperBorder = true,
334335
...args
335336
} = {}, context = {}) => {
336337
return ArgGrid({
337338
withBorder,
339+
withWrapperBorder,
338340
heading: withHeading ? "Sizing" : undefined,
339341
argKey: "size",
340342
labels: {

‎.storybook/manager.js

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,54 @@ addons.setConfig({
1212
theme: create({
1313
base: "light",
1414

15-
brandTitle: "Spectrum CSS",
15+
brandTitle: "Adobe | Spectrum CSS",
1616
brandUrl: pkg.homepage ?? "https://opensource.adobe.com/spectrum-css",
1717
brandImage: logo,
18+
brandTarget: "_self",
1819

1920
typography: {
2021
fonts: {
21-
base: "adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
22+
base: "adobe-clean, \"Adobe Clean\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
2223
code: "\"Source Code Pro\", Monaco, monospace",
2324
}
2425
},
2526

27+
// colorPrimary: "#7326d3",
2628
colorSecondary: "rgb(2, 101, 220)",
2729

28-
// UI
29-
appBg:
30-
"rgb(255,255,255)" /* Being applied to the active state of radio buttons */,
31-
appContentBg: "rgb(255, 255, 255)" /* Being applied to the arg table */,
30+
/* Being applied to the active state of radio buttons */
31+
appBg: "rgb(255, 255, 255)",
32+
/* Being applied to the arg table */
33+
appContentBg: "rgb(255, 255, 255)",
34+
// appPreviewBg: "rgb(248, 248, 248)",
3235
appBorderColor: "rgb(213, 213, 213)",
3336
appBorderRadius: 4,
3437

35-
// Text colors
38+
/* Text colors */
39+
fontBase: "adobe-clean, \"Adobe Clean\", \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif",
40+
fontCode: "\"Source Code Pro\", Monaco, monospace",
3641
textColor: "rgb(34, 34, 34)",
42+
textInverseColor: "rgb(219, 219, 219)",
43+
textMutedColor: "rgb(175, 175, 175)",
3744

38-
// Toolbar default and active colors
45+
/* Toolbar default and active colors */
3946
barTextColor: "rgb(34, 34, 34)",
47+
barHoverColor: "rgb(2, 101, 220)",
4048
barSelectedColor: "rgb(2, 101, 220)",
41-
// barBg: 'rgb(248, 248, 248)',
49+
barBg: "rgb(255, 255, 255)",
4250

43-
// Form colors
51+
// buttonBg: "rgb(255, 255, 255)",
52+
// buttonBorder: "transparent",
53+
// booleanBg: "rgb(255, 255, 255)",
54+
// booleanSelectedBg: "rgb(213, 213, 213)",
55+
56+
/* Form colors */
4457
inputBg: "rgb(255, 255, 255)",
4558
inputBorder: "rgb(177, 177, 177)",
4659
inputTextColor: "rgb(34, 34, 34)",
4760
inputBorderRadius: 4,
61+
62+
// gridCellSize?: number;
4863
}),
4964
sidebar: {
5065
showRoots: false,

‎.storybook/modes/index.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,30 @@
1212
*/
1313

1414
const modes = {
15-
// "Context: Spectrum 2": {
16-
// scale: "medium",
17-
// color: "light",
18-
// textDirection: "ltr",
19-
// context: "spectrum",
20-
// },
15+
"Context: Spectrum 2": {
16+
scale: "medium",
17+
color: "light",
18+
textDirection: "ltr",
19+
context: "spectrum",
20+
},
2121
"Context: Spectrum 1": {
2222
scale: "medium",
2323
color: "light",
2424
textDirection: "ltr",
2525
context: "legacy",
2626
},
27-
// "Context: Express": {
28-
// scale: "medium",
29-
// color: "light",
30-
// textDirection: "ltr",
31-
// context: "express",
32-
// },
33-
// "Dark | RTL": {
34-
// scale: "medium",
35-
// color: "dark",
36-
// textDirection: "rtl",
37-
// context: "legacy",
38-
// },
27+
"Context: Express": {
28+
scale: "medium",
29+
color: "light",
30+
textDirection: "ltr",
31+
context: "express",
32+
},
33+
"Dark | RTL": {
34+
scale: "medium",
35+
color: "dark",
36+
textDirection: "rtl",
37+
context: "legacy",
38+
},
3939
};
4040

4141
export default modes;

‎.storybook/preview-head.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
<!-- Metadata -->
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4+
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
6+
<meta name="theme-color" content="#5258e4" />
7+
8+
<title>Adobe | Spectrum CSS</title>
9+
10+
<meta property="og:site_name" content="Adobe | Spectrum CSS" />
11+
<meta property="og:type" content="website" />
12+
113
<!-- This preconnect opens the connection for typekit to more quickly load fonts -->
214
<link rel="preconnect" href="https://use.typekit.net" crossorigin />
315

‎.storybook/preview.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@ export const parameters = {
8888
page: DocumentationTemplate,
8989
story: { inline: true },
9090
source: {
91-
type: "dynamic",
91+
dark: false,
92+
excludeDecorators: true,
93+
type: "auto",
9294
language: "html",
9395
},
9496
},

‎components/actionbutton/index.css

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,9 +82,6 @@
8282
}
8383

8484
&.spectrum-ActionButton--staticBlack {
85-
/* background color _not_ selected is coming from the system theme layer */
86-
--mod-actionbutton-background-color-disabled: transparent;
87-
8885
--mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800);
8986
--mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900);
9087
--mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900);
@@ -136,7 +133,7 @@
136133
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover));
137134
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down));
138135
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus));
139-
--mod-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
136+
--mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled);
140137

141138
--mod-actionbutton-border-color-default: transparent;
142139
--mod-actionbutton-border-color-hover: transparent;
@@ -248,7 +245,7 @@
248245

249246
position: relative;
250247

251-
min-inline-size: var(--mod-actionbutton-min-width, calc((var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-border-width)) * 2 + var(--spectrum-actionbutton-icon-size)));
248+
min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size)));
252249
block-size: var(--spectrum-actionbutton-height);
253250

254251
border-radius: var(--spectrum-actionbutton-border-radius);
@@ -294,6 +291,7 @@ a.spectrum-ActionButton {
294291
@extend %spectrum-AnchorButton;
295292
}
296293

294+
/* Nested sub-component: Icon */
297295
.spectrum-ActionButton-icon {
298296
@extend %spectrum-ButtonIcon;
299297

‎components/actionbutton/metadata/metadata.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@
103103
"--spectrum-actionbutton-background-color-focus",
104104
"--spectrum-actionbutton-background-color-hover",
105105
"--spectrum-actionbutton-background-color-selected",
106+
"--spectrum-actionbutton-background-color-selected-disabled",
106107
"--spectrum-actionbutton-background-color-selected-down",
107108
"--spectrum-actionbutton-background-color-selected-focus",
108109
"--spectrum-actionbutton-background-color-selected-hover",
@@ -165,7 +166,6 @@
165166
"--spectrum-component-height-50",
166167
"--spectrum-component-height-75",
167168
"--spectrum-corner-radius-100",
168-
"--spectrum-disabled-background-color",
169169
"--spectrum-disabled-border-color",
170170
"--spectrum-disabled-content-color",
171171
"--spectrum-disabled-static-black-border-color",
@@ -204,12 +204,15 @@
204204
"--spectrum-text-to-visual-300",
205205
"--spectrum-text-to-visual-50",
206206
"--spectrum-text-to-visual-75",
207+
"--spectrum-transparent-black-100",
208+
"--spectrum-transparent-black-200",
207209
"--spectrum-transparent-black-400",
208210
"--spectrum-transparent-black-500",
209211
"--spectrum-transparent-black-600",
210212
"--spectrum-transparent-black-700",
211213
"--spectrum-transparent-black-800",
212214
"--spectrum-transparent-black-900",
215+
"--spectrum-transparent-white-200",
213216
"--spectrum-transparent-white-400",
214217
"--spectrum-transparent-white-500",
215218
"--spectrum-transparent-white-600",
@@ -225,11 +228,11 @@
225228
],
226229
"system-theme": [
227230
"--system-action-button-background-color-default",
228-
"--system-action-button-background-color-disabled",
229231
"--system-action-button-background-color-down",
230232
"--system-action-button-background-color-focus",
231233
"--system-action-button-background-color-hover",
232234
"--system-action-button-background-color-selected",
235+
"--system-action-button-background-color-selected-disabled",
233236
"--system-action-button-background-color-selected-down",
234237
"--system-action-button-background-color-selected-focus",
235238
"--system-action-button-background-color-selected-hover",
@@ -244,9 +247,11 @@
244247
"--system-action-button-quiet-background-color-focus",
245248
"--system-action-button-quiet-background-color-hover",
246249
"--system-action-button-static-black-background-color-default",
250+
"--system-action-button-static-black-background-color-disabled",
247251
"--system-action-button-static-black-background-color-down",
248252
"--system-action-button-static-black-background-color-focus",
249253
"--system-action-button-static-black-background-color-hover",
254+
"--system-action-button-static-black-background-color-selected-disabled",
250255
"--system-action-button-static-black-border-color-default",
251256
"--system-action-button-static-black-border-color-down",
252257
"--system-action-button-static-black-border-color-focus",
@@ -256,9 +261,11 @@
256261
"--system-action-button-static-black-quiet-background-color-focus",
257262
"--system-action-button-static-black-quiet-background-color-hover",
258263
"--system-action-button-static-white-background-color-default",
264+
"--system-action-button-static-white-background-color-disabled",
259265
"--system-action-button-static-white-background-color-down",
260266
"--system-action-button-static-white-background-color-focus",
261267
"--system-action-button-static-white-background-color-hover",
268+
"--system-action-button-static-white-background-color-selected-disabled",
262269
"--system-action-button-static-white-border-color-default",
263270
"--system-action-button-static-white-border-color-down",
264271
"--system-action-button-static-white-border-color-focus",

‎components/actionbutton/themes/express.css

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300);
2222
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-400);
2323
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300);
24-
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
2524

2625
--spectrum-actionbutton-border-color-default: transparent;
2726
--spectrum-actionbutton-border-color-hover: transparent;
@@ -45,6 +44,8 @@
4544
}
4645

4746
&.spectrum-ActionButton--staticBlack {
47+
--spectrum-actionbutton-background-color-disabled: transparent;
48+
4849
&,
4950
&.spectrum-ActionButton--quiet {
5051
--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200);
@@ -55,6 +56,8 @@
5556
}
5657

5758
&.spectrum-ActionButton--staticWhite {
59+
--spectrum-actionbutton-background-color-disabled: transparent;
60+
5861
&,
5962
&.spectrum-ActionButton--quiet {
6063
--spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200);

‎components/actionbutton/themes/spectrum-two.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
1818
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
1919
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
20-
--spectrum-actionbutton-background-color-disabled: transparent;
20+
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
2121

2222
--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
2323
--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
@@ -45,6 +45,9 @@
4545
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
4646
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
4747

48+
--spectrum-actionbutton-background-color-disabled: transparent;
49+
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
50+
4851
&,
4952
&.spectrum-ActionButton--quiet {
5053
--spectrum-actionbutton-background-color-default: transparent;
@@ -60,6 +63,9 @@
6063
--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
6164
--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
6265

66+
--spectrum-actionbutton-background-color-disabled: transparent;
67+
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200);
68+
6369
&,
6470
&.spectrum-ActionButton--quiet {
6571
--spectrum-actionbutton-background-color-default: transparent;

‎components/actionbutton/themes/spectrum.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200);
2222
--spectrum-actionbutton-background-color-down: var(--spectrum-gray-300);
2323
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
24+
--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
2425

2526
--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75);
2627

0 commit comments

Comments
 (0)