@ethlete/agent-rules 0.1.0-next.10 → 0.1.0-next.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/content/skills/theming/SKILL.md +13 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @ethlete/agent-rules
|
|
2
2
|
|
|
3
|
+
## 0.1.0-next.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`16ae17e`](https://github.com/ethlete-io/ethdk/commit/16ae17e30238ef4539f3e168ca8299a4546ac292) Thanks [@TomTomB](https://github.com/TomTomB)! - The theming skill now states that a component which tints with `--et-theme-color-primary-opacity`
|
|
8
|
+
must compose the color itself, and that an `@property` `initial-value` cannot use a font-relative or
|
|
9
|
+
container unit.
|
|
10
|
+
|
|
3
11
|
## 0.1.0-next.10
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
|
@@ -61,12 +61,12 @@ Surface (each exists as `-solid` = usable color, `-rgb` = `R G B` channels):
|
|
|
61
61
|
|
|
62
62
|
Color (from the nearest `[etProvideColor]` scope):
|
|
63
63
|
|
|
64
|
-
| Token | Use for
|
|
65
|
-
| -------------------------------- |
|
|
66
|
-
| `--et-theme-color-primary` | filled backgrounds
|
|
67
|
-
| `--et-theme-color-primary-solid` | accents at full strength: focus borders, selected marks, spinners
|
|
68
|
-
| `--et-theme-color-on-primary` | text/icons on a primary-filled background
|
|
69
|
-
| `--et-theme-color-ink-solid` | primary-tinted text/border on transparent/tonal fills
|
|
64
|
+
| Token | Use for |
|
|
65
|
+
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
66
|
+
| `--et-theme-color-primary` | filled backgrounds on an element you do **not** tint. To tint per state, set `--et-theme-color-primary-opacity: 0.16` and compose the color yourself: `rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity))`. The alias is substituted at the `et-color--*` scope, so an inherited value carries the scope's opacity, never the element's |
|
|
67
|
+
| `--et-theme-color-primary-solid` | accents at full strength: focus borders, selected marks, spinners |
|
|
68
|
+
| `--et-theme-color-on-primary` | text/icons on a primary-filled background |
|
|
69
|
+
| `--et-theme-color-ink-solid` | primary-tinted text/border on transparent/tonal fills |
|
|
70
70
|
|
|
71
71
|
Interaction-state variants (`--et-surface-interaction-{hover,focus,active,disabled}-solid`)
|
|
72
72
|
resolve automatically per CSS state when the element has `[etSurfaceInteractive]`;
|
|
@@ -96,6 +96,13 @@ the interactive element itself, never on a wrapper.
|
|
|
96
96
|
declared via `@property` can never default to a theme token. If the default should
|
|
97
97
|
come from the theme, don't declare an `@property` - consume the theme token directly
|
|
98
98
|
(optionally behind a `--_et-*` indirection var).
|
|
99
|
+
- `@property` `initial-value` also cannot use a **font-relative or container unit**
|
|
100
|
+
(`em`, `rem`, `ex`, `ch`, `lh`, `cap`, `ic`, `cq*`). The value must be computationally
|
|
101
|
+
independent, so the browser drops the whole rule and leaves the token unregistered -
|
|
102
|
+
with no error. Percentages and viewport units (`vh`, `vw`, `dvh`) are fine. When the
|
|
103
|
+
default has to be relative, use `syntax: '*'` with no `initial-value` and put the
|
|
104
|
+
default in a fallback at each use site: `var(--et-skeleton-size, 1em)`.
|
|
105
|
+
`yarn lint:css-properties` checks this, and pre-commit runs it on staged files.
|
|
99
106
|
- `--et-theme-color-primary-*` always resolves to the **nearest color scope**. A
|
|
100
107
|
hardcoded semantic color in CSS can't be replaced by it unless the right theme is
|
|
101
108
|
provided on that element.
|