@greendrake/scss-kit 0.2.0 → 0.4.0
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/README.md +3 -3
- package/_mixins.scss +4 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -86,7 +86,7 @@ Data-URI SVG icons rendered through `mask-image`, so the element's `background-c
|
|
|
86
86
|
- `icon-base` — emits `border: 0; display: inline-block; mask-repeat: no-repeat; background-color: var(--font-color); background-image: none`.
|
|
87
87
|
- `icon` — `icon-base` plus `mask-position: center center` and `width`/`height` of `var(--icon-size)`.
|
|
88
88
|
|
|
89
|
-
`--font-color` and `--icon-size` are read with no fallback; the consuming app defines them
|
|
89
|
+
`--font-color` and `--icon-size` are read with no fallback; the consuming app defines them.
|
|
90
90
|
|
|
91
91
|
```scss
|
|
92
92
|
.eye-toggle {
|
|
@@ -125,7 +125,7 @@ Data-URI SVG icons rendered through `mask-image`, so the element's `background-c
|
|
|
125
125
|
@include kit.use-as-default('Example', Helvetica, Arial, sans-serif);
|
|
126
126
|
```
|
|
127
127
|
|
|
128
|
-
The `url()` literals must be written in the font package's own `.scss` file: Vite rebases them relative to that file when the package is consumed from `node_modules`, and only when the package is imported by bare specifier (never a `pkg:` URL, never with Sass's `NodePackageImporter` registered).
|
|
128
|
+
The `url()` literals must be written in the font package's own `.scss` file: Vite rebases them relative to that file when the package is consumed from `node_modules`, and only when the package is imported by bare specifier (never a `pkg:` URL, never with Sass's `NodePackageImporter` registered).
|
|
129
129
|
|
|
130
130
|
## Mixins
|
|
131
131
|
|
|
@@ -134,7 +134,7 @@ The `url()` literals must be written in the font package's own `.scss` file: Vit
|
|
|
134
134
|
- `apply-props($props)` — emits each `key: value` pair of a map as a declaration.
|
|
135
135
|
- `control-clear` — the × clear button rendered inside a select-shaped control, before the chevron: an inline-flex box held at the WCAG 2.2 target-size minimum (24×24, SC 2.5.8) with a negative block margin (computed from `var(--line-height-tight, 18px)`) so it grows into the control's padding instead of its height; glyph size `var(--control-clear-font-size, 18px)`; opacity 0.5, 1 on hover.
|
|
136
136
|
- `control-chevron($point: down)` — a dropdown/drill chevron built from two borders (no icon dependency): 7×7px, `currentColor`, opacity 0.6, `transform` transition; `$point: right` rotates it to point right.
|
|
137
|
-
- `img-spinner($size: 24px)` — a centred spinner `::before` on an `img` container. Requires
|
|
137
|
+
- `img-spinner($size: 24px)` — a centred spinner `::before` on an `img` container. Requires global `spinner` keyframes and the `--spinner-color`/`--spinner-side-color` custom properties, all the app's to provide.
|
|
138
138
|
|
|
139
139
|
```scss
|
|
140
140
|
.select-clear {
|
package/_mixins.scss
CHANGED
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
// In-control affordances shared by select-shaped controls (
|
|
19
|
-
//
|
|
18
|
+
// In-control affordances shared by select-shaped controls (select boxes, picker
|
|
19
|
+
// triggers) so their anatomy cannot drift apart.
|
|
20
20
|
|
|
21
21
|
// The × clear button rendered inside a control, before the chevron. Its glyph
|
|
22
22
|
// size rides one custom property so every control including this mixin tracks
|
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
// Requires
|
|
74
|
-
// custom properties
|
|
73
|
+
// Requires global `spinner` keyframes and the --spinner-color/--spinner-side-color
|
|
74
|
+
// custom properties, all the app's to provide.
|
|
75
75
|
@mixin img-spinner($size: 24px) {
|
|
76
76
|
position: relative;
|
|
77
77
|
&::before {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@greendrake/scss-kit",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Framework-free SCSS primitives: breakpoints (single-sourced with TS via codegen), z-layer map, icon-mask registry, @font-face generator, misc mixins",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Eugene Greendrake <eugene@greendrake.nz>",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
},
|
|
45
45
|
"prettier": "@greendrake/dev-config/prettier",
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@greendrake/dev-config": "0.
|
|
47
|
+
"@greendrake/dev-config": "0.4.0",
|
|
48
48
|
"@types/bun": "^1.3.5",
|
|
49
49
|
"typescript": "6.0.3"
|
|
50
50
|
}
|