Skip to content

feat: add core tokens #1429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GarthDB merged 48 commits into from
Jun 16, 2022
Merged

feat: add core tokens #1429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
d0a07a1
feat: add core tokens
lazd May 17, 2022
774d09e
feat!: implement ActionButton core tokens (#1430)
lazd May 17, 2022
4612de3
feat: start on postcss-containerizer
lazd May 23, 2022
5b448aa
test: add multisystem tests
lazd May 23, 2022
67ef883
refactor: rename, comment
lazd May 24, 2022
535126b
feat: add simple component builder
lazd May 24, 2022
3f7ad33
feat: don't support nested selectors, it's not your job!
lazd May 24, 2022
27fc9a4
fix: correct order of compliation, don't complain about --system
lazd May 24, 2022
e5a66e4
feat: add support for switching on --system
lazd May 24, 2022
c7b230c
refactor: use containers for ActionButton
lazd May 24, 2022
382e196
feat: remove logical fallbacks from simple builder
lazd May 24, 2022
7404880
feat: drop support for IE in AutoPrefixer config, remove useless plugin
lazd May 24, 2022
1dd03fb
feat: drop even more unused plugins
lazd May 24, 2022
b1471d9
feat: check that all defined tokens are used
lazd May 24, 2022
cae6252
feat: define --system for completeness, don't ignore usage in builder
lazd May 24, 2022
e847e7c
style: cleanup
lazd May 24, 2022
ec42ed8
refactor: dump output near input instead of at the end of file
lazd May 24, 2022
b9f783e
test: make sure separate blocks for the same system work
lazd May 24, 2022
454a35a
docs: add README
lazd May 24, 2022
206f543
feat: first crack at splitinator
lazd May 25, 2022
a2c63f9
feat: kill the containerizer, we don't need it anymore
lazd May 25, 2022
78bb6a2
feat: make options.getName an option, add docs
lazd May 25, 2022
bd87035
docs: style
lazd May 25, 2022
9fc6477
fix: name things right
lazd May 25, 2022
227ef5c
fix: make sure everything is lowercase, correctly handle overrides
lazd May 25, 2022
57467aa
fix: correct check if all defined variables are used
lazd May 25, 2022
a049918
Merge branch 'lazd/CSS-143-containerizer' into lazd/CSS-143-splitinator
lazd May 25, 2022
6c7a28f
feat: wip support where
lazd May 25, 2022
f97cd97
test: fix tests
lazd May 25, 2022
3a817bc
feat: split things out, combine things
lazd May 25, 2022
8238e09
docs: add docs for new options
lazd May 25, 2022
413fd40
docs: correct example
lazd May 27, 2022
9a9b644
docs: fix readme example
lazd May 27, 2022
1a36f68
fix: set path correct when concating things
lazd May 27, 2022
f16efdf
chore: release @spectrum-css/actionbutton@2.0.0-beta.1
GarthDB May 27, 2022
f314054
chore: release @spectrum-css/actionbutton@2.0.0-beta.2
GarthDB May 27, 2022
ed486f9
chore: release @spectrum-css/tokens@1.0.0-beta.1
GarthDB May 27, 2022
783fcf9
build: add publish config so lerna doesn't explode
lazd May 27, 2022
b94194f
Merge branch 'lazd/CSS-143-splitinator' of github.com:adobe/spectrum-…
GarthDB May 27, 2022
f603e16
feat: add core tokens
lazd May 17, 2022
e6337d6
feat!: implement ActionButton core tokens (#1430)
lazd May 17, 2022
15e33cf
chore: update version for beta release
GarthDB May 17, 2022
86d7fb3
feat: prefer separate custom-* files for overrides
pfulton Jun 10, 2022
640361d
chore: release updated tokens and actionbutton beta
pfulton Jun 10, 2022
b7a993b
refactor: prefer `--mod-` over `--custom-` for public API
pfulton Jun 15, 2022
159c285
Merge branch 'lazd/CSS-143-splitinator' into lazd/CSS-75-core-tokens-pre
pfulton Jun 16, 2022
ec8345a
fix: tweaks after merging in component-builder-simple
pfulton Jun 16, 2022
fc3af46
fix: removed theme styling from index.css
GarthDB Jun 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ If you're targeting modern browsers, start by including the base set of variable
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-dark.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/vars/dist/spectrum-darkest.css">

<!-- Include tokens -->
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css">

<!-- Include index-vars.css for all components you need -->
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/typography/dist/index-vars.css">
Expand All @@ -72,13 +75,28 @@ Then, make sure you've included the relevant classes to choose which scale and c
<html class="spectrum spectrum--medium spectrum--light">
```

**Note:** If you are importing SVG icon sprite sheets, the `.spectrum--medium`/`.spectrum--large` classes should be added to the `<html>` element so UI icons render in the correct size in IE 11. For browsers that support custom properties, or if you're not using SVG sprite sheets for UI icons and are manually managing icon sizing in your implementation, `.spectrum--medium`/`.spectrum--large` can be added to the `<body>` or other element.
To switch to Express, load vars from `@spectrum-css/expressvars` instead of `@spectrum-css/vars` and add the `.spectrum--express` class to the `<html>` element:

```html
<html class="spectrum spectrum--medium spectrum--light spectrum--express">
<head>
<!-- Include only the scales your application needs -->
<link rel="stylesheet" href="node_modules/@spectrum-css/expressvars/dist/spectrum-medium.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/expressvars/dist/spectrum-large.css">

<!-- Include only the colorstops your application needs -->
<link rel="stylesheet" href="node_modules/@spectrum-css/expressvars/dist/spectrum-light.css">
<link rel="stylesheet" href="node_modules/@spectrum-css/expressvars/dist/spectrum-dark.css">
</head>
```

Then you can use components by copy/pasting their code from [the documentation](http://opensource.adobe.com/spectrum-css/).

With the magic of CSS custom properties, you can infinitely nest different color stops and themes, [as illustrated here](https://codepen.io/lazd/pen/axXMRL).

Additionally, you can override variables and customize Spectrum CSS' look and feel by re-defining the custom properties in context, [like so](https://codepen.io/lazd/pen/ROvOPO). See the source in `components/*/index-vars.css` to determine which custom properties you can override.
### Modifying components

You can override variables and modify Spectrum CSS' look and feel by re-defining the custom properties in context. Look for the **Custom Property API** section in each component to determine which custom properties you can override. See [ActionButton for a complete example](https://opensource.adobe.com/spectrum-css/actionbutton.html#modified).

### Importing UI icons

Expand Down
Loading