Skip to content

Commit 52d9ab0

Browse files
castastrophecastastrophe
committed
feat: bug fixes for reducing theming variables
1 parent 4a5714a commit 52d9ab0

File tree

87 files changed

+2052
-2071
lines changed

Some content is hidden

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

87 files changed

+2052
-2071
lines changed

‎.storybook/assets/index.css

-16
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

+2
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

+25-10
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

+18-18
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

+12
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

+3-1
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

+4-6
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;
@@ -170,7 +167,7 @@
170167

171168
&:disabled,
172169
&.is-disabled {
173-
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
170+
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, transparent);
174171
--mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled));
175172
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color));
176173
}
@@ -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

+3-3
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,11 @@
9898
"--spectrum-action-button-edge-to-hold-icon-small",
9999
"--spectrum-actionbutton-background-color",
100100
"--spectrum-actionbutton-background-color-default",
101-
"--spectrum-actionbutton-background-color-disabled",
102101
"--spectrum-actionbutton-background-color-down",
103102
"--spectrum-actionbutton-background-color-focus",
104103
"--spectrum-actionbutton-background-color-hover",
105104
"--spectrum-actionbutton-background-color-selected",
105+
"--spectrum-actionbutton-background-color-selected-disabled",
106106
"--spectrum-actionbutton-background-color-selected-down",
107107
"--spectrum-actionbutton-background-color-selected-focus",
108108
"--spectrum-actionbutton-background-color-selected-hover",
@@ -165,7 +165,6 @@
165165
"--spectrum-component-height-50",
166166
"--spectrum-component-height-75",
167167
"--spectrum-corner-radius-100",
168-
"--spectrum-disabled-background-color",
169168
"--spectrum-disabled-border-color",
170169
"--spectrum-disabled-content-color",
171170
"--spectrum-disabled-static-black-border-color",
@@ -204,6 +203,7 @@
204203
"--spectrum-text-to-visual-300",
205204
"--spectrum-text-to-visual-50",
206205
"--spectrum-text-to-visual-75",
206+
"--spectrum-transparent-black-100",
207207
"--spectrum-transparent-black-400",
208208
"--spectrum-transparent-black-500",
209209
"--spectrum-transparent-black-600",
@@ -225,11 +225,11 @@
225225
],
226226
"system-theme": [
227227
"--system-action-button-background-color-default",
228-
"--system-action-button-background-color-disabled",
229228
"--system-action-button-background-color-down",
230229
"--system-action-button-background-color-focus",
231230
"--system-action-button-background-color-hover",
232231
"--system-action-button-background-color-selected",
232+
"--system-action-button-background-color-selected-disabled",
233233
"--system-action-button-background-color-selected-down",
234234
"--system-action-button-background-color-selected-focus",
235235
"--system-action-button-background-color-selected-hover",

‎components/actionbutton/themes/express.css

-1
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;

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

+1-1
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);

‎components/actionbutton/themes/spectrum.css

+1
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

‎components/actiongroup/index.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
z-index: 0;
7373

7474
&:first-child {
75-
/* Action button passthrough styling */
75+
/* @passthrough -- Action button styling */
7676
--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
7777

7878
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -81,15 +81,15 @@
8181
}
8282

8383
& + .spectrum-ActionGroup-item {
84-
/* Action button passthrough styling */
84+
/* @passthrough -- Action button styling */
8585
--mod-actionbutton-focus-indicator-border-radius: 0px;
8686

8787
margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
8888
margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
8989
}
9090

9191
&:last-child {
92-
/* Action button passthrough styling */
92+
/* @passthrough -- Action button styling */
9393
--mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
9494

9595
border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -124,7 +124,7 @@
124124
border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
125125

126126
&:first-child {
127-
/* Action button passthrough styling */
127+
/* @passthrough -- Action button styling */
128128
--mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
129129

130130
border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
@@ -142,7 +142,7 @@
142142
}
143143

144144
&:last-child {
145-
/* Action button passthrough styling */
145+
/* @passthrough -- Action button styling */
146146
--mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
147147

148148
border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));

‎components/avatar/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@
9898
opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
9999

100100
&.is-disabled {
101-
opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
101+
opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled));
102102
}
103103
}
104104

‎components/avatar/metadata/metadata.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,5 @@
5454
],
5555
"system-theme": [],
5656
"passthroughs": [],
57-
"high-contrast": [
58-
"--highcontrast-avatar-color-opacity-disabled",
59-
"--highcontrast-avatar-focus-indicator-color"
60-
]
57+
"high-contrast": ["--highcontrast-avatar-focus-indicator-color"]
6158
}

0 commit comments

Comments
 (0)