Skip to content

Commit e049f77

Browse files
castastrophecastastrophe
committed
chore: remove token objects; pull into separate branch
1 parent 10012aa commit e049f77

Some content is hidden

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

75 files changed

+1190
-783
lines changed

‎.github/QUICK-START.md‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,17 +31,13 @@ To force the dark theme, you can add `color-scheme: dark` to your container elem
3131
</div>
3232
```
3333

34-
The design language also includes a set of token values that represent different device sizes. At the moment, these values are only defined as "medium" and "large", with "medium" as the default which maps generally to a desktop or laptop screen. The "large" value is intended for smaller devices, such as phones and tablets. The default value for all tokens is set to the default value for the medium scale. To force the large scale, you can update the cascading layers inheritance:
34+
The design language also includes a set of token values that represent different device sizes. At the moment, these values are only defined as "medium" and "large", with "medium" as the default which maps generally to a desktop or laptop screen. The "large" value is intended for smaller devices, such as phones and tablets. The default value for all tokens is set to the default value for the medium scale. To force the large scale, you can load the CSS overrides for the large scale:
3535

36-
```css
37-
@layers defaults, medium;
38-
39-
@media screen and (min-width: 768px) {
40-
@layers defaults, large;
41-
}
36+
```html
37+
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/css/mobile.css" />
4238
```
4339

44-
What's happening here is that the `defaults` layer is being overridden by the `large` layer when the screen size is greater than 768px. This means that all tokens that have a value for the `large` scale will be used instead of the default value. The most useful feature of this approach is that each application can make their own decision about which scale to leverage and at what screen size. This allows for a lot of flexibility in how the design language is applied to different applications.
40+
This will override the default value for all tokens to the value for the large scale.
4541

4642
Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
4743

@@ -50,7 +46,7 @@ Use the `index.css` files in your project to include component and global styles
5046
<!-- Include global tokens depedency first -->
5147
<link
5248
rel="stylesheet"
53-
href="node_modules/@spectrum-css/tokens/dist/index.css"
49+
href="node_modules/@spectrum-css/tokens/dist/css/index.css"
5450
/>
5551

5652
<!-- Include index.css for the components you're using -->
@@ -78,7 +74,7 @@ To put it all together, your final html file will look like this:
7874
<head>
7975
<link
8076
rel="stylesheet"
81-
href="node_modules/@spectrum-css/tokens/dist/index.css"
77+
href="node_modules/@spectrum-css/tokens/dist/css/index.css"
8278
/>
8379
<link
8480
rel="stylesheet"

‎.storybook/guides/converting-css-properties-to-tokens.mdx‎

Lines changed: 0 additions & 189 deletions
This file was deleted.

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Start by including the base set of variables:
6060

