Skip to content

Commit e3e37b4

Browse files
castastrophecastastrophe
committed
feat: bug fixes for reducing theming variables
1 parent c85d6cf commit e3e37b4

File tree

102 files changed

+2107
-2119
lines changed

Some content is hidden

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

102 files changed

+2107
-2119
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
@@ -333,10 +333,12 @@ export const ArgGrid = ({
333333
export const Sizes = ({
334334
withHeading = true,
335335
withBorder = false,
336+
withWrapperBorder = true,
336337
...args
337338
} = {}, context = {}) => {
338339
return ArgGrid({
339340
withBorder,
341+
withWrapperBorder,
340342
heading: withHeading ? "Sizing" : undefined,
341343
argKey: "size",
342344
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/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

‎components/actiongroup/index.css

Lines changed: 5 additions & 5 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 4 deletions
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)