Skip to content

Commit 3d5a609

Browse files
castastrophecastastrophe
committed
chore: remove token objects; pull into separate branch
1 parent 690e07a commit 3d5a609

File tree

161 files changed

+2719
-14610
lines changed

Some content is hidden

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

161 files changed

+2719
-14610
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";

0 commit comments

Comments
 (0)