Skip to content
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

Improve modeSelectors docs #102

Merged
merged 3 commits into from
Sep 5, 2023
Merged

Improve modeSelectors docs #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
204db0a
Improve modeSelectors docs
drwpow Sep 5, 2023
bb5d418
Fix ligatures in code
drwpow Sep 5, 2023
bffd3c5
Stop hosting free fonts
drwpow Sep 5, 2023
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
Binary file added docs/public/fonts/redhatmono-v10-300-italic-latin-ext.woff2
View file
Open in desktop
Binary file not shown.
Binary file added docs/public/fonts/redhatmono-v10-300-italic-latin.woff2
View file
Open in desktop
Binary file not shown.
Binary file added docs/public/fonts/redhatmono-v10-300-normal-latin-ext.woff2
View file
Open in desktop
Binary file not shown.
Binary file added docs/public/fonts/redhatmono-v10-300-normal-latin.woff2
View file
Open in desktop
Binary file not shown.
52 changes: 21 additions & 31 deletions docs/src/pages/docs/plugins/css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,9 +132,7 @@ In some scenarios this is preferable, but in others, this may result in too many

#### Example

To generate CSS for Modes, add a `modeSelectors: []` array to your config, and specify `mode: [selector1, selector2, …]`.

All mode names must start with the `#` character. You can also optionally filter to a token group by adding part or all of a group name before the `#`. For example, if your `color.*` tokens had `light` and `dark` mode you wanted to generate CSS for, as well as `transition.*` tokens with `reduced` modes, you could add the following selectors:
To generate CSS for Modes, add a `modeSelectors` array to your config that specifies the **mode** you’d like to target and which **CSS selectors** should activate those modes (can either be one or multiple). You may optionally also decide to include or exclude certain tokens (e.g. `color.*` will only target the tokens that begin with `color.`).

```js
// tokens.config.mjs
Expand All @@ -149,13 +147,13 @@ export default {
modeSelectors: [
{
mode: 'light', // match all tokens with $extensions.mode.light
selectors: ['@media (prefers-color-scheme: light)', 'body[data-color-mode="light"]'], // the following CSS selectors trigger the mode swap
tokens: ['color.*'], // (optional) limit to specific tokens, if desired (default: all tokens that use `mode` will be included)
selectors: ['@media (prefers-color-scheme: light)', '[data-color-mode="light"]'], // the following CSS selectors trigger the mode swap
tokens: ['color.*'], // (optional) limit to specific tokens, if desired (by default any tokens with this mode will be included)
},
{
mode: 'dark',
selectors: ['@media (prefers-color-scheme: dark)', 'body[data-color-mode="dark"]'],
tokens: 'color.*',
selectors: ['@media (prefers-color-scheme: dark)', '[data-color-mode="dark"]'],
tokens: ['color.*'],
},
{
mode: 'reduced',
Expand All @@ -171,40 +169,40 @@ This would generate the following CSS:

```css
:root {
/* all tokens (defaults) */
/* all default token values (ignoring modes) */
}

@media (prefers-color-scheme: light) {
:root {
/* light mdoe palette */
/* all `light` mode values for color.* tokens */
}
}

