@skdx/skins 0.27.0 → 0.29.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/LICENSE +21 -0
- package/README.md +158 -154
- package/dist/base.css +1 -1
- package/dist/components/accordion.css +1 -1
- package/dist/components/alert.css +1 -1
- package/dist/components/angle-slider.css +1 -1
- package/dist/components/aspect-ratio.css +1 -1
- package/dist/components/autocomplete.css +1 -1
- package/dist/components/avatar.css +1 -1
- package/dist/components/badge.css +1 -1
- package/dist/components/box.css +1 -0
- package/dist/components/breadcrumb.css +1 -1
- package/dist/components/button.css +1 -1
- package/dist/components/calendar.css +1 -1
- package/dist/components/card.css +1 -1
- package/dist/components/carousel.css +1 -1
- package/dist/components/checkbox-card.css +1 -1
- package/dist/components/checkbox-group.css +1 -1
- package/dist/components/checkbox.css +1 -1
- package/dist/components/clipboard.css +1 -1
- package/dist/components/collapsible.css +1 -1
- package/dist/components/color-picker.css +1 -1
- package/dist/components/combobox.css +1 -1
- package/dist/components/command.css +1 -1
- package/dist/components/date-field.css +1 -1
- package/dist/components/date-picker.css +1 -1
- package/dist/components/dialog.css +1 -1
- package/dist/components/divider.css +1 -0
- package/dist/components/drawer.css +1 -1
- package/dist/components/editable.css +1 -1
- package/dist/components/field.css +1 -1
- package/dist/components/file-upload.css +1 -1
- package/dist/components/floating-panel.css +1 -1
- package/dist/components/form.css +1 -1
- package/dist/components/heading.css +1 -0
- package/dist/components/image.css +1 -0
- package/dist/components/kbd.css +1 -1
- package/dist/components/link.css +1 -0
- package/dist/components/list.css +1 -0
- package/dist/components/listbox.css +1 -1
- package/dist/components/loading-overlay.css +1 -1
- package/dist/components/mentions.css +1 -0
- package/dist/components/menu.css +1 -0
- package/dist/components/menubar.css +1 -1
- package/dist/components/navigation-menu.css +1 -1
- package/dist/components/number-field.css +1 -1
- package/dist/components/pagination.css +1 -1
- package/dist/components/password-input.css +1 -1
- package/dist/components/pin-input.css +1 -1
- package/dist/components/popover.css +1 -1
- package/dist/components/progress.css +1 -1
- package/dist/components/radio-card.css +1 -1
- package/dist/components/radio-group.css +1 -1
- package/dist/components/rating.css +1 -1
- package/dist/components/resizable.css +1 -1
- package/dist/components/scroll-area.css +1 -1
- package/dist/components/select.css +1 -1
- package/dist/components/skeleton.css +1 -1
- package/dist/components/slider.css +1 -1
- package/dist/components/speed-dial.css +1 -1
- package/dist/components/spinner.css +1 -1
- package/dist/components/split-button.css +1 -1
- package/dist/components/stepper.css +1 -0
- package/dist/components/switch.css +1 -1
- package/dist/components/table.css +1 -1
- package/dist/components/tabs.css +1 -1
- package/dist/components/tag-group.css +1 -1
- package/dist/components/tags-input.css +1 -1
- package/dist/components/text-field.css +1 -1
- package/dist/components/text.css +1 -0
- package/dist/components/textarea.css +1 -1
- package/dist/components/time.css +1 -0
- package/dist/components/timeline.css +1 -1
- package/dist/components/toast.css +1 -1
- package/dist/components/toggle-group.css +1 -1
- package/dist/components/toggle.css +1 -1
- package/dist/components/toolbar.css +1 -1
- package/dist/components/tour.css +1 -1
- package/dist/components/transfer.css +1 -1
- package/dist/components/tree-select.css +1 -1
- package/dist/components/tree.css +1 -1
- package/dist/index.css +1 -1
- package/dist/internal/_actuator.css +1 -1
- package/dist/internal/_arrow.css +1 -0
- package/dist/internal/_collection.css +1 -1
- package/dist/internal/_hit-target.css +1 -0
- package/dist/internal/_overlay.css +1 -1
- package/dist/internal/_status.css +1 -1
- package/dist/internal/_trigger.css +1 -1
- package/dist/structure.css +1 -0
- package/dist/utilities.css +1 -1
- package/dist/web-components.css +1 -0
- package/package.json +12 -9
- package/dist/components/affix.css +0 -1
- package/dist/components/alert-dialog.css +0 -1
- package/dist/components/context-menu.css +0 -1
- package/dist/components/data-list.css +0 -1
- package/dist/components/dropdown-menu.css +0 -1
- package/dist/components/hover-card.css +0 -1
- package/dist/components/meter.css +0 -1
- package/dist/components/multi-select.css +0 -1
- package/dist/components/segmented-control.css +0 -1
- package/dist/components/separator.css +0 -1
- package/dist/components/steps.css +0 -1
- package/dist/components/tag.css +0 -1
- package/dist/components/tooltip.css +0 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 SkandaDX
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,208 +1,188 @@
|
|
|
1
1
|
# @skdx/skins
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
headless components into finished ones.
|
|
3
|
+
Framework-neutral CSS that styles the SkandaDX core components. No JavaScript, no framework dependency, no runtime style injection. Works with React, Vue, Svelte, Angular and Web Components, in SSR.
|
|
5
4
|
|
|
5
|
+
```text
|
|
6
|
+
core component + component skin + design tokens = styled component
|
|
6
7
|
```
|
|
7
|
-
headless component + component skin + design tokens = styled component
|
|
8
|
-
```
|
|
9
|
-
|
|
10
|
-
No JavaScript. No framework dependency. Works with React, Vue, Svelte, Angular
|
|
11
|
-
and Web Components, in SSR, with no runtime style injection.
|
|
12
8
|
|
|
13
9
|
## Install
|
|
14
10
|
|
|
15
11
|
```sh
|
|
16
|
-
pnpm add @skdx/skins
|
|
12
|
+
pnpm add @skdx/skins
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Optionally, add design tokens for colour and motion:
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
pnpm add @skdx/tokens
|
|
17
19
|
```
|
|
18
20
|
|
|
19
21
|
## Use
|
|
20
22
|
|
|
23
|
+
**Tokens then skin**, in that order — every colour in the skin resolves through a `--skdx-*` custom property the tokens declare:
|
|
24
|
+
|
|
21
25
|
```ts
|
|
22
|
-
import '@skdx/tokens/css';
|
|
26
|
+
import '@skdx/tokens/css'; // optional; see "Without tokens" below
|
|
23
27
|
import '@skdx/skins/all.css';
|
|
28
|
+
```
|
|
24
29
|
|
|
30
|
+
Then render a component in your framework of choice. The skin brings no framework dependency, so the same stylesheet works everywhere:
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
// React
|
|
25
34
|
import { Button } from '@skdx/react';
|
|
26
35
|
|
|
27
36
|
export function Example() {
|
|
28
|
-
return
|
|
29
|
-
<Button variant="primary" size="md" className="product-save-button">
|
|
30
|
-
Save changes
|
|
31
|
-
</Button>
|
|
32
|
-
);
|
|
37
|
+
return <Button>Save</Button>;
|
|
33
38
|
}
|
|
34
39
|
```
|
|
35
40
|
|
|
36
|
-
|
|
41
|
+
```vue
|
|
42
|
+
<!-- Vue -->
|
|
43
|
+
<script setup>
|
|
44
|
+
import { SkdxButton } from '@skdx/vue';
|
|
45
|
+
</script>
|
|
46
|
+
<template>
|
|
47
|
+
<SkdxButton>Save</SkdxButton>
|
|
48
|
+
</template>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
```svelte
|
|
52
|
+
<!-- Svelte -->
|
|
53
|
+
<script>
|
|
54
|
+
import { Button } from '@skdx/svelte';
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<Button>Save</Button>
|
|
58
|
+
```
|
|
37
59
|
|
|
38
60
|
```ts
|
|
39
|
-
|
|
40
|
-
import '@
|
|
61
|
+
// Angular
|
|
62
|
+
import { Component } from '@angular/core';
|
|
63
|
+
|
|
64
|
+
import { SkdxButtonComponent } from '@skdx/angular';
|
|
65
|
+
|
|
66
|
+
@Component({
|
|
67
|
+
selector: 'app-example',
|
|
68
|
+
standalone: true,
|
|
69
|
+
imports: [SkdxButtonComponent],
|
|
70
|
+
template: '<skdx-button>Save</skdx-button>',
|
|
71
|
+
})
|
|
72
|
+
export class ExampleComponent {}
|
|
41
73
|
```
|
|
42
74
|
|
|
43
|
-
|
|
44
|
-
|
|
75
|
+
```html
|
|
76
|
+
<!-- Web Components -->
|
|
77
|
+
<script type="module">
|
|
78
|
+
import '@skdx/web-components/button';
|
|
79
|
+
</script>
|
|
80
|
+
<skdx-button>Save</skdx-button>
|
|
81
|
+
```
|
|
45
82
|
|
|
46
|
-
##
|
|
83
|
+
## Styling variants
|
|
47
84
|
|
|
48
|
-
|
|
49
|
-
alone and you still get a usable interface:
|
|
85
|
+
Style a component with its appearance props (`variant`, `size`, …) or with the matching `data-` attributes — either input renders the same, because the component writes the prop to the attribute the skin reads:
|
|
50
86
|
|
|
51
|
-
```
|
|
52
|
-
|
|
87
|
+
```tsx
|
|
88
|
+
<Button
|
|
89
|
+
data-variant="primary"
|
|
90
|
+
data-size="lg"
|
|
91
|
+
>
|
|
92
|
+
Save
|
|
93
|
+
</Button>
|
|
53
94
|
```
|
|
54
95
|
|
|
55
|
-
|
|
56
|
-
rules were written against, not palette decisions. Colour falls back to the
|
|
57
|
-
**CSS system colours** (`Canvas`, `Field`, `AccentColor`, `Highlight`…), which
|
|
58
|
-
the platform supplies and which already follow the user's OS light/dark and
|
|
59
|
-
contrast settings. It looks like well-spaced native controls, which is the
|
|
60
|
-
honest rendering of "no theme installed".
|
|
96
|
+
**Buttons and similar controls:** `data-variant` (`primary`, `secondary` — default, `outline`, `ghost`, `danger`), `data-size` (`sm`, `md` — default, `lg`), `data-icon-only` (square icon-only control; also needs an `aria-label`).
|
|
61
97
|
|
|
62
|
-
|
|
98
|
+
**Status families** (Alert, Badge, Toast): `data-status` (`info`, `success`, `warning`, `danger`); neutral is the unmarked default.
|
|
63
99
|
|
|
64
|
-
|
|
65
|
-
border and text — the signals that were never colour-only — and stop being
|
|
66
|
-
tinted.
|
|
67
|
-
- **Shadows and the modal scrim are dropped.** Both need alpha, which no system
|
|
68
|
-
colour provides. Overlays keep their border, which is what separates them from
|
|
69
|
-
the page.
|
|
100
|
+
**State attributes** are written by the component, not by you: `data-state`, `data-disabled`, `data-invalid`, `data-highlighted`, `data-side`, `data-orientation`.
|
|
70
101
|
|
|
71
|
-
|
|
72
|
-
declared **unlayered**, and an unlayered declaration beats the skin's layered
|
|
73
|
-
fallbacks regardless of specificity. Nothing detects anything, and there is no
|
|
74
|
-
literal fallback inlined next to any `var()` — a colour smuggled in that way
|
|
75
|
-
would win silently whenever a token failed to load, hiding the breakage.
|
|
102
|
+
## Entry points
|
|
76
103
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
104
|
+
| Import | Contents |
|
|
105
|
+
| ----------------------------------- | --------------------------------------------------- |
|
|
106
|
+
| `@skdx/skins/all.css` | Everything — 91 component families |
|
|
107
|
+
| `@skdx/skins/base.css` | Layer order, control metrics, focus ring, keyframes |
|
|
108
|
+
| `@skdx/skins/components/<name>.css` | One component |
|
|
109
|
+
| `@skdx/skins/utilities.css` | `skdx-visually-hidden` and friends |
|
|
110
|
+
| `@skdx/skins/structure.css` | The same rules with every paint declaration removed |
|
|
111
|
+
| `@skdx/skins/web-components.css` | `:not(:defined)` box reservation — see below |
|
|
80
112
|
|
|
81
|
-
|
|
113
|
+
`web-components.css` is deliberately outside `all.css`. Its `:not(:defined)` rules reserve the
|
|
114
|
+
control box until a custom element upgrades, and `@skdx/angular` uses the same `skdx-*` tag names
|
|
115
|
+
as component selectors without registering them — so in an Angular app those hosts would stay
|
|
116
|
+
hidden forever. Import it only alongside `@skdx/web-components`:
|
|
82
117
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
| `@skdx/skins/components/{name}.css` | One component |
|
|
88
|
-
| `@skdx/skins/utilities.css` | `skdx-visually-hidden` and friends |
|
|
118
|
+
```ts
|
|
119
|
+
import '@skdx/skins/all.css';
|
|
120
|
+
import '@skdx/skins/web-components.css';
|
|
121
|
+
```
|
|
89
122
|
|
|
90
|
-
|
|
123
|
+
Per-component imports reduce bundle size. Each component file imports the shared primitives it needs, and re-importing base is a no-op:
|
|
124
|
+
|
|
125
|
+
```ts
|
|
126
|
+
import '@skdx/tokens/css';
|
|
127
|
+
import '@skdx/skins/components/button.css';
|
|
128
|
+
```
|
|
91
129
|
|
|
92
|
-
|
|
93
|
-
is declared once, before any rule. Component rules live in `skdx-components` and
|
|
94
|
-
are wrapped in `:where()`, so they carry zero specificity and anything you write
|
|
95
|
-
outside a layer beats them — no `!important`, ever.
|
|
96
|
-
|
|
97
|
-
**Tokens only.** Every colour resolves through a `--skdx-color-*` custom property.
|
|
98
|
-
There is no hex, `rgb()`, `hsl()` or `oklch()` anywhere in this package, and
|
|
99
|
-
Stylelint fails the build if one appears. `currentColor` and `transparent` are
|
|
100
|
-
permitted where they express inheritance or absence; CSS system colours are
|
|
101
|
-
permitted inside `@media (forced-colors: active)`.
|
|
102
|
-
|
|
103
|
-
**Logical properties.** `padding-inline`, `inset-inline-start`,
|
|
104
|
-
`border-start-start-radius` throughout, so RTL works without a second
|
|
105
|
-
stylesheet.
|
|
106
|
-
|
|
107
|
-
**Restrained motion.** Only `opacity` and `transform` animate. All keyframes are
|
|
108
|
-
`skdx-` prefixed. `prefers-reduced-motion` collapses durations to 1ms rather than
|
|
109
|
-
to zero, so `animationend` still fires and overlays still unmount.
|
|
110
|
-
|
|
111
|
-
**Accessible states.** Disabled is a colour change, not opacity — opacity over an
|
|
112
|
-
unknown backdrop has an unknowable contrast ratio. Invalid is a thicker border
|
|
113
|
-
*and* a colour. Selected is weight *and* ink. Nothing is signalled by colour
|
|
114
|
-
alone.
|
|
115
|
-
|
|
116
|
-
**Contrast is enforced, not assumed.** `tests/contrast.test.ts` resolves the
|
|
117
|
-
token graph for all 38 themes and asserts every foreground/background pairing
|
|
118
|
-
the stylesheets rely on — 1,600 assertions, 4.5:1 for text and 3:1 for
|
|
119
|
-
boundaries, on every build. It was written after measuring that 22 of the 38
|
|
120
|
-
themes had at least one failure, including a tooltip at 1.00:1 in every dark
|
|
121
|
-
theme. Two theme-limited exceptions are recorded with their measured values so
|
|
122
|
-
they cannot silently absorb a regression.
|
|
123
|
-
|
|
124
|
-
One consequence is visible in the design: **a filled primary button keeps the
|
|
125
|
-
same fill on hover and press**, signalling state with elevation, a darker rim
|
|
126
|
-
and a 1px displacement instead. `primary-600` is the only ramp step whose
|
|
127
|
-
contrast with the themes' inverted ink clears 4.5:1 in all 38 of them, so
|
|
128
|
-
shifting the fill would make the label fail in roughly a third of themes at the
|
|
129
|
-
moment the user is aiming at it.
|
|
130
|
+
## Structure without paint
|
|
130
131
|
|
|
131
|
-
|
|
132
|
+
Several parts have no intrinsic content and therefore no intrinsic size: a slider track and thumb, a switch thumb, the progress indicator, the spinner, the skeleton, the radio indicator, and every overlay arrow. A component rendered with no stylesheet at all draws them at zero by zero. That is correct — the packages ship no appearance — but it is a poor place to start writing a skin from.
|
|
132
133
|
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
134
|
+
`@skdx/skins/structure.css` is this stylesheet with every paint declaration removed: geometry, layout and motion, no colour, no background, no shadow.
|
|
135
|
+
|
|
136
|
+
```ts
|
|
137
|
+
import '@skdx/tokens/css'; // optional — base.css falls back without it
|
|
138
|
+
import '@skdx/skins/structure.css';
|
|
139
|
+
import './my-colours.css';
|
|
137
140
|
```
|
|
138
141
|
|
|
139
|
-
|
|
140
|
-
through the real components, against the built stylesheets. Nothing here is
|
|
141
|
-
hand-written markup, so the preview cannot drift from what the gate measures —
|
|
142
|
-
an earlier hand-written audit page had, and it showed `<label class="skdx-checkbox">`
|
|
143
|
-
where the component renders `<button role="checkbox">`.
|
|
142
|
+
It is generated from the same source as `all.css` rather than maintained by hand, so its geometry is the geometry the real skin ships. Import one or the other, never both — it is a subset of the same rules, not a layer on top of them.
|
|
144
143
|
|
|
145
|
-
`
|
|
146
|
-
exists in the stylesheet is *visible* once overflow, stacking and inline styles
|
|
147
|
-
have had their say — and reports `hover-no-feedback`, `focus-ring-missing`,
|
|
148
|
-
`focus-ring-contrast`, `focus-ring-clipped`, `pressed-no-feedback` and
|
|
149
|
-
`disabled-not-announced` per part. It forces states by rewriting `:hover`,
|
|
150
|
-
`:focus-visible` and `:active` into attributes rather than driving a pointer, so
|
|
151
|
-
a state that only exists while a menu is open can still be measured.
|
|
144
|
+
The one place a colour keyword survives is inside `mask-image`, where `transparent` and `currentColor` are alpha stops that clip a shape (the spinner's ring, the half-star rating) rather than something the element is painted in.
|
|
152
145
|
|
|
153
|
-
|
|
154
|
-
test cannot show: all 38 themes, both directions, the skin on and off, the
|
|
155
|
-
tokens on and off, a filter, and the interaction states held still. Settings
|
|
156
|
-
live in the URL, so a configuration is a link you can paste into an issue.
|
|
146
|
+
## Without tokens
|
|
157
147
|
|
|
158
|
-
|
|
148
|
+
`@skdx/tokens` is an optional peer dependency, not a requirement. The skin renders a usable, themed, accessible interface with no tokens on the page — it falls back to **CSS system colours** (`Canvas`, `Field`, `AccentColor`, `Highlight`, `Mark`, `MarkText`), which the platform supplies and which already follow the user's OS light/dark and contrast settings.
|
|
159
149
|
|
|
160
|
-
|
|
161
|
-
packages ship no variant API:
|
|
150
|
+
Geometry, type and motion come through in full. Two things degrade:
|
|
162
151
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
```
|
|
152
|
+
- **Status colour collapses to neutral.** Alerts and badges keep their icon, border and text — the signals that were never colour-only — and stop being tinted red, green, amber or blue.
|
|
153
|
+
- **Shadows and the modal scrim are dropped.** Both need alpha, which no system colour provides. Overlays keep their border, which is what separates them from the page.
|
|
166
154
|
|
|
167
|
-
|
|
168
|
-
`data-size`: `sm`, `md` (default), `lg`.
|
|
155
|
+
Add `@skdx/tokens/css` and the theme takes over automatically: tokens are declared **unlayered**, so they beat the skin's layered fallbacks regardless of specificity. Nothing detects anything, and there is no fallback inlined next to any `var()` — a colour leaked that way would win silently whenever a token failed to load, hiding the breakage.
|
|
169
156
|
|
|
170
|
-
|
|
157
|
+
Verified by `tests/standalone.test.ts`: every token the stylesheets read has a fallback, every runtime property is read with an inline default, and the fallback block may name only platform colours.
|
|
171
158
|
|
|
172
|
-
|
|
173
|
-
inert**. Every rule here is inside `@layer skdx-components` and wrapped in
|
|
174
|
-
`:where()`, so your unlayered CSS wins wherever it speaks — but wherever it is
|
|
175
|
-
*silent*, the skin now speaks instead of the browser default.
|
|
159
|
+
## How it is built
|
|
176
160
|
|
|
177
|
-
|
|
161
|
+
**Cascade layers:** `@layer skdx-reset, skdx-base, skdx-components, skdx-utilities;` is declared once, before any rule. Component rules live in `skdx-components` and wrapped in `:where()`, so they carry zero specificity — anything you write outside a layer beats them with no `!important`.
|
|
178
162
|
|
|
179
|
-
|
|
180
|
-
| --- | --- | --- |
|
|
181
|
-
| `CardHeader` | `display: flex; flex-direction: column` | children stack and stretch instead of flowing |
|
|
182
|
-
| `CardFooter` | `display: flex` (row) | a `<p>` in a footer stops wrapping and sits on one line |
|
|
183
|
-
| `NavigationMenuItem` | `display: flex` | a block child is blockified onto the item's axis |
|
|
163
|
+
**Variables only.** Every colour resolves through a `--skdx-color-*` custom property, and `!important` appears nowhere in the package. One file carries literal colours — `components/color-picker.css`, where the swatch and hue gradients _are_ the subject and no theme should move them. `currentColor` and `transparent` are permitted where they express inheritance or absence; CSS system colours are permitted inside `@media (forced-colors: active)`.
|
|
184
164
|
|
|
185
|
-
|
|
186
|
-
a skin. But it means the migration step is: render each page, find the places
|
|
187
|
-
that used to rely on the browser's block layout, and **declare the layout you
|
|
188
|
-
want on your own class**, not on the `.skdx-*` one:
|
|
165
|
+
**Logical properties.** `padding-inline`, `inset-inline-start`, `border-start-start-radius` throughout, so RTL works without a second stylesheet.
|
|
189
166
|
|
|
190
|
-
|
|
191
|
-
/* Yes — your class, unlayered, so it wins with no !important. */
|
|
192
|
-
.footer__col {
|
|
193
|
-
display: block;
|
|
194
|
-
}
|
|
167
|
+
**Restrained motion.** Only `opacity` and `transform` animate. All keyframes are `skdx-` prefixed. `prefers-reduced-motion` collapses durations to 1ms rather than to zero, so `animationend` still fires and overlays still unmount.
|
|
195
168
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
169
|
+
**Accessible states.** Disabled is a colour change, not opacity — opacity over an unknown backdrop has an unknowable contrast ratio. Invalid is a thicker border _and_ a colour. Selected is weight _and_ ink. Nothing is signalled by colour alone.
|
|
170
|
+
|
|
171
|
+
**Contrast enforced.** `tests/contrast.test.ts` resolves the token graph for all 38 themes and asserts every foreground/background pairing the stylesheets rely on — over 1,600 assertions at 4.5:1 for text and 3:1 for boundaries, on every build.
|
|
172
|
+
|
|
173
|
+
## Checking it
|
|
174
|
+
|
|
175
|
+
```sh
|
|
176
|
+
pnpm --filter @skdx/skins run test # contrast, coverage, dead selectors, standalone
|
|
177
|
+
pnpm --filter @skdx/skins run test:e2e # the browser sweep
|
|
178
|
+
pnpm --filter @skdx/skins run preview # look at it yourself
|
|
200
179
|
```
|
|
201
180
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
181
|
+
All three render the same surface: every demo under `apps/docs/src/demos`, through the real components, against the built stylesheets.
|
|
182
|
+
|
|
183
|
+
`test:e2e` measures what only a browser can answer — whether a focus ring that exists in the stylesheet is _visible_ once overflow, stacking and inline styles have had their say — and reports per-part visibility issues. It forces states by rewriting `:hover`, `:focus-visible` and `:active` into attributes, so a state that only exists while a menu is open can still be measured.
|
|
184
|
+
|
|
185
|
+
`preview` opens the same page with controls for the axes a person needs and a test cannot show: all 38 themes, both directions, the skin on and off, the tokens on and off, a filter, and the interaction states held still.
|
|
206
186
|
|
|
207
187
|
## Customising
|
|
208
188
|
|
|
@@ -215,12 +195,36 @@ Retune a metric rather than rewriting a rule:
|
|
|
215
195
|
}
|
|
216
196
|
```
|
|
217
197
|
|
|
218
|
-
Recolour through the theme, not through this package
|
|
219
|
-
[skin-token-map.md](../../docs/architecture/skin-token-map.md).
|
|
198
|
+
Recolour through the theme, not through this package: the aliases and what each resolves to live in [`@skdx/tokens`](../tokens/src/utils/aliases.ts).
|
|
220
199
|
|
|
221
200
|
## Documentation
|
|
222
201
|
|
|
223
|
-
- [
|
|
224
|
-
- [
|
|
225
|
-
- [
|
|
226
|
-
- [
|
|
202
|
+
- [Overview](https://ui.skandadx.dev/skins/) — what the skin is and what it does
|
|
203
|
+
- [Install and cascade order](https://ui.skandadx.dev/skins/install/) — the two imports and the four layers
|
|
204
|
+
- [Per-component styling](https://ui.skandadx.dev/skins/per-component/) — which classes and parts each component exposes
|
|
205
|
+
- [Styling vocabulary](https://ui.skandadx.dev/skins/vocabulary/) — `data-variant`, `data-size`, `data-status` and all the attributes
|
|
206
|
+
- [Without tokens](https://ui.skandadx.dev/skins/without-tokens/) — how the skin works when `@skdx/tokens` is not installed
|
|
207
|
+
- [Writing your own](https://ui.skandadx.dev/skins/write-your-own/) — the patterns for authoring a custom skin
|
|
208
|
+
- [Styling hooks](https://ui.skandadx.dev/styling-hooks/) — the generated `::part()` ↔ `data-skdx-*` translation for the Web Components build
|
|
209
|
+
|
|
210
|
+
## Package layout
|
|
211
|
+
|
|
212
|
+
```text
|
|
213
|
+
packages/skins/
|
|
214
|
+
├── src/
|
|
215
|
+
│ ├── components/ 91 component families, one .css file each,
|
|
216
|
+
│ │ plus six _-prefixed shared partials
|
|
217
|
+
│ │ (_trigger, _status, _overlay, _actuator,
|
|
218
|
+
│ │ _card-control, _collection) that are not exported
|
|
219
|
+
│ ├── _foundation-fallback.css geometry, type and motion, generated from @skdx/tokens
|
|
220
|
+
│ ├── base.css layer order, the system-colour palette, control metrics
|
|
221
|
+
│ ├── utilities.css accessibility helpers
|
|
222
|
+
│ └── web-components.css :not(:defined) box reservation, web-components only
|
|
223
|
+
└── dist/ built .css files; all.css is dist/index.css and
|
|
224
|
+
structure.css is that bundle minus every paint
|
|
225
|
+
declaration (scripts/strip-paint.mjs)
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
---
|
|
229
|
+
|
|
230
|
+
Copyright © SkandaDX. Licensed under the MIT License — see [LICENSE](../../LICENSE) in the repository root.
|
package/dist/base.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer skdx-reset,skdx-base,skdx-components,skdx-utilities;@layer skdx-reset{:root{--skdx-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--skdx-font-family-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;--skdx-font-size-xs: .75rem;--skdx-font-size-sm: .875rem;--skdx-font-size-md: 1rem;--skdx-font-size-lg: 1.125rem;--skdx-font-size-xl: 1.25rem;--skdx-font-size-2xl: 1.5rem;--skdx-font-size-3xl: 1.875rem;--skdx-font-weight-regular: 400;--skdx-font-weight-medium: 500;--skdx-font-weight-semibold: 600;--skdx-font-weight-bold: 700;--skdx-font-line-height-tight: 1.25;--skdx-font-line-height-snug: 1.43;--skdx-font-line-height-normal: 1.5;--skdx-font-line-height-relaxed: 1.75;--skdx-font-letter-spacing-tight: -.015em;--skdx-font-letter-spacing-normal: 0em;--skdx-font-letter-spacing-wide: .025em;--skdx-font-letter-spacing-wider: .05em;--skdx-space-1: .25rem;--skdx-space-2: .5rem;--skdx-space-3: .75rem;--skdx-space-4: 1rem;--skdx-space-5: 1.25rem;--skdx-space-6: 1.5rem;--skdx-space-8: 2rem;--skdx-space-10: 2.5rem;--skdx-space-12: 3rem;--skdx-space-16: 4rem;--skdx-radius-sm: .25rem;--skdx-radius-inner: .375rem;--skdx-radius-md: .5rem;--skdx-radius-lg: .75rem;--skdx-radius-xl: 1rem;--skdx-radius-full: 9999px;--skdx-motion-duration-instant: 0ms;--skdx-motion-duration-fast: .1s;--skdx-motion-duration-normal: .2s;--skdx-motion-duration-slow: .3s;--skdx-motion-easing: cubic-bezier(.16, 1, .3, 1);--skdx-motion-easing-exit: cubic-bezier(.4, 0, 1, 1);--skdx-motion-easing-steady: cubic-bezier(.4, 0, .2, 1);--skdx-motion-easing-linear: linear;--skdx-motion-stagger-tight: 4ms;--skdx-motion-stagger-loose: 40ms;--skdx-z-index-base: 0;--skdx-z-index-dropdown: 10;--skdx-z-index-sticky: 20;--skdx-z-index-overlay: 30;--skdx-z-index-modal: 35;--skdx-z-index-popover: 40;--skdx-z-index-toast: 50;--skdx-z-index-max: 9999;--skdx-focus-ring-width: 2px;--skdx-focus-ring-offset: 2px;--skdx-focus-ring-offset-inset: calc(-1 * var(--skdx-focus-ring-width));--skdx-border-width-thin: 1px;--skdx-border-width-thick: 2px;--skdx-border-width-thicker: 4px;--skdx-opacity-disabled: .5;--skdx-opacity-scrim: .6;--skdx-control-height-sm: 1.875rem;--skdx-control-height-md: 2.25rem;--skdx-control-height-lg: 2.625rem;--skdx-control-height-compact: 2rem;--skdx-control-padding-sm: .625rem;--skdx-control-padding-md: var(--skdx-space-3);--skdx-control-padding-lg: var(--skdx-space-4);--skdx-control-gap-sm: var(--skdx-space-1);--skdx-control-gap-md: var(--skdx-space-2);--skdx-control-gap-lg: var(--skdx-space-2);--skdx-icon-size-sm: 1rem;--skdx-icon-size-md: 1.25rem;--skdx-icon-size-lg: 1.5rem;--skdx-indicator-size-sm: 1rem;--skdx-indicator-size-md: 1.25rem;--skdx-indicator-size-lg: 1.5rem;--skdx-item-height-sm: 1.75rem;--skdx-item-height-md: 2.25rem;--skdx-item-height-lg: 2.5rem;--skdx-item-gap: 2px;--skdx-overlay-padding: var(--skdx-space-1);--skdx-overlay-radius: var(--skdx-radius-lg);--skdx-overlay-min-width: 7.5rem;--skdx-field-gap: var(--skdx-space-1);--skdx-field-label-gap: var(--skdx-space-1);--skdx-target-min: 24px}@media(pointer:coarse){:root{--skdx-control-height-sm: 2.25rem;--skdx-control-height-md: 2.75rem;--skdx-control-height-lg: 3rem;--skdx-control-height-compact: 2.75rem;--skdx-item-height-sm: 2.25rem;--skdx-item-height-md: 2.75rem;--skdx-item-height-lg: 3rem;--skdx-target-min: 44px}}}@layer skdx-reset,skdx-base,skdx-components,skdx-utilities;@layer skdx-reset{:root{--skdx-shadow-sm: none;--skdx-shadow-md: none;--skdx-shadow-lg: none;--skdx-shadow-overlay: none;--skdx-color-surface-page: Canvas;--skdx-color-surface-raised: Canvas;--skdx-color-surface-default: ButtonFace;--skdx-color-surface-sunken: ButtonFace;--skdx-color-surface-hover: color-mix(in srgb, CanvasText 8%, Canvas);--skdx-color-surface-pressed: color-mix(in srgb, CanvasText 16%, Canvas);--skdx-color-surface-selected: Highlight;--skdx-color-surface-disabled: ButtonFace;--skdx-color-surface-inverse: CanvasText;--skdx-color-text-on-inverse: Canvas;--skdx-color-text-default: CanvasText;--skdx-color-text-muted: GrayText;--skdx-color-text-disabled: GrayText;--skdx-color-text-placeholder: GrayText;--skdx-color-text-on-accent: AccentColorText;--skdx-color-text-accent: LinkText;--skdx-color-text-danger: CanvasText;--skdx-color-text-success: CanvasText;--skdx-color-text-warning: CanvasText;--skdx-color-text-info: CanvasText;--skdx-color-border-default: color-mix(in srgb, CanvasText 45%, Canvas);--skdx-color-border-strong: CanvasText;--skdx-color-border-subtle: color-mix(in srgb, CanvasText 25%, Canvas);--skdx-color-border-accent: AccentColor;--skdx-color-border-disabled: GrayText;--skdx-color-border-danger: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-border-success: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-border-warning: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-action-primary-bg: AccentColor;--skdx-color-action-primary-bg-hover: AccentColor;--skdx-color-action-primary-bg-pressed: AccentColor;--skdx-color-action-primary-text: AccentColorText;--skdx-color-action-primary-border: AccentColor;--skdx-color-action-primary-border-hover: CanvasText;--skdx-color-action-secondary-bg: ButtonFace;--skdx-color-action-secondary-bg-hover: ButtonFace;--skdx-color-action-secondary-bg-pressed: ButtonFace;--skdx-color-action-secondary-text: ButtonText;--skdx-color-action-secondary-border: ButtonBorder;--skdx-color-action-outline-text: ButtonText;--skdx-color-action-outline-border: ButtonBorder;--skdx-color-action-outline-bg-hover: ButtonFace;--skdx-color-action-outline-bg-pressed: ButtonFace;--skdx-color-action-ghost-text: ButtonText;--skdx-color-action-ghost-bg-hover: ButtonFace;--skdx-color-action-ghost-bg-pressed: ButtonFace;--skdx-color-action-danger-bg: ButtonFace;--skdx-color-action-danger-bg-hover: ButtonFace;--skdx-color-action-danger-bg-pressed: ButtonFace;--skdx-color-action-danger-text: ButtonText;--skdx-color-action-danger-border: CanvasText;--skdx-color-action-disabled-bg: ButtonFace;--skdx-color-action-disabled-text: GrayText;--skdx-color-action-disabled-border: GrayText;--skdx-color-field-bg: Field;--skdx-color-field-bg-hover: ButtonFace;--skdx-color-field-bg-disabled: ButtonFace;--skdx-color-field-bg-readonly: ButtonFace;--skdx-color-field-text: FieldText;--skdx-color-field-border: ButtonBorder;--skdx-color-field-border-hover: AccentColor;--skdx-color-field-border-focus: Highlight;--skdx-color-field-border-invalid: CanvasText;--skdx-color-selection-bg: AccentColor;--skdx-color-selection-bg-hover: AccentColor;--skdx-color-selection-mark: AccentColorText;--skdx-color-highlight-bg: Highlight;--skdx-color-highlight-text: HighlightText;--skdx-color-status-info-bg: Canvas;--skdx-color-status-info-border: ButtonBorder;--skdx-color-status-info-text: CanvasText;--skdx-color-status-info-icon: CanvasText;--skdx-color-status-success-bg: Canvas;--skdx-color-status-success-border: ButtonBorder;--skdx-color-status-success-text: CanvasText;--skdx-color-status-success-icon: CanvasText;--skdx-color-status-warning-bg: Canvas;--skdx-color-status-warning-border: ButtonBorder;--skdx-color-status-warning-text: CanvasText;--skdx-color-status-warning-icon: CanvasText;--skdx-color-status-danger-bg: Canvas;--skdx-color-status-danger-border: ButtonBorder;--skdx-color-status-danger-text: CanvasText;--skdx-color-status-danger-icon: CanvasText;--skdx-color-status-neutral-bg: ButtonFace;--skdx-color-status-neutral-border: ButtonBorder;--skdx-color-status-neutral-text: ButtonText;--skdx-color-status-neutral-icon: GrayText;--skdx-color-focus-ring: CanvasText;--skdx-color-focus-ring-offset: Canvas;--skdx-color-separator: ButtonBorder;--skdx-color-track: ButtonFace;--skdx-color-track-fill: AccentColor;--skdx-color-skeleton: ButtonFace;--skdx-color-skeleton-sheen: Canvas;--skdx-color-neutral-50: Canvas;--skdx-color-neutral-950: CanvasText;--skdx-color-surface-overlay: transparent}:where([class*=skdx-]):is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul,menu,fieldset){margin:0}:where([class*=skdx-]):is(ol,ul,menu){padding-inline-start:0;list-style:none}}@layer skdx-reset{:where([class^=skdx-],[class*=" skdx-"]),:where([class^=skdx-],[class*=" skdx-"]):before,:where([class^=skdx-],[class*=" skdx-"]):after{box-sizing:border-box}:where(button,input,select,textarea)[class*=skdx-]{font:inherit;color:inherit;letter-spacing:inherit}}@layer skdx-base{:where([class^=skdx-],[class*=" skdx-"]):focus-visible{outline:var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);outline-offset:var(--skdx-focus-ring-offset)}:where([class^=skdx-],[class*=" skdx-"]):is(button,summary,a[href],[role=button],[role=link],[data-skdx-control=actuator]):hover:not(:disabled,[data-disabled],[aria-disabled=true]){background-color:var(--skdx-color-surface-hover)}:where([class^=skdx-],[class*=" skdx-"]):is(input,textarea,select):hover:not(:disabled,[readonly],[data-readonly],[data-disabled]){border-color:var(--skdx-color-field-border-hover);background-color:var(--skdx-color-field-bg-hover)}:where(.skdx-number-field,.skdx-tags-input,.skdx-pin-input__field,.skdx-multi-select__trigger,.skdx-form__control):hover:not([data-disabled],[data-readonly]){border-color:var(--skdx-color-field-border-hover)}:where([class^=skdx-],[class*=" skdx-"]):is(button,summary,a[href],[role=button],[role=link],[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio],[role=option],[role=tab],[role=checkbox],[role=radio],[role=switch],[data-skdx-control]):active:not(:disabled,[data-disabled],[aria-disabled=true]){translate:0 1px}}@layer skdx-utilities{@media(prefers-reduced-motion:reduce){:where([class^=skdx-],[class*=" skdx-"]),:where([class^=skdx-],[class*=" skdx-"]):before,:where([class^=skdx-],[class*=" skdx-"]):after{animation-duration:1ms;animation-iteration-count:1;transition-duration:1ms;scroll-behavior:auto}}}@keyframes skdx-fade-in{0%{opacity:0}}@keyframes skdx-fade-out{to{opacity:0}}@keyframes skdx-zoom-in{0%{opacity:0;transform:scale(.96)}}@keyframes skdx-zoom-out{to{opacity:0;transform:scale(.96)}}@keyframes skdx-slide-in-from-top{0%{opacity:0;transform:translateY(-.5rem)}}@keyframes skdx-slide-in-from-bottom{0%{opacity:0;transform:translateY(.5rem)}}@keyframes skdx-slide-in-from-start{0%{opacity:0;transform:translate(-.5rem)}}@keyframes skdx-slide-in-from-end{0%{opacity:0;transform:translate(.5rem)}}@keyframes skdx-spin{to{transform:rotate(360deg)}}@keyframes skdx-pulse{50%{opacity:.5}}@keyframes skdx-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}
|
|
1
|
+
@layer skdx-reset,skdx-base,skdx-components,skdx-utilities;@layer skdx-reset{:root{--skdx-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--skdx-font-family-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;--skdx-font-size-xs: .75rem;--skdx-font-size-sm: .875rem;--skdx-font-size-md: 1rem;--skdx-font-size-lg: 1.125rem;--skdx-font-size-xl: 1.25rem;--skdx-font-size-2xl: 1.5rem;--skdx-font-size-3xl: 1.875rem;--skdx-font-weight-regular: 400;--skdx-font-weight-medium: 500;--skdx-font-weight-semibold: 600;--skdx-font-weight-bold: 700;--skdx-font-line-height-tight: 1.25;--skdx-font-line-height-snug: 1.43;--skdx-font-line-height-normal: 1.5;--skdx-font-line-height-relaxed: 1.75;--skdx-font-letter-spacing-tight: -.015em;--skdx-font-letter-spacing-normal: 0em;--skdx-font-letter-spacing-wide: .025em;--skdx-font-letter-spacing-wider: .05em;--skdx-space-1: .25rem;--skdx-space-2: .5rem;--skdx-space-3: .75rem;--skdx-space-4: 1rem;--skdx-space-5: 1.25rem;--skdx-space-6: 1.5rem;--skdx-space-8: 2rem;--skdx-space-10: 2.5rem;--skdx-space-12: 3rem;--skdx-space-16: 4rem;--skdx-radius-sm: .25rem;--skdx-radius-inner: .375rem;--skdx-radius-md: .5rem;--skdx-radius-lg: .75rem;--skdx-radius-xl: 1rem;--skdx-radius-full: 9999px;--skdx-motion-duration-instant: 0ms;--skdx-motion-duration-fast: .1s;--skdx-motion-duration-normal: .2s;--skdx-motion-duration-slow: .3s;--skdx-motion-easing: cubic-bezier(.16, 1, .3, 1);--skdx-motion-easing-exit: cubic-bezier(.4, 0, 1, 1);--skdx-motion-easing-steady: cubic-bezier(.4, 0, .2, 1);--skdx-motion-easing-linear: linear;--skdx-motion-stagger-tight: 4ms;--skdx-motion-stagger-loose: 40ms;--skdx-z-index-base: 0;--skdx-z-index-dropdown: 10;--skdx-z-index-sticky: 20;--skdx-z-index-overlay: 30;--skdx-z-index-modal: 35;--skdx-z-index-popover: 40;--skdx-z-index-toast: 50;--skdx-z-index-max: 9999;--skdx-focus-ring-width: 2px;--skdx-focus-ring-offset: 2px;--skdx-focus-ring-offset-inset: calc(-1 * var(--skdx-focus-ring-width));--skdx-border-width-thin: 1px;--skdx-border-width-thick: 2px;--skdx-border-width-thicker: 4px;--skdx-opacity-disabled: .5;--skdx-opacity-scrim: .6;--skdx-control-height-sm: 1.875rem;--skdx-control-height-md: 2.25rem;--skdx-control-height-lg: 2.625rem;--skdx-control-height-compact: 2rem;--skdx-control-padding-sm: .625rem;--skdx-control-padding-md: var(--skdx-space-3);--skdx-control-padding-lg: var(--skdx-space-4);--skdx-control-gap-sm: var(--skdx-space-1);--skdx-control-gap-md: var(--skdx-space-2);--skdx-control-gap-lg: var(--skdx-space-2);--skdx-icon-size-sm: 1rem;--skdx-icon-size-md: 1.25rem;--skdx-icon-size-lg: 1.5rem;--skdx-indicator-size-sm: 1rem;--skdx-indicator-size-md: 1.25rem;--skdx-indicator-size-lg: 1.5rem;--skdx-item-height-sm: 1.75rem;--skdx-item-height-md: 2.25rem;--skdx-item-height-lg: 2.5rem;--skdx-item-gap: 2px;--skdx-overlay-padding: var(--skdx-space-1);--skdx-overlay-radius: var(--skdx-radius-lg);--skdx-overlay-min-width: 7.5rem;--skdx-field-gap: var(--skdx-space-1);--skdx-field-label-gap: var(--skdx-space-1);--skdx-target-min: 24px}@media(pointer:coarse){:root{--skdx-control-height-sm: 2.25rem;--skdx-control-height-md: 2.75rem;--skdx-control-height-lg: 3rem;--skdx-control-height-compact: 2.75rem;--skdx-item-height-sm: 2.25rem;--skdx-item-height-md: 2.75rem;--skdx-item-height-lg: 3rem;--skdx-target-min: 44px}}}@layer skdx-reset,skdx-base,skdx-components,skdx-utilities;@layer skdx-reset{:root{--skdx-shadow-sm: none;--skdx-shadow-md: none;--skdx-shadow-lg: none;--skdx-shadow-overlay: none;--skdx-color-surface-page: Canvas;--skdx-color-surface-raised: Canvas;--skdx-color-surface-default: ButtonFace;--skdx-color-surface-sunken: ButtonFace;--skdx-color-surface-hover: color-mix(in srgb, CanvasText 8%, Canvas);--skdx-color-surface-pressed: color-mix(in srgb, CanvasText 16%, Canvas);--skdx-color-surface-selected: Highlight;--skdx-color-surface-disabled: ButtonFace;--skdx-color-surface-inverse: CanvasText;--skdx-color-text-on-inverse: Canvas;--skdx-color-text-default: CanvasText;--skdx-color-text-muted: GrayText;--skdx-color-text-disabled: GrayText;--skdx-color-text-placeholder: GrayText;--skdx-color-text-on-accent: AccentColorText;--skdx-color-text-accent: LinkText;--skdx-color-text-danger: CanvasText;--skdx-color-text-success: CanvasText;--skdx-color-text-warning: CanvasText;--skdx-color-text-info: CanvasText;--skdx-color-border-default: color-mix(in srgb, CanvasText 45%, Canvas);--skdx-color-border-strong: CanvasText;--skdx-color-border-subtle: color-mix(in srgb, CanvasText 25%, Canvas);--skdx-color-border-accent: AccentColor;--skdx-color-border-disabled: GrayText;--skdx-color-border-danger: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-border-success: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-border-warning: color-mix(in srgb, CanvasText 70%, Canvas);--skdx-color-action-primary-bg: AccentColor;--skdx-color-action-primary-bg-hover: AccentColor;--skdx-color-action-primary-text: AccentColorText;--skdx-color-action-primary-border: AccentColor;--skdx-color-action-primary-border-hover: CanvasText;--skdx-color-action-secondary-bg: ButtonFace;--skdx-color-action-secondary-bg-hover: ButtonFace;--skdx-color-action-secondary-bg-pressed: ButtonFace;--skdx-color-action-secondary-text: ButtonText;--skdx-color-action-secondary-border: ButtonBorder;--skdx-color-action-outline-text: ButtonText;--skdx-color-action-outline-border: ButtonBorder;--skdx-color-action-outline-bg-hover: ButtonFace;--skdx-color-action-outline-bg-pressed: ButtonFace;--skdx-color-action-ghost-text: ButtonText;--skdx-color-action-ghost-bg-hover: ButtonFace;--skdx-color-action-ghost-bg-pressed: ButtonFace;--skdx-color-action-danger-bg: ButtonFace;--skdx-color-action-danger-bg-hover: ButtonFace;--skdx-color-action-danger-bg-pressed: ButtonFace;--skdx-color-action-danger-text: ButtonText;--skdx-color-action-danger-border: CanvasText;--skdx-color-action-disabled-bg: ButtonFace;--skdx-color-action-disabled-text: GrayText;--skdx-color-action-disabled-border: GrayText;--skdx-color-field-bg: Field;--skdx-color-field-bg-hover: ButtonFace;--skdx-color-field-bg-disabled: ButtonFace;--skdx-color-field-bg-readonly: ButtonFace;--skdx-color-field-text: FieldText;--skdx-color-field-border: ButtonBorder;--skdx-color-field-border-hover: AccentColor;--skdx-color-field-border-focus: Highlight;--skdx-color-field-border-invalid: CanvasText;--skdx-color-selection-bg: AccentColor;--skdx-color-selection-mark: AccentColorText;--skdx-color-highlight-bg: Highlight;--skdx-color-highlight-text: HighlightText;--skdx-color-status-info-bg: Canvas;--skdx-color-status-info-border: ButtonBorder;--skdx-color-status-info-text: CanvasText;--skdx-color-status-info-icon: CanvasText;--skdx-color-status-success-bg: Canvas;--skdx-color-status-success-border: ButtonBorder;--skdx-color-status-success-text: CanvasText;--skdx-color-status-success-icon: CanvasText;--skdx-color-status-warning-bg: Canvas;--skdx-color-status-warning-border: ButtonBorder;--skdx-color-status-warning-text: CanvasText;--skdx-color-status-warning-icon: CanvasText;--skdx-color-status-danger-bg: Canvas;--skdx-color-status-danger-border: ButtonBorder;--skdx-color-status-danger-text: CanvasText;--skdx-color-status-danger-icon: CanvasText;--skdx-color-status-neutral-bg: ButtonFace;--skdx-color-status-neutral-border: ButtonBorder;--skdx-color-status-neutral-text: ButtonText;--skdx-color-status-neutral-icon: GrayText;--skdx-color-focus-ring: CanvasText;--skdx-color-separator: ButtonBorder;--skdx-color-track: ButtonFace;--skdx-color-track-fill: AccentColor;--skdx-color-skeleton: ButtonFace;--skdx-color-neutral-50: Canvas;--skdx-color-neutral-950: CanvasText;--skdx-color-surface-overlay: transparent}:where([class*=skdx-]):is(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul,menu,fieldset){margin:0}:where([class*=skdx-]):is(ol,ul,menu){padding-inline-start:0;list-style:none}}@layer skdx-reset{:where([class^=skdx-],[class*=" skdx-"]),:where([class^=skdx-],[class*=" skdx-"]):before,:where([class^=skdx-],[class*=" skdx-"]):after{box-sizing:border-box}:where(button,input,select,textarea)[class*=skdx-]{font:inherit;color:inherit;letter-spacing:inherit}}@layer skdx-base{:where([class^=skdx-],[class*=" skdx-"]):focus-visible{outline:var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);outline-offset:var(--skdx-focus-ring-offset)}:where([class^=skdx-],[class*=" skdx-"]):is(button,summary,a[href],[role=button],[role=link],[data-skdx-control=actuator]):hover:not(:disabled,[data-disabled],[aria-disabled=true]){background-color:var(--skdx-color-surface-hover)}:where([class^=skdx-],[class*=" skdx-"]):is(input,textarea,select):hover:not(:disabled,[readonly],[data-readonly],[data-disabled]){border-color:var(--skdx-color-field-border-hover);background-color:var(--skdx-color-field-bg-hover)}:where(.skdx-number-field,.skdx-tags-input,.skdx-pin-input__field,.skdx-select__trigger,.skdx-form__control):hover:not([data-disabled],[data-readonly]){border-color:var(--skdx-color-field-border-hover)}:where([class^=skdx-],[class*=" skdx-"]):is(button,summary,a[href],[role=button],[role=link],[role=menuitem],[role=menuitemcheckbox],[role=menuitemradio],[role=option],[role=tab],[role=checkbox],[role=radio],[role=switch],[data-skdx-control]):active:not(:disabled,[data-disabled],[aria-disabled=true]){translate:0 1px}}@layer skdx-utilities{@media(prefers-reduced-motion:reduce){:where([class^=skdx-],[class*=" skdx-"]),:where([class^=skdx-],[class*=" skdx-"]):before,:where([class^=skdx-],[class*=" skdx-"]):after{animation-duration:1ms;animation-iteration-count:1;transition-duration:1ms;scroll-behavior:auto}}}@keyframes skdx-fade-in{0%{opacity:0}}@keyframes skdx-fade-out{to{opacity:0;visibility:hidden}}@keyframes skdx-zoom-in{0%{opacity:0;transform:scale(.96)}}@keyframes skdx-zoom-out{to{opacity:0;transform:scale(.96);visibility:hidden}}@keyframes skdx-slide-in-from-top{0%{opacity:0;transform:translateY(-.5rem)}}@keyframes skdx-slide-in-from-bottom{0%{opacity:0;transform:translateY(.5rem)}}@keyframes skdx-slide-in-from-start{0%{opacity:0;transform:translate(-.5rem)}}@keyframes skdx-slide-in-from-end{0%{opacity:0;transform:translate(.5rem)}}@keyframes skdx-spin{to{transform:rotate(360deg)}}@keyframes skdx-pulse{50%{opacity:.5}}@keyframes skdx-indeterminate{0%{transform:translate(-100%)}to{transform:translate(400%)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../base.css";@layer skdx-components{:where(.skdx-accordion){display:flex;flex-direction:column;border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-md);overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset)}:where(.skdx-accordion__item)+:where(.skdx-accordion__item){border-block-start:var(--skdx-border-width-thin) solid var(--skdx-color-border-default)}:where(.skdx-accordion__header){margin:0}:where(.skdx-accordion__trigger){display:flex;align-items:center;justify-content:space-between;gap:var(--skdx-space-3);inline-size:100%;min-block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-space-4);color:var(--skdx-color-text-default);background:transparent;border:0;font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);text-align:start;cursor:pointer;transition:background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-accordion__trigger):hover:not([data-disabled]){background-color:var(--skdx-color-surface-hover)}:where(.skdx-accordion__trigger)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}:where(.skdx-accordion__content){padding-inline:var(--skdx-space-4);padding-block-end:var(--skdx-space-4);font-size:var(--skdx-font-size-sm);line-height:var(--skdx-font-line-height-relaxed);color:var(--skdx-color-text-muted)}:where(.skdx-accordion__indicator){flex:none;display:inline-flex;color:var(--skdx-color-text-muted);transition:rotate var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-accordion__trigger)[data-state=open] :where(.skdx-accordion__indicator){rotate:180deg}}
|
|
1
|
+
@import"../base.css";@layer skdx-components{:where(.skdx-accordion){display:flex;flex-direction:column;border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-md);overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset)}:where(.skdx-accordion__item)+:where(.skdx-accordion__item){border-block-start:var(--skdx-border-width-thin) solid var(--skdx-color-border-default)}:where(.skdx-accordion__header){margin:0}:where(.skdx-accordion__trigger){display:flex;align-items:center;justify-content:space-between;gap:var(--skdx-space-3);inline-size:100%;min-block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-space-4);color:var(--skdx-color-text-default);background:transparent;border:0;font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);text-align:start;cursor:pointer;transition:background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-accordion__trigger):hover:not([data-disabled]){background-color:color-mix(in srgb,var(--skdx-color-surface-hover) 50%,transparent)}:where(.skdx-accordion__trigger)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}:where(.skdx-accordion__content){padding-inline:var(--skdx-space-4);padding-block-end:var(--skdx-space-4);font-size:var(--skdx-font-size-sm);line-height:var(--skdx-font-line-height-relaxed);color:var(--skdx-color-text-muted)}:where(.skdx-accordion__indicator){flex:none;display:inline-flex;color:var(--skdx-color-text-muted);transition:rotate var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-accordion__trigger)[data-state=open] :where(.skdx-accordion__indicator){rotate:180deg}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../internal/_status.css";@layer skdx-components{:where(.skdx-alert){display:grid;grid-template-columns:auto 1fr auto auto;align-items:start;gap:var(--skdx-space-2);padding:var(--skdx-space-3);color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border:var(--skdx-border-width-thin) solid var(--skdx-status-border, var(--skdx-color-status-neutral-border));border-inline-start-width:var(--skdx-border-width-thicker);border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm);line-height:var(--skdx-font-line-height-normal)}:where(.skdx-alert)[hidden]{display:none}:where(.skdx-alert__icon){grid-column:1;grid-row:1;inline-size:var(--skdx-icon-size-md);block-size:var(--skdx-icon-size-md);color:var(--skdx-status-icon, var(--skdx-color-status-neutral-icon))}:where(.skdx-alert__title){grid-column:2;grid-row:1;margin:0;font-weight:var(--skdx-font-weight-semibold);line-height:var(--skdx-font-line-height-tight)}:where(.skdx-alert__description){grid-column:2;grid-row:2;color:currentColor}:where(.skdx-alert__action){grid-column:3;grid-row:1;align-self:center;display:inline-flex;align-items:center;gap:var(--skdx-space-3)}:where(.skdx-alert__close){grid-column:4;grid-row:1;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);color:currentColor;background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}@media(forced-colors:active){:where(.skdx-alert){border-color:CanvasText}}:where(.skdx-alert__content){grid-column:2;grid-row:1;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skdx-space-1)}}
|
|
1
|
+
@import"../internal/_status.css";@layer skdx-components{:where(.skdx-alert){display:grid;grid-template-columns:auto 1fr auto auto;align-items:start;gap:var(--skdx-space-2);padding:var(--skdx-space-3);color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border:var(--skdx-border-width-thin) solid var(--skdx-status-border, var(--skdx-color-status-neutral-border));border-inline-start-width:var(--skdx-border-width-thicker);border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm);line-height:var(--skdx-font-line-height-normal)}:where(.skdx-alert)[data-variant=solid]{background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg))}:where(.skdx-alert)[data-variant=outline]{background-color:transparent}:where(.skdx-alert)[hidden]{display:none}:where(.skdx-alert__icon){grid-column:1;grid-row:1;inline-size:var(--skdx-icon-size-md);block-size:var(--skdx-icon-size-md);color:var(--skdx-status-icon, var(--skdx-color-status-neutral-icon))}:where(.skdx-alert__title){grid-column:2;grid-row:1;margin:0;font-weight:var(--skdx-font-weight-semibold);line-height:var(--skdx-font-line-height-tight)}:where(.skdx-alert__description){grid-column:2;grid-row:2;color:currentColor}:where(.skdx-alert__action){grid-column:3;grid-row:1;align-self:center;display:inline-flex;align-items:center;gap:var(--skdx-space-3)}:where(.skdx-alert__close){grid-column:4;grid-row:1;display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);color:currentColor;background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}@media(forced-colors:active){:where(.skdx-alert){border-color:CanvasText}}:where(.skdx-alert__content){grid-column:2;grid-row:1;min-inline-size:0;display:flex;flex-direction:column;gap:var(--skdx-space-1)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../base.css";@layer skdx-components{:where(.skdx-angle-slider){position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:6rem;block-size:6rem;background-color:var(--skdx-color-surface-sunken);border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-full);touch-action:none}:where(.skdx-angle-slider__thumb){position:absolute;inline-size:var(--skdx-indicator-size-md);block-size:var(--skdx-indicator-size-md);background-color:var(--skdx-color-track-fill);border-radius:var(--skdx-radius-full);cursor:grab}:where(.skdx-angle-slider__marks){position:absolute;inset:0;border-radius:var(--skdx-radius-full);pointer-events:none}:where(.skdx-angle-slider__mark){position:absolute;inline-size:var(--skdx-border-width-thin);block-size:var(--skdx-space-1);background-color:var(--skdx-color-border-strong)}:where(.skdx-angle-slider)[data-disabled] :where(.skdx-angle-slider__thumb){background-color:var(--skdx-color-border-disabled);cursor:not-allowed}}
|
|
1
|
+
@import"../base.css";@layer skdx-components{:where(.skdx-angle-slider){position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:6rem;block-size:6rem;--skdx-angle-slider-radius: 2.5rem;background-color:var(--skdx-color-surface-sunken);border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius-full);touch-action:none}:where(.skdx-angle-slider__thumb){position:absolute;inline-size:var(--skdx-indicator-size-md);block-size:var(--skdx-indicator-size-md);background-color:var(--skdx-color-track-fill);border-radius:var(--skdx-radius-full);cursor:grab;transform:rotate(var(--skdx-angle-slider-angle, 0deg)) translateY(calc(-1 * var(--skdx-angle-slider-radius)))}:where(.skdx-angle-slider__marks){position:absolute;inset:0;border-radius:var(--skdx-radius-full);pointer-events:none}:where(.skdx-angle-slider__mark){position:absolute;inset-block-start:50%;inset-inline-start:50%;inline-size:var(--skdx-border-width-thin);block-size:var(--skdx-space-1);background-color:var(--skdx-color-border-strong);transform-origin:center;transform:translate(-50%,-50%) rotate(var(--skdx-angle-slider-mark-angle, 0deg)) translateY(calc(-1 * var(--skdx-angle-slider-radius)))}:where(.skdx-angle-slider)[data-dragging] :where(.skdx-angle-slider__thumb){cursor:grabbing;transition:none}:where(.skdx-angle-slider)[data-readonly]{border-color:var(--skdx-color-border-subtle)}:where(.skdx-angle-slider)[data-readonly] :where(.skdx-angle-slider__thumb){cursor:default}:where(.skdx-angle-slider__mark)[data-state=active]{background-color:var(--skdx-color-track-fill)}:where(.skdx-angle-slider__mark):not(:empty){background-color:transparent;inline-size:auto;block-size:auto}:where(.skdx-angle-slider)[data-disabled] :where(.skdx-angle-slider__thumb){background-color:var(--skdx-color-border-disabled);cursor:not-allowed}@media(forced-colors:active){:where(.skdx-angle-slider){border-color:CanvasText}:where(.skdx-angle-slider__thumb){background-color:Highlight;outline:var(--skdx-border-width-thin) solid CanvasText}:where(.skdx-angle-slider__mark){background-color:CanvasText}:where(.skdx-angle-slider__mark)[data-state=active]{background-color:Highlight}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../base.css";@layer skdx-components{:where(.skdx-aspect-ratio){overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset)}:where(.skdx-aspect-ratio
|
|
1
|
+
@import"../base.css";@layer skdx-components{:where(.skdx-aspect-ratio){overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset)}:where(.skdx-aspect-ratio)>:where(img,video,iframe,canvas,svg){display:block;inline-size:100%;block-size:100%;object-fit:cover}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../internal/_overlay.css";@import"../internal/_collection.css";@layer skdx-components{:where(.skdx-autocomplete__content){padding:var(--skdx-overlay-padding)}:where(.skdx-autocomplete__input){inline-size:100%;block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);color:var(--skdx-color-field-text);background-color:var(--skdx-color-field-bg);border:var(--skdx-border-width-thin) solid var(--skdx-color-field-border);border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm)}:where(.skdx-autocomplete__input):focus-visible{border-color:var(--skdx-color-field-border-focus)}:where(.skdx-autocomplete__list){display:flex;flex-direction:column;padding:var(--skdx-space-1)}:where(.skdx-autocomplete__highlight){font-weight:var(--skdx-font-weight-semibold);color:var(--skdx-color-text-accent);background:transparent}}
|
|
1
|
+
@import"../internal/_trigger.css";@import"../internal/_overlay.css";@import"../internal/_collection.css";@layer skdx-components{:where(.skdx-autocomplete__content){padding:var(--skdx-overlay-padding)}:where(.skdx-autocomplete__field){position:relative}:where(.skdx-autocomplete__input){inline-size:100%;block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);color:var(--skdx-color-field-text);background-color:var(--skdx-color-field-bg);border:var(--skdx-border-width-thin) solid var(--skdx-color-field-border);border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm)}:where(.skdx-autocomplete__field)[data-clearable] :where(.skdx-autocomplete__input){padding-inline-end:calc(var(--skdx-target-min) + var(--skdx-space-1))}:where(.skdx-autocomplete__input)::placeholder{color:var(--skdx-color-text-placeholder);opacity:1}:where(.skdx-autocomplete__input):focus-visible{border-color:var(--skdx-color-field-border-focus)}:where(.skdx-autocomplete__input)[data-invalid]{border-color:var(--skdx-color-field-border-invalid);border-width:var(--skdx-border-width-thick)}:where(.skdx-autocomplete__input):disabled{color:var(--skdx-color-text-disabled);background-color:var(--skdx-color-field-bg-disabled);cursor:not-allowed}:where(.skdx-autocomplete__list){display:flex;flex-direction:column;padding:var(--skdx-space-1)}:where(.skdx-autocomplete__highlight){font-weight:var(--skdx-font-weight-semibold);color:var(--skdx-color-text-accent);background:transparent}:where(.skdx-autocomplete__field) :where(.skdx-autocomplete__clear){position:absolute;inset-block:0;inset-inline-end:var(--skdx-space-1);margin-block:auto}:where(.skdx-autocomplete__clear){display:inline-flex;align-items:center;justify-content:center;color:var(--skdx-color-text-muted);background:transparent;border:0;cursor:pointer}:where(.skdx-autocomplete__clear):hover:not(:disabled){color:var(--skdx-color-text-danger)}:where(.skdx-autocomplete__clear):disabled{color:var(--skdx-color-text-disabled);cursor:default}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../base.css";@layer skdx-components{:where(.skdx-avatar){position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--skdx-control-height-md);block-size:var(--skdx-control-height-md);overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);border-radius:var(--skdx-radius-full);color:var(--skdx-color-text-muted);background-color:var(--skdx-color-surface-sunken);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);user-select:none}:where(.skdx-avatar__image){inline-size:100%;block-size:100%;object-fit:cover}:where(.skdx-avatar__fallback){display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;text-transform:uppercase}:where(.skdx-avatar)[data-size=sm]{inline-size:var(--skdx-control-height-sm);block-size:var(--skdx-control-height-sm);font-size:var(--skdx-font-size-xs)}:where(.skdx-avatar)[data-size=lg]{inline-size:var(--skdx-control-height-lg);block-size:var(--skdx-control-height-lg);font-size:var(--skdx-font-size-md)}:where(.skdx-avatar)[data-shape=square]{border-radius:var(--skdx-radius-md)}}
|
|
1
|
+
@import"../base.css";@layer skdx-components{:where(.skdx-avatar){position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--skdx-control-height-md);block-size:var(--skdx-control-height-md);overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);border-radius:var(--skdx-radius-full);color:var(--skdx-color-text-muted);background-color:var(--skdx-color-surface-sunken);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);user-select:none}:where(.skdx-avatar__image){inline-size:100%;block-size:100%;object-fit:cover}:where(.skdx-avatar__fallback){display:inline-flex;align-items:center;justify-content:center;inline-size:100%;block-size:100%;text-transform:uppercase}:where(.skdx-avatar)[data-size=md]{inline-size:var(--skdx-control-height-md);block-size:var(--skdx-control-height-md);font-size:var(--skdx-font-size-sm)}:where(.skdx-avatar)[data-size=sm]{inline-size:var(--skdx-control-height-sm);block-size:var(--skdx-control-height-sm);font-size:var(--skdx-font-size-xs)}:where(.skdx-avatar)[data-size=lg]{inline-size:var(--skdx-control-height-lg);block-size:var(--skdx-control-height-lg);font-size:var(--skdx-font-size-md)}:where(.skdx-avatar)[data-shape=circle]{border-radius:var(--skdx-radius-full)}:where(.skdx-avatar)[data-shape=rounded]{border-radius:var(--skdx-radius-lg)}:where(.skdx-avatar)[data-shape=square]{border-radius:var(--skdx-radius-md)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../internal/_status.css";@layer skdx-components{:where(.skdx-badge){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-space-1);min-inline-size:var(--skdx-indicator-size-md);padding-inline:var(--skdx-space-2);padding-block:var(--skdx-border-width-thick);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium);line-height:var(--skdx-font-line-height-tight);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border:var(--skdx-border-width-thin) solid var(--skdx-status-border, var(--skdx-color-status-neutral-border));border-radius:var(--skdx-radius-full)}:where(.skdx-badge)[data-variant=solid]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-badge)[data-variant=dot]{inline-size:var(--skdx-space-2);min-inline-size:0;block-size:var(--skdx-space-2);padding:0;overflow:hidden;font-size:0}@media(forced-colors:active){:where(.skdx-badge){border-color:CanvasText}}}
|
|
1
|
+
@import"../internal/_status.css";@import"../internal/_hit-target.css";@layer skdx-components{:where(.skdx-badge){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-space-1);min-inline-size:var(--skdx-indicator-size-md);padding-inline:var(--skdx-space-2);padding-block:var(--skdx-border-width-thick);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium);line-height:var(--skdx-font-line-height-tight);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border:var(--skdx-border-width-thin) solid var(--skdx-status-border, var(--skdx-color-status-neutral-border));border-radius:var(--skdx-radius-full)}:where(.skdx-badge)[data-variant=solid]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-badge)[data-variant=outline]{color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:transparent;border-color:var(--skdx-status-border, var(--skdx-color-status-neutral-border))}:where(.skdx-badge)[data-variant=subtle]{color:var(--skdx-status-text, var(--skdx-color-status-neutral-text));background-color:var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));border-color:transparent}:where(.skdx-badge)[data-dot]{inline-size:var(--skdx-space-2);min-inline-size:0;block-size:var(--skdx-space-2);padding:0;overflow:hidden;font-size:0;border-radius:var(--skdx-radius-full)}:where(.skdx-badge)[data-shape=pill]{border-radius:var(--skdx-radius-full)}:where(.skdx-badge)[data-shape=rounded]{border-radius:var(--skdx-radius-sm)}:where(.skdx-badge)[data-size=sm]{min-block-size:var(--skdx-control-height-sm);padding-inline:var(--skdx-space-2);font-size:var(--skdx-font-size-xs)}:where(.skdx-badge)[data-size=md]{min-block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-space-3);font-size:var(--skdx-font-size-sm)}:where(.skdx-badge)[data-size=lg]{min-block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-space-4);font-size:var(--skdx-font-size-md)}:where(.skdx-badge__leading),:where(.skdx-badge__trailing){display:inline-flex;align-items:center;justify-content:center;flex:none}:where(.skdx-badge__label){min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:where(.skdx-badge)[data-selected]{background-color:var(--skdx-color-surface-selected);border-color:var(--skdx-color-border-accent);color:var(--skdx-color-text-accent)}:where(.skdx-badge)[data-disabled]{color:var(--skdx-color-text-disabled);background-color:var(--skdx-color-surface-disabled);border-color:var(--skdx-color-border-disabled);cursor:not-allowed}:where(.skdx-badge__delete){position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-icon-size-sm);block-size:var(--skdx-icon-size-sm);padding:0;color:currentColor;background:transparent;border:0;border-radius:var(--skdx-radius-full);cursor:pointer}:where(.skdx-badge__delete):hover{color:var(--skdx-color-text-danger)}@media(forced-colors:active){:where(.skdx-badge){border-color:CanvasText}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"../base.css";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../base.css";@layer skdx-components{:where(.skdx-breadcrumb__list){display:flex;align-items:center;flex-wrap:wrap;gap:var(--skdx-space-2);margin:0;padding:0;list-style:none;font-size:var(--skdx-font-size-sm)}:where(.skdx-breadcrumb__item){display:inline-flex;align-items:center;gap:var(--skdx-space-2);min-inline-size:0}:where(.skdx-breadcrumb__link){color:var(--skdx-color-text-muted);text-decoration:none;overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);text-overflow:ellipsis;white-space:nowrap}:where(.skdx-breadcrumb__link):hover{color:var(--skdx-color-text-default);text-decoration:underline}:where(.skdx-breadcrumb__link)[aria-current=page],:where(.skdx-breadcrumb__page){color:var(--skdx-color-text-default);font-weight:var(--skdx-font-weight-medium);text-decoration:none}:where(.skdx-breadcrumb__separator){display:inline-flex;color:var(--skdx-color-text-muted)
|
|
1
|
+
@import"../base.css";@layer skdx-components{:where(.skdx-breadcrumb__list){display:flex;align-items:center;flex-wrap:wrap;gap:var(--skdx-space-2);margin:0;padding:0;list-style:none;font-size:var(--skdx-font-size-sm)}:where(.skdx-breadcrumb__item){display:inline-flex;align-items:center;gap:var(--skdx-space-2);min-inline-size:0}:where(.skdx-breadcrumb__link){color:var(--skdx-color-text-muted);text-decoration:none;overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);text-overflow:ellipsis;white-space:nowrap}:where(.skdx-breadcrumb__link):hover{color:var(--skdx-color-text-default);text-decoration:underline}:where(.skdx-breadcrumb__link)[aria-current=page],:where(.skdx-breadcrumb__page){color:var(--skdx-color-text-default);font-weight:var(--skdx-font-weight-medium);text-decoration:none}:where(.skdx-breadcrumb__separator){display:inline-flex;color:var(--skdx-color-text-muted)}:where([dir=rtl]) :where(.skdx-breadcrumb__separator){scale:-1 1}:where(.skdx-breadcrumb__ellipsis){color:var(--skdx-color-text-muted)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../base.css";@layer skdx-components{:where(.skdx-button){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-control-gap-md);min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);line-height:var(--skdx-font-line-height-snug);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),box-shadow var(--skdx-motion-duration-fast) var(--skdx-motion-easing),translate var(--skdx-motion-duration-fast) var(--skdx-motion-easing),color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);color:var(--skdx-color-action-secondary-text);background-color:var(--skdx-color-action-secondary-bg);border-color:var(--skdx-color-action-secondary-border)}:where(.skdx-button):hover{background-color:var(--skdx-color-action-secondary-bg-hover);border-color:var(--skdx-color-field-border-hover)}:where(.skdx-button):active,:where(.skdx-button)[
|
|
1
|
+
@import"../base.css";@import"../internal/_status.css";@layer skdx-components{:where(.skdx-button){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-control-gap-md);min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-md);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-medium);line-height:var(--skdx-font-line-height-snug);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),box-shadow var(--skdx-motion-duration-fast) var(--skdx-motion-easing),translate var(--skdx-motion-duration-fast) var(--skdx-motion-easing),color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);color:var(--skdx-color-action-secondary-text);background-color:var(--skdx-color-action-secondary-bg);border-color:var(--skdx-color-action-secondary-border)}:where(.skdx-button):hover{background-color:var(--skdx-color-action-secondary-bg-hover);border-color:var(--skdx-color-field-border-hover)}:where(.skdx-button):active,:where(.skdx-button)[aria-pressed=true]{background-color:var(--skdx-color-action-secondary-bg-pressed)}:where(.skdx-button)[data-size=md]{block-size:var(--skdx-control-height-md);padding-inline:var(--skdx-control-padding-md);gap:var(--skdx-control-gap-md);font-size:var(--skdx-font-size-sm)}:where(.skdx-button)[data-size=sm]{block-size:var(--skdx-control-height-sm);padding-inline:var(--skdx-control-padding-sm);gap:var(--skdx-control-gap-sm);font-size:var(--skdx-font-size-xs)}:where(.skdx-button)[data-size=lg]{block-size:var(--skdx-control-height-lg);padding-inline:var(--skdx-control-padding-lg);gap:var(--skdx-control-gap-lg);font-size:var(--skdx-font-size-md)}:where(.skdx-button)[data-variant=secondary]{color:var(--skdx-color-action-secondary-text);background-color:var(--skdx-color-action-secondary-bg);border-color:var(--skdx-color-action-secondary-border)}:where(.skdx-button)[data-variant=secondary]:hover{background-color:var(--skdx-color-action-secondary-bg-hover);border-color:var(--skdx-color-field-border-hover)}:where(.skdx-button)[data-variant=secondary]:active,:where(.skdx-button)[data-variant=secondary][aria-pressed=true]{background-color:var(--skdx-color-action-secondary-bg-pressed)}:where(.skdx-button)[data-variant=primary]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-border)}:where(.skdx-button)[data-variant=primary]:hover{border-color:var(--skdx-color-action-primary-border-hover);box-shadow:var(--skdx-shadow-sm)}:where(.skdx-button)[data-variant=primary]:active,:where(.skdx-button)[data-variant=primary][aria-pressed=true]{border-color:var(--skdx-color-action-primary-border-hover);box-shadow:none;translate:0 1px}:where(.skdx-button)[data-variant=danger]{color:var(--skdx-color-action-danger-text);background-color:var(--skdx-color-action-danger-bg);border-color:var(--skdx-color-action-danger-border)}:where(.skdx-button)[data-variant=danger]:hover{background-color:var(--skdx-color-action-danger-bg-hover);border-color:var(--skdx-color-action-danger-bg-hover)}:where(.skdx-button)[data-variant=danger]:active,:where(.skdx-button)[data-variant=danger][aria-pressed=true]{background-color:var(--skdx-color-action-danger-bg-pressed);border-color:var(--skdx-color-action-danger-bg-pressed)}:where(.skdx-button)[data-variant=outline]{color:var(--skdx-color-action-outline-text);background-color:transparent;border-color:var(--skdx-color-action-outline-border)}:where(.skdx-button)[data-variant=outline]:hover{background-color:var(--skdx-color-action-outline-bg-hover)}:where(.skdx-button)[data-variant=outline][data-status=success]{border-color:var(--skdx-color-border-success)}:where(.skdx-button)[data-variant=outline][data-status=warning]{border-color:var(--skdx-color-border-warning)}:where(.skdx-button)[data-variant=outline]:active,:where(.skdx-button)[data-variant=outline][aria-pressed=true]{background-color:var(--skdx-color-action-outline-bg-pressed)}:where(.skdx-button)[data-variant=ghost]{color:var(--skdx-color-action-ghost-text);background-color:transparent;border-color:transparent}:where(.skdx-button)[data-variant=ghost]:hover{background-color:var(--skdx-color-action-ghost-bg-hover)}:where(.skdx-button)[data-variant=ghost]:active,:where(.skdx-button)[data-variant=ghost][aria-pressed=true]{background-color:var(--skdx-color-action-ghost-bg-pressed)}:where(.skdx-button)[data-status=neutral]{--skdx-status-bg: var(--skdx-color-action-secondary-bg);--skdx-status-border: var(--skdx-color-action-secondary-border);--skdx-status-text: var(--skdx-color-action-secondary-text)}:where(.skdx-button)[data-status=brand]{--skdx-status-bg: var(--skdx-color-action-primary-bg);--skdx-status-border: var(--skdx-color-action-primary-border);--skdx-status-text: var(--skdx-color-action-primary-text)}:where(.skdx-button)[data-status]{color:var(--skdx-status-text, var(--skdx-color-action-secondary-text));background-color:var(--skdx-status-bg, var(--skdx-color-action-secondary-bg));border-color:var(--skdx-status-border, var(--skdx-color-action-secondary-border))}:where(.skdx-button)[data-status]:hover:not(:disabled,[data-disabled],[aria-disabled=true]){border-color:var(--skdx-status-text, var(--skdx-color-action-secondary-text));box-shadow:var(--skdx-shadow-sm)}:where(.skdx-button)[data-status=neutral]:hover:not(:disabled,[data-disabled],[aria-disabled=true]){border-color:var(--skdx-color-field-border-hover)}:where(.skdx-button)[data-status]:active,:where(.skdx-button)[data-status][aria-pressed=true]{box-shadow:none;translate:0 1px}:where(.skdx-button)[data-status][data-variant=outline]{background-color:transparent}:where(.skdx-button)[data-status][data-variant=ghost]{background-color:transparent;border-color:transparent}:where(.skdx-button):disabled,:where(.skdx-button)[data-disabled]{color:var(--skdx-color-action-disabled-text);background-color:var(--skdx-color-action-disabled-bg);border-color:var(--skdx-color-action-disabled-border);cursor:not-allowed}:where(.skdx-button)[data-loading]{cursor:progress}:where(.skdx-button)[data-loading]:before{content:"";inline-size:var(--skdx-icon-size-sm);block-size:var(--skdx-icon-size-sm);border:var(--skdx-border-width-thick) solid currentColor;border-inline-end-color:transparent;border-radius:var(--skdx-radius-full);animation:skdx-spin var(--skdx-motion-duration-slow) var(--skdx-motion-easing-linear) infinite}:where(.skdx-button)[data-icon-only]{padding-inline:0;aspect-ratio:1}@media(forced-colors:active){:where(.skdx-button){border-color:ButtonBorder}:where(.skdx-button):disabled,:where(.skdx-button)[data-disabled]{color:GrayText;border-color:GrayText}}:where(.skdx-button__icon){display:inline-flex;flex:none;inline-size:var(--skdx-icon-size-md);block-size:var(--skdx-icon-size-md)}:where(.skdx-button)[data-size=sm] :where(.skdx-button__icon){inline-size:var(--skdx-icon-size-sm);block-size:var(--skdx-icon-size-sm)}:where(.skdx-button)[data-size=lg] :where(.skdx-button__icon){inline-size:var(--skdx-icon-size-lg);block-size:var(--skdx-icon-size-lg)}:where(.skdx-button__label){overflow:hidden;--skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);text-overflow:ellipsis;white-space:nowrap}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../base.css";@layer skdx-components{:where(.skdx-calendar){display:inline-flex;flex-direction:column;gap:var(--skdx-space-2);padding:var(--skdx-space-3)}:where(.skdx-calendar__header){display:flex;align-items:center;justify-content:space-between;gap:var(--skdx-space-2)}:where(.skdx-calendar__heading){font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-semibold)}:where(.skdx-calendar__previous-button),:where(.skdx-calendar__next-button){display:inline-flex;align-items:center;justify-content:center;min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);color:var(--skdx-color-text-muted);background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}:where(.skdx-calendar__previous-button):hover,:where(.skdx-calendar__next-button):hover{background-color:var(--skdx-color-surface-hover);color:var(--skdx-color-text-default)}:where(.skdx-calendar__grid){border-collapse:collapse}:where(.skdx-calendar__week-day){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium);color:var(--skdx-color-text-muted)}:where(.skdx-calendar__cell
|
|
1
|
+
@import"../base.css";@layer skdx-components{:where(.skdx-calendar){display:inline-flex;flex-direction:column;gap:var(--skdx-space-2);padding:var(--skdx-space-3)}:where(.skdx-calendar__header){display:flex;align-items:center;justify-content:space-between;gap:var(--skdx-space-2)}:where(.skdx-calendar__heading){display:inline-flex;align-items:center;gap:var(--skdx-space-2);font-size:var(--skdx-font-size-sm);font-weight:var(--skdx-font-weight-semibold);color:var(--skdx-color-text-default);background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}:where(.skdx-calendar__previous-button),:where(.skdx-calendar__next-button){display:inline-flex;align-items:center;justify-content:center;gap:var(--skdx-space-2);min-inline-size:var(--skdx-target-min);min-block-size:var(--skdx-target-min);color:var(--skdx-color-text-muted);background:transparent;border:0;border-radius:var(--skdx-radius-sm);cursor:pointer}:where(.skdx-calendar__heading):hover,:where(.skdx-calendar__previous-button):hover,:where(.skdx-calendar__next-button):hover{background-color:var(--skdx-color-surface-hover);color:var(--skdx-color-text-default)}:where(.skdx-calendar__grid){border-collapse:collapse}:where(.skdx-calendar):has(.skdx-calendar__grid~.skdx-calendar__grid){display:inline-grid;grid-auto-flow:column;align-items:start;gap:var(--skdx-space-2) var(--skdx-space-4)}:where(.skdx-calendar):has(.skdx-calendar__grid~.skdx-calendar__grid)>.skdx-calendar__header{grid-column:1 / -1;grid-row:1}:where(.skdx-calendar):has(.skdx-calendar__grid~.skdx-calendar__grid)>.skdx-calendar__heading{grid-row:2}:where(.skdx-calendar):has(.skdx-calendar__grid~.skdx-calendar__grid)>.skdx-calendar__grid{grid-row:3}:where(.skdx-calendar__row){display:flex;flex-wrap:nowrap}:where(.skdx-calendar__week-day){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium);color:var(--skdx-color-text-muted)}:where(.skdx-calendar__cell){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);block-size:var(--skdx-item-height-md);gap:var(--skdx-space-1);color:var(--skdx-color-text-default);background:transparent;border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-sm);font-size:var(--skdx-font-size-sm);font-variant-numeric:tabular-nums;cursor:pointer}:where(.skdx-calendar__cell)>svg{flex:none}:where(.skdx-calendar__cell):hover:not([data-disabled]){background-color:var(--skdx-color-surface-hover)}:where(.skdx-calendar__cell)[data-today]{border-color:var(--skdx-color-border-accent);font-weight:var(--skdx-font-weight-semibold)}:where(.skdx-calendar__cell)[data-state=selected]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-calendar__cell)[data-range-middle]{background-color:var(--skdx-color-surface-selected);border-radius:0}:where(.skdx-calendar__cell)[data-range-start]{border-start-end-radius:0;border-end-end-radius:0}:where(.skdx-calendar__cell)[data-range-end]{border-start-start-radius:0;border-end-start-radius:0}:where(.skdx-calendar__cell)[data-outside-month]{color:var(--skdx-color-text-muted)}:where(.skdx-calendar__cell)[data-unavailable]{text-decoration:line-through;text-decoration-thickness:var(--skdx-border-width-thick);cursor:not-allowed}:where(.skdx-calendar__cell)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}@media(forced-colors:active){:where(.skdx-calendar__cell)[data-state=selected]{background-color:Highlight;color:HighlightText}:where(.skdx-calendar__cell)[data-today]{border-color:CanvasText}:where(.skdx-calendar__cell)[data-range-middle]{background-color:Highlight;color:HighlightText}:where(.skdx-calendar__cell)[data-unavailable]{text-decoration-color:CanvasText}}:where(.skdx-calendar__month-grid,.skdx-calendar__year-grid){display:grid;grid-template-columns:repeat(4,1fr);gap:var(--skdx-space-1)}:where(.skdx-calendar__month-grid,.skdx-calendar__year-grid)>[role=rowgroup],:where(.skdx-calendar__month-grid,.skdx-calendar__year-grid)>*>[role=row]{display:contents}:where(.skdx-calendar__view-cell){display:inline-flex;align-items:center;justify-content:center;padding-block:var(--skdx-space-2);padding-inline:var(--skdx-space-1);color:var(--skdx-color-text-default);background:transparent;border:var(--skdx-border-width-thin) solid transparent;border-radius:var(--skdx-radius-sm);font-size:var(--skdx-font-size-sm);font-variant-numeric:tabular-nums;cursor:pointer}:where(.skdx-calendar__view-cell):hover:not([data-disabled]){background-color:var(--skdx-color-surface-hover)}:where(.skdx-calendar__view-cell)[data-today]{border-color:var(--skdx-color-border-accent);font-weight:var(--skdx-font-weight-semibold)}:where(.skdx-calendar__view-cell)[data-state=selected]{color:var(--skdx-color-action-primary-text);background-color:var(--skdx-color-action-primary-bg);border-color:var(--skdx-color-action-primary-bg)}:where(.skdx-calendar__view-cell)[data-disabled]{color:var(--skdx-color-text-disabled);cursor:not-allowed}:where(.skdx-calendar__week-number,.skdx-calendar__week-number-header){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--skdx-item-height-md);color:var(--skdx-color-text-muted);font-size:var(--skdx-font-size-xs);font-variant-numeric:tabular-nums}:where(.skdx-calendar__grid-head){color:var(--skdx-color-text-muted);font-size:var(--skdx-font-size-xs);font-weight:var(--skdx-font-weight-medium)}}
|
package/dist/components/card.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import"../base.css";@layer skdx-components{:where(.skdx-card){display:flex;flex-direction:column;background-color:var(--skdx-color-surface-raised);border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-radius
|
|
1
|
+
@import"../base.css";@layer skdx-components{:where(.skdx-card){display:flex;flex-direction:column;--skdx-card-padding: var(--skdx-space-4);--skdx-card-radius: var(--skdx-radius-lg);background-color:var(--skdx-color-surface-raised);border:var(--skdx-border-width-thin) solid var(--skdx-color-border-default);border-radius:var(--skdx-card-radius);color:var(--skdx-color-text-default)}:where(.skdx-card)[data-elevation=raised]{box-shadow:var(--skdx-shadow-md)}:where(.skdx-card)[data-interactive]{cursor:pointer;transition:border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing)}:where(.skdx-card)[data-interactive]:hover{border-color:var(--skdx-color-border-strong);background-color:var(--skdx-color-surface-hover)}:where(.skdx-card)[data-interactive]:focus-visible{border-color:var(--skdx-color-border-strong);background-color:var(--skdx-color-surface-hover)}:where(.skdx-card)[data-selected]{border-color:var(--skdx-color-border-accent);background-color:var(--skdx-color-surface-selected);box-shadow:inset 0 0 0 var(--skdx-border-width-thin) var(--skdx-color-border-accent)}:where(.skdx-card__media){overflow:hidden;border-start-start-radius:calc(var(--skdx-card-radius) - var(--skdx-border-width-thin));border-start-end-radius:calc(var(--skdx-card-radius) - var(--skdx-border-width-thin))}:where(.skdx-card__media)>:where(img,video,picture,canvas,svg){display:block;inline-size:100%;block-size:auto;object-fit:cover}:where(.skdx-card__header){display:flex;flex-direction:column;gap:var(--skdx-space-2);padding:var(--skdx-card-padding)}:where(.skdx-card__title){margin:0;font-size:var(--skdx-font-size-md);font-weight:var(--skdx-font-weight-semibold);line-height:var(--skdx-font-line-height-tight)}:where(.skdx-card__description){margin:0;font-size:var(--skdx-font-size-sm);color:var(--skdx-color-text-muted)}:where(.skdx-card__content){padding:var(--skdx-card-padding);padding-block-start:0}:where(.skdx-card__footer){display:flex;align-items:center;gap:var(--skdx-space-2);padding:var(--skdx-card-padding);padding-block-start:0}@media(forced-colors:active){:where(.skdx-card){border-color:CanvasText}:where(.skdx-card)[data-selected]{box-shadow:inset 0 0 0 var(--skdx-border-width-thin) Highlight;outline:var(--skdx-border-width-thin) solid Highlight}}}
|