6161
```css
6262
/* Include tokens */
63-
@import "node_modules/@spectrum-css/tokens/dist/index.css";
63+
@import "node_modules/@spectrum-css/tokens/dist/css/index.css";
6464

6565
@import "node_modules/@spectrum-css/page/dist/index.css";
6666
@import "node_modules/@spectrum-css/typography/dist/index.css";

‎components/alertdialog/stories/alertdialog.stories.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,11 @@ export default {
6161
},
6262
parameters: {
6363
layout: "fullscreen",
64+
docs: {
65+
story: {
66+
height: "400px",
67+
},
68+
},
6469
actions: {
6570
handles: ["click .spectrum-AlertDialog button"],
6671
},
@@ -177,6 +182,11 @@ Overflow.args = {
177182
};
178183
Overflow.parameters = {
179184
chromatic: { disableSnapshot: true },
185+
docs: {
186+
story: {
187+
height: "550px",
188+
},
189+
},
180190
};
181191

182192
/**

‎components/assetcard/dist/metadata.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,10 @@
145145
"global": [
146146
"--spectrum-animation-duration-100",
147147
"--spectrum-assestcard-focus-indicator-color",
148+
"--spectrum-blue-1000",
149+
"--spectrum-blue-700",
150+
"--spectrum-blue-800",
151+
"--spectrum-blue-900",
148152
"--spectrum-body-cjk-font-style",
149153
"--spectrum-body-cjk-font-weight",
150154
"--spectrum-body-cjk-line-height",
@@ -161,6 +165,7 @@
161165
"--spectrum-gray-600",
162166
"--spectrum-gray-700",
163167
"--spectrum-gray-75",
168+
"--spectrum-gray-75-rgb",
164169
"--spectrum-gray-900",
165170
"--spectrum-heading-cjk-font-style",
166171
"--spectrum-heading-cjk-font-weight",

‎components/assetcard/index.css‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,18 @@
1313

1414
/* outer container, unstyled */
1515
.spectrum-AssetCard {
16-
--spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%);
16+
/** default light colors */
17+
--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
18+
--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
19+
--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
20+
--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900);
21+
--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
22+
1723
--spectrum-assetcard-background-color: var(--spectrum-gray-75);
18-
--spectrum-assetcard-selectionindicator-background-color-default: color-mix(in sRGB, var(--spectrum-gray-75) 90%, transparent);
19-
--spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);
2024

2125
/* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */
2226
--spectrum-assetcard-asset-size: 224px;
27+
--spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%);
2328
--spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100);
2429
--spectrum-assetcard-asset-container-border-size: 1px;
2530
--spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300);
@@ -40,6 +45,8 @@
4045
--spectrum-assetcard-selectionindicator-color: var(--spectrum-white);
4146
--spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight);
4247
--spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400);
48+
--spectrum-assetcard-selectionindicator-background-color-default: rgb(var(--spectrum-gray-75-rgb), 0.9);
49+
--spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300);
4350

4451
/* title */
4552
--spectrum-assetcard-title-text-color: var(--spectrum-gray-900);
@@ -376,3 +383,13 @@
376383
}
377384
}
378385
}
386+
387+
@media (prefers-color-scheme: dark) {
388+
.spectrum-AssetCard {
389+
--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
390+
--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
391+
--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
392+
--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
393+
--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
394+
}
395+
}

‎components/assetlist/dist/metadata.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,10 @@
7272
],
7373
"global": [
7474
"--spectrum-animation-duration-100",
75+
"--spectrum-blue-700",
76+
"--spectrum-blue-800",
77+
"--spectrum-blue-800-rgb",
78+
"--spectrum-blue-900-rgb",
7579
"--spectrum-font-size-100",
7680
"--spectrum-gray-100",
7781
"--spectrum-gray-200",

‎components/assetlist/index.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@
1212
*/
1313

1414
.spectrum-AssetList {
15+
/** default light colors */
16+
--spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2);
17+
--spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1);
18+
--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
19+
1520
--spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200);
1621
--spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100);
1722

@@ -46,6 +51,14 @@
4651
}
4752
}
4853

54+
@media (prefers-color-scheme: dark) {
55+
.spectrum-AssetList {
56+
--spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25);
57+
--spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15);
58+
--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
59+
}
60+
}
61+
4962
.spectrum-AssetList-item {
5063
position: relative;
5164
color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color)));

‎components/badge/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,12 @@
122122
--highcontrast-badge-border-color: CanvasText;
123123
}
124124

125+
@media (prefers-color-scheme: dark) {
126+
.spectrum-Badge {
127+
--spectrum-badge-label-icon-color: var(--spectrum-black);
128+
}
129+
}
130+
125131
/* text and icon color is black for these background colors */
126132
.spectrum-Badge--notice,
127133
.spectrum-Badge--orange,

‎components/breadcrumb/dist/metadata.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,8 +133,8 @@
133133
"--spectrum-corner-radius-small-default",
134134
"--spectrum-default-font-style",
135135
"--spectrum-disabled-content-color",
136-
"--spectrum-drop-zone-background-color",
137136
"--spectrum-drop-zone-background-color-opacity",
137+
"--spectrum-drop-zone-background-color-rgb",
138138
"--spectrum-extra-bold-font-weight",
139139
"--spectrum-focus-indicator-color",
140140
"--spectrum-focus-indicator-gap",

0 commit comments

Comments
 (0)