body[data-color-mode='light'] {
/* light mode palette */
[data-color-mode='light'] {
/* (same) */
}

/* dark theme colors */
@media (prefers-color-scheme: dark) {
:root {
/* dark mode palette */
/* all `dark` mode values for color.* tokens */
}
}

body[data-color-mode='dark'] {
/* dark mode palette */
[data-color-mode='dark'] {
/* (same) */
}

@media (prefers-reduced-motion) {
:root {
/* reduced motion transitions */
/* all `reduced` mode values for any token */
}
}
```

By default you get automatic inference from the `@media` selectors. But as a fallback, you could also manually set `<body data-color-mode="[mode]">` to override the default (e.g. to respect user preference).
In our example the `@media` selectors would automatically pick up whether a user’s OS is in light or dark mode. But as a fallback, you could also manually set `data-color-mode="[mode]"` on any element override the default (e.g. for user preferences, or even previewing one theme in the context of another).

But more than just classes can be used (that’s why it’s called `modeSelectors` and not `modeClasses`)! You could also generate CSS if your `type.size` group had `desktop` and `mobile` sizes:
Further, any valid CSS selector can be used (that’s why it’s called `modeSelectors` and not `modeClasses`)! You could also generate CSS if your `typography.size` group had `desktop` and `mobile` sizes:

```js
// tokens.config.mjs
Expand All @@ -217,8 +215,8 @@ export default {
plugins: [
css({
modeSelectors: [
{mode: 'mobile', tokens: ['type.size.*'], selectors: ['@media (max-width: 600px)']},
{mode: 'desktop', tokens: ['type.size.*'], selectors: ['@media (min-width: 600px)']},
{mode: 'mobile', tokens: ['typography.size.*'], selectors: ['@media (width < 600px)']},
{mode: 'desktop', tokens: ['typography.size.*'], selectors: ['@media (width >= 600px)']},
],
}),
],
Expand All @@ -232,27 +230,19 @@ That will generate the following:
/* all tokens (defaults) */
}

@media (max-width: 600px) {
@media (width < 600px) {
:root {
/* mobile size typography */
/* `mobile` mode values for `typography.size.*` tokens */
}
}

@media (min-width: 600px) {
@media (width >= 600px) {
:root {
/* desktop size typography */
/* `desktop` mode values for `typography.size.*` tokens */
}
}
```

#### Syntax

The `#` character designates the mode. **You must have a `#` somewhere in the selector.**

- `#light`: match _any_ token that has a `light` mode
- `color#light`: deeply match any token inside the `color` group, that has a `light` mode
- `color.base#light`: deeply match any token inside the `color.base` group with a `light` mode, but ignore any other tokens inside `color`

#### Further Reading

To learn about modes, [read the documentation](https://cobalt-ui.pages.dev/docs/guides/modes/)
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/docs/plugins/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Generate `.scss` and `.sass` output from your design tokens using [Cobalt](https
## Setup

```bash
npm i -D @cobalt-ui/plugin-sass
npm i -D @cobalt-ui/plugin-sass @cobalt-ui/plugin-css
```

```js
Expand Down
9 changes: 8 additions & 1 deletion docs/src/styles/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,11 @@ html {
body {
background-color: token('color.ui.contrast.0');
color: token('color.ui.contrast.100');
font-family: 'Neue Montreal', -system-ui, 'Helvetica', sans-serif;
font-family:
'Neue Montreal',
-system-ui,
'Helvetica',
sans-serif;
line-height: 1;
perspective: 1000px;
transform-style: preserve-3d;
Expand Down Expand Up @@ -148,9 +152,12 @@ code {

pre {
font-size: token('font.size.04');
font-variant-ligatures: none;
}

code {
font-variant-ligatures: none;

li &,
p & {
font-weight: 500;
Expand Down
206 changes: 191 additions & 15 deletions docs/src/styles/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,200 @@
src: url('https://drewhost.s3.amazonaws.com/PPNeueMontrealVariable.ttf') format('truetype');
}

@each $wgt in 100, 200, 300, 400, 500, 600, 700 {
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: $wgt;
src: url('https://drewhost.s3.amazonaws.com/ibm-plex-mono-#{$wgt}.woff2') format('woff2');
}
/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: $wgt;
src: url('https://drewhost.s3.amazonaws.com/ibm-plex-mono-#{$wgt}-italic.woff2') format('woff2');
}
/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-weight: 1 999;
src: url('https://drewhost.s3.amazonaws.com/redhat-mono-variable.woff2') format('woff2');
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
font-family: 'Red Hat Mono';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/redhatmono-v10-300-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Loading