@novi-ui/raster 0.2.0 → 0.3.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 +43 -13
- package/dist/avatar/avatar.styles.d.mts +3 -3
- package/dist/badge/badge.styles.d.mts +3 -3
- package/dist/button/button.styles.d.mts +3 -3
- package/dist/card/card.styles.d.mts +3 -3
- package/dist/input/input.styles.d.mts +3 -3
- package/dist/menu/menu.styles.d.mts +6 -6
- package/dist/modal/modal.styles.d.mts +3 -3
- package/dist/popover/popover.styles.d.mts +3 -3
- package/dist/raster.css +189 -7
- package/dist/raster.scoped.css +189 -7
- package/dist/select/select.styles.d.mts +3 -3
- package/dist/skeleton/skeleton.styles.d.mts +3 -3
- package/dist/textarea/textarea.styles.d.mts +3 -3
- package/dist/toast/toast.styles.d.mts +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -37,27 +37,22 @@ Provider は要りません。テーマは CSS 変数だけで効きます。
|
|
|
37
37
|
| コンポーネント高さ | `sm` 32px / `md` 40px / `lg` 48px |
|
|
38
38
|
| タイポスケール | 比率 1.2。12 / 14 / 16 / 20 / 24 / 30 / 36px |
|
|
39
39
|
| 境界線 | **1px のみ。** 2px 以上は使わない |
|
|
40
|
-
| 影 |
|
|
41
|
-
| 角丸 |
|
|
40
|
+
| 影 | **浮いている層だけ**が持つ(メニュー・ダイアログ)。面は平ら |
|
|
41
|
+
| 角丸 | 3段。`sm` 6px / `md` 8px / `lg` 12px |
|
|
42
42
|
| 彩度 | 中立色は chroma 0。意味を持つ色のみ有彩(上限 0.19) |
|
|
43
|
+
| ブランド色 | トーン L44% / C0.090(light)・L74% / C0.090(dark)に固定 |
|
|
43
44
|
| モーション | `--novi-duration-fast`(120ms) のみ。`opacity` と `translate` だけ |
|
|
44
45
|
|
|
45
46
|
## 知っておくべき仕様
|
|
46
47
|
|
|
47
|
-
### `radius`
|
|
48
|
+
### `radius` は3段の階調です
|
|
48
49
|
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
`sm` 6px / `md` 8px / `lg` 12px。部位ごとの既定は 小さな部品 `sm` / 操作類 `md` / 浮く面 `lg`。
|
|
51
|
+
かつては全段 2px に潰していましたが、完全な直角は「古い」と読まれるため改めました(ADR-R8)。
|
|
51
52
|
|
|
52
53
|
語彙は core が共通で固定し、解釈はテーマの自由、という設計です。
|
|
53
54
|
おかげでドキュメントのコード例がテーマを跨いでそのまま動きます。
|
|
54
55
|
|
|
55
|
-
### Switch は矩形です
|
|
56
|
-
|
|
57
|
-
一般的なピル型トグルは「角を立てる」原則と衝突するため、
|
|
58
|
-
トラックもサムも角丸 0 の矩形にしています。
|
|
59
|
-
形が見慣れないぶん状態が読み取りにくいので、**ラベルの併記を強く推奨**します。
|
|
60
|
-
|
|
61
56
|
```tsx
|
|
62
57
|
<Switch isSelected={enabled} onChange={setEnabled}>
|
|
63
58
|
メール通知を受け取る
|
|
@@ -100,14 +95,49 @@ tv({ extend: switchStyles, slots: { track: 'w-14' } })
|
|
|
100
95
|
<Switch classNames={{ track: 'w-14' }} />
|
|
101
96
|
```
|
|
102
97
|
|
|
103
|
-
|
|
98
|
+
ブランド色を変えるだけなら、**まず用意された8色から選べます**(下記)。
|
|
99
|
+
それでも合わなければ CSS 変数を上書きしてください。
|
|
104
100
|
|
|
105
101
|
```css
|
|
106
102
|
:root {
|
|
107
|
-
--novi-color-primary: oklch(
|
|
103
|
+
--novi-color-primary: oklch(44% 0.09 20);
|
|
108
104
|
}
|
|
109
105
|
```
|
|
110
106
|
|
|
107
|
+
## 色を選ぶ
|
|
108
|
+
|
|
109
|
+
Raster は **Print Inks** という8色のカラーセットを持ちます。全色が顔料・インクの実名です。
|
|
110
|
+
`data-novi-color` 属性ひとつで切り替わります。**JavaScript も追加の import も不要**です。
|
|
111
|
+
|
|
112
|
+
```html
|
|
113
|
+
<html data-novi-color="brick">
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
| 色 | hue | 出自 | 差し色(2色刷り) |
|
|
117
|
+
|---|---|---|---|
|
|
118
|
+
| `ink` **(既定)** | 268 | 万年筆の藍黒。書き物の色 | `brick` |
|
|
119
|
+
| `prussian` | 235 | 紺青。18世紀からある合成顔料 | `ochre` |
|
|
120
|
+
| `forest` | 160 | 深い常緑。製図インクの緑 | `ochre` |
|
|
121
|
+
| `olive` | 125 | オリーブドラブ。土に近い緑 | `ink` |
|
|
122
|
+
| `ochre` | 70 | 黄土。最古の顔料のひとつ | `prussian` |
|
|
123
|
+
| `brick` | 35 | 煉瓦の朱。スイスポスターの赤の末裔 | `ink` |
|
|
124
|
+
| `bordeaux` | 12 | ワインの澱の赤 | `ochre` |
|
|
125
|
+
| `graphite` | 無彩 | 黒鉛。色を消すという選択肢 | `brick` |
|
|
126
|
+
|
|
127
|
+
- **トーンはテーマが持ちます。** どの色を選んでも明度と彩度は L44% / C0.090(dark は L74%)。
|
|
128
|
+
色相だけが変わるので、選び方で画面の印象が壊れません
|
|
129
|
+
- **差し色が組で付いてきます。** `--novi-color-secondary` には表の「差し色」の値が入ります。
|
|
130
|
+
新しい色を作らず同じセット内で組む、印刷の2色刷りと同じ考え方です
|
|
131
|
+
- **意味を持つ色は変わりません。** `success` / `warning` / `danger` は色選択の影響を受けません
|
|
132
|
+
- **知らない名前を書いても壊れません。** 該当する色が無ければ既定の `ink` で描画されます
|
|
133
|
+
|
|
134
|
+
8色 × light/dark のすべてについて、sRGB 色域内にあること・地に対して 4.5:1 以上・
|
|
135
|
+
面の上の文字が 4.5:1 以上であることを CI が検査しています。
|
|
136
|
+
|
|
137
|
+
> **`data-novi-color` はテーマを宣言している要素に置いてください。**
|
|
138
|
+
> `raster.scoped.css` を使っていて `data-novi-theme` を入れ子にしている場合、
|
|
139
|
+
> 内側の要素が既定色を宣言し直すため、外側に置いた色指定はそこで止まります。
|
|
140
|
+
|
|
111
141
|
## slot
|
|
112
142
|
|
|
113
143
|
全コンポーネントは構成部位に `data-slot="<名前>"` を出力します。
|
|
@@ -10,7 +10,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
root: string;
|
|
15
15
|
}>;
|
|
16
16
|
}, {
|
|
@@ -22,7 +22,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
|
|
|
22
22
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
23
23
|
root: string;
|
|
24
24
|
}>;
|
|
25
|
-
radius: VariantMap<"
|
|
25
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
26
26
|
root: string;
|
|
27
27
|
}>;
|
|
28
28
|
}, {
|
|
@@ -34,7 +34,7 @@ declare const avatarStyles: import("tailwind-variants").TVReturnType<{
|
|
|
34
34
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
35
35
|
root: string;
|
|
36
36
|
}>;
|
|
37
|
-
radius: VariantMap<"
|
|
37
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
38
38
|
root: string;
|
|
39
39
|
}>;
|
|
40
40
|
}, {
|
|
@@ -14,7 +14,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
|
|
|
14
14
|
root: string;
|
|
15
15
|
dot: string;
|
|
16
16
|
}>;
|
|
17
|
-
radius: VariantMap<"
|
|
17
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
18
18
|
root: string;
|
|
19
19
|
}>;
|
|
20
20
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -32,7 +32,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
|
|
|
32
32
|
root: string;
|
|
33
33
|
dot: string;
|
|
34
34
|
}>;
|
|
35
|
-
radius: VariantMap<"
|
|
35
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
36
36
|
root: string;
|
|
37
37
|
}>;
|
|
38
38
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -50,7 +50,7 @@ declare const badgeStyles: import("tailwind-variants").TVReturnType<{
|
|
|
50
50
|
root: string;
|
|
51
51
|
dot: string;
|
|
52
52
|
}>;
|
|
53
|
-
radius: VariantMap<"
|
|
53
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
54
54
|
root: string;
|
|
55
55
|
}>;
|
|
56
56
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
@@ -28,7 +28,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
28
28
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
29
29
|
root: string;
|
|
30
30
|
}>;
|
|
31
|
-
radius: VariantMap<"
|
|
31
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
32
32
|
root: string;
|
|
33
33
|
}>;
|
|
34
34
|
}, {
|
|
@@ -47,7 +47,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
47
47
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
48
48
|
root: string;
|
|
49
49
|
}>;
|
|
50
|
-
radius: VariantMap<"
|
|
50
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
51
51
|
root: string;
|
|
52
52
|
}>;
|
|
53
53
|
}, {
|
|
@@ -66,7 +66,7 @@ declare const buttonStyles: import("tailwind-variants").TVReturnType<{
|
|
|
66
66
|
size: VariantMap<"sm" | "md" | "lg", {
|
|
67
67
|
root: string;
|
|
68
68
|
}>;
|
|
69
|
-
radius: VariantMap<"
|
|
69
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
70
70
|
root: string;
|
|
71
71
|
}>;
|
|
72
72
|
}, {
|
|
@@ -10,7 +10,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
root: string;
|
|
15
15
|
}>;
|
|
16
16
|
isPressable: {
|
|
@@ -29,7 +29,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
|
|
|
29
29
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
30
30
|
root: string;
|
|
31
31
|
}>;
|
|
32
|
-
radius: VariantMap<"
|
|
32
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
33
33
|
root: string;
|
|
34
34
|
}>;
|
|
35
35
|
isPressable: {
|
|
@@ -48,7 +48,7 @@ declare const cardStyles: import("tailwind-variants").TVReturnType<{
|
|
|
48
48
|
variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
|
|
49
49
|
root: string;
|
|
50
50
|
}>;
|
|
51
|
-
radius: VariantMap<"
|
|
51
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
52
52
|
root: string;
|
|
53
53
|
}>;
|
|
54
54
|
isPressable: {
|
|
@@ -22,7 +22,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
|
|
|
22
22
|
inputWrapper: string;
|
|
23
23
|
input: string;
|
|
24
24
|
}>;
|
|
25
|
-
radius: VariantMap<"
|
|
25
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
26
26
|
inputWrapper: string;
|
|
27
27
|
}>;
|
|
28
28
|
}, {
|
|
@@ -42,7 +42,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
|
|
|
42
42
|
inputWrapper: string;
|
|
43
43
|
input: string;
|
|
44
44
|
}>;
|
|
45
|
-
radius: VariantMap<"
|
|
45
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
46
46
|
inputWrapper: string;
|
|
47
47
|
}>;
|
|
48
48
|
}, {
|
|
@@ -62,7 +62,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
|
|
|
62
62
|
inputWrapper: string;
|
|
63
63
|
input: string;
|
|
64
64
|
}>;
|
|
65
|
-
radius: VariantMap<"
|
|
65
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
66
66
|
inputWrapper: string;
|
|
67
67
|
}>;
|
|
68
68
|
}, {
|
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
9
9
|
[key: string]: {
|
|
10
10
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
11
|
-
list?: import("tailwind-variants").ClassValue;
|
|
12
11
|
item?: import("tailwind-variants").ClassValue;
|
|
13
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
14
12
|
trigger?: import("tailwind-variants").ClassValue;
|
|
13
|
+
list?: import("tailwind-variants").ClassValue;
|
|
14
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
15
15
|
popover?: import("tailwind-variants").ClassValue;
|
|
16
16
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
17
17
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
@@ -23,10 +23,10 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
} | {
|
|
24
24
|
[x: string]: {
|
|
25
25
|
[x: string]: import("tailwind-variants").ClassValue | {
|
|
26
|
-
list?: import("tailwind-variants").ClassValue;
|
|
27
26
|
item?: import("tailwind-variants").ClassValue;
|
|
28
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
29
27
|
trigger?: import("tailwind-variants").ClassValue;
|
|
28
|
+
list?: import("tailwind-variants").ClassValue;
|
|
29
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
30
30
|
popover?: import("tailwind-variants").ClassValue;
|
|
31
31
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
32
32
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
@@ -49,10 +49,10 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
|
|
|
49
49
|
}, undefined, {
|
|
50
50
|
[key: string]: {
|
|
51
51
|
[key: string]: import("tailwind-variants").ClassValue | {
|
|
52
|
-
list?: import("tailwind-variants").ClassValue;
|
|
53
52
|
item?: import("tailwind-variants").ClassValue;
|
|
54
|
-
separator?: import("tailwind-variants").ClassValue;
|
|
55
53
|
trigger?: import("tailwind-variants").ClassValue;
|
|
54
|
+
list?: import("tailwind-variants").ClassValue;
|
|
55
|
+
separator?: import("tailwind-variants").ClassValue;
|
|
56
56
|
popover?: import("tailwind-variants").ClassValue;
|
|
57
57
|
itemLabel?: import("tailwind-variants").ClassValue;
|
|
58
58
|
itemDescription?: import("tailwind-variants").ClassValue;
|
|
@@ -10,7 +10,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
11
11
|
panel: string;
|
|
12
12
|
}>;
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
panel: string;
|
|
15
15
|
}>;
|
|
16
16
|
}, {
|
|
@@ -25,7 +25,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
25
25
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
26
26
|
panel: string;
|
|
27
27
|
}>;
|
|
28
|
-
radius: VariantMap<"
|
|
28
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
29
29
|
panel: string;
|
|
30
30
|
}>;
|
|
31
31
|
}, {
|
|
@@ -40,7 +40,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
|
|
|
40
40
|
size: VariantMap<"sm" | "md" | "lg" | "full", {
|
|
41
41
|
panel: string;
|
|
42
42
|
}>;
|
|
43
|
-
radius: VariantMap<"
|
|
43
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
44
44
|
panel: string;
|
|
45
45
|
}>;
|
|
46
46
|
}, {
|
|
@@ -7,7 +7,7 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
7
7
|
* const myPopover = tv({ extend: popoverStyles, slots: { content: 'p-6' } })
|
|
8
8
|
*/
|
|
9
9
|
declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
10
|
-
radius: VariantMap<"
|
|
10
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
13
|
}, {
|
|
@@ -15,7 +15,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
15
15
|
arrow: string;
|
|
16
16
|
content: string;
|
|
17
17
|
}, undefined, {
|
|
18
|
-
radius: VariantMap<"
|
|
18
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
19
19
|
root: string;
|
|
20
20
|
}>;
|
|
21
21
|
}, {
|
|
@@ -23,7 +23,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
|
|
|
23
23
|
arrow: string;
|
|
24
24
|
content: string;
|
|
25
25
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
26
|
-
radius: VariantMap<"
|
|
26
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
27
27
|
root: string;
|
|
28
28
|
}>;
|
|
29
29
|
}, {
|
package/dist/raster.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* 自動生成。編集しないこと。src/tokens/raster-tokens.ts を変更して再生成する。 */
|
|
1
|
+
/* 自動生成。編集しないこと。src/tokens/raster-tokens.ts と color-set.ts を変更して再生成する。 */
|
|
2
2
|
|
|
3
3
|
@layer novi.base {
|
|
4
4
|
:root {
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
--novi-duration-slow: 120ms;
|
|
24
24
|
--novi-ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
25
25
|
--novi-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
26
|
+
--novi-hue: 268;
|
|
26
27
|
--novi-color-bg: oklch(99% 0 0);
|
|
27
28
|
--novi-color-subtle: oklch(96% 0 0);
|
|
28
29
|
--novi-color-fg: oklch(20% 0 0);
|
|
@@ -32,9 +33,9 @@
|
|
|
32
33
|
--novi-color-overlay: oklch(20% 0 0 / 0.45);
|
|
33
34
|
--novi-color-default: oklch(96% 0 0);
|
|
34
35
|
--novi-color-default-fg: oklch(20% 0 0);
|
|
35
|
-
--novi-color-primary: oklch(
|
|
36
|
+
--novi-color-primary: oklch(44% 0.09 268);
|
|
36
37
|
--novi-color-primary-fg: oklch(99% 0 0);
|
|
37
|
-
--novi-color-secondary: oklch(
|
|
38
|
+
--novi-color-secondary: oklch(44% 0.09 35);
|
|
38
39
|
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
39
40
|
--novi-color-success: oklch(47% 0.13 155);
|
|
40
41
|
--novi-color-success-fg: oklch(99% 0 0);
|
|
@@ -54,9 +55,9 @@
|
|
|
54
55
|
--novi-color-overlay: oklch(10% 0 0 / 0.6);
|
|
55
56
|
--novi-color-default: oklch(25% 0 0);
|
|
56
57
|
--novi-color-default-fg: oklch(95% 0 0);
|
|
57
|
-
--novi-color-primary: oklch(
|
|
58
|
+
--novi-color-primary: oklch(74% 0.09 268);
|
|
58
59
|
--novi-color-primary-fg: oklch(16% 0 0);
|
|
59
|
-
--novi-color-secondary: oklch(
|
|
60
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
60
61
|
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
61
62
|
--novi-color-success: oklch(77% 0.13 155);
|
|
62
63
|
--novi-color-success-fg: oklch(16% 0 0);
|
|
@@ -77,9 +78,9 @@
|
|
|
77
78
|
--novi-color-overlay: oklch(10% 0 0 / 0.6);
|
|
78
79
|
--novi-color-default: oklch(25% 0 0);
|
|
79
80
|
--novi-color-default-fg: oklch(95% 0 0);
|
|
80
|
-
--novi-color-primary: oklch(
|
|
81
|
+
--novi-color-primary: oklch(74% 0.09 268);
|
|
81
82
|
--novi-color-primary-fg: oklch(16% 0 0);
|
|
82
|
-
--novi-color-secondary: oklch(
|
|
83
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
83
84
|
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
84
85
|
--novi-color-success: oklch(77% 0.13 155);
|
|
85
86
|
--novi-color-success-fg: oklch(16% 0 0);
|
|
@@ -89,4 +90,185 @@
|
|
|
89
90
|
--novi-color-danger-fg: oklch(16% 0 0);
|
|
90
91
|
}
|
|
91
92
|
}
|
|
93
|
+
|
|
94
|
+
/* ── カラーセット Print Inks(specs/06-tones-and-colors) ──
|
|
95
|
+
data-novi-color は data-novi-theme と同じ要素(テーマルート)に置く。
|
|
96
|
+
未知の色名はどれにも一致せず、既定色 Ink のまま描画される。 */
|
|
97
|
+
[data-novi-color='ink'] {
|
|
98
|
+
--novi-hue: 268;
|
|
99
|
+
--novi-color-primary: oklch(44% 0.09 268);
|
|
100
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
101
|
+
--novi-color-secondary: oklch(44% 0.09 35);
|
|
102
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-novi-color='prussian'] {
|
|
106
|
+
--novi-hue: 235;
|
|
107
|
+
--novi-color-primary: oklch(44% 0.09 235);
|
|
108
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
109
|
+
--novi-color-secondary: oklch(44% 0.09 70);
|
|
110
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-novi-color='forest'] {
|
|
114
|
+
--novi-hue: 160;
|
|
115
|
+
--novi-color-primary: oklch(44% 0.09 160);
|
|
116
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
117
|
+
--novi-color-secondary: oklch(44% 0.09 70);
|
|
118
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
[data-novi-color='olive'] {
|
|
122
|
+
--novi-hue: 125;
|
|
123
|
+
--novi-color-primary: oklch(44% 0.09 125);
|
|
124
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
125
|
+
--novi-color-secondary: oklch(44% 0.09 268);
|
|
126
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
[data-novi-color='ochre'] {
|
|
130
|
+
--novi-hue: 70;
|
|
131
|
+
--novi-color-primary: oklch(44% 0.09 70);
|
|
132
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
133
|
+
--novi-color-secondary: oklch(44% 0.09 235);
|
|
134
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
[data-novi-color='brick'] {
|
|
138
|
+
--novi-hue: 35;
|
|
139
|
+
--novi-color-primary: oklch(44% 0.09 35);
|
|
140
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
141
|
+
--novi-color-secondary: oklch(44% 0.09 268);
|
|
142
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
[data-novi-color='bordeaux'] {
|
|
146
|
+
--novi-hue: 12;
|
|
147
|
+
--novi-color-primary: oklch(44% 0.09 12);
|
|
148
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
149
|
+
--novi-color-secondary: oklch(44% 0.09 70);
|
|
150
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
[data-novi-color='graphite'] {
|
|
154
|
+
--novi-hue: 270;
|
|
155
|
+
--novi-color-primary: oklch(44% 0.02 270);
|
|
156
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
157
|
+
--novi-color-secondary: oklch(44% 0.09 35);
|
|
158
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
[data-novi-scheme='dark'][data-novi-color='ink'] {
|
|
162
|
+
--novi-color-primary: oklch(74% 0.09 268);
|
|
163
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
164
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
165
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
[data-novi-scheme='dark'][data-novi-color='prussian'] {
|
|
169
|
+
--novi-color-primary: oklch(74% 0.09 235);
|
|
170
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
171
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
172
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
[data-novi-scheme='dark'][data-novi-color='forest'] {
|
|
176
|
+
--novi-color-primary: oklch(74% 0.09 160);
|
|
177
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
178
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
179
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
[data-novi-scheme='dark'][data-novi-color='olive'] {
|
|
183
|
+
--novi-color-primary: oklch(74% 0.09 125);
|
|
184
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
185
|
+
--novi-color-secondary: oklch(74% 0.09 268);
|
|
186
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
[data-novi-scheme='dark'][data-novi-color='ochre'] {
|
|
190
|
+
--novi-color-primary: oklch(74% 0.09 70);
|
|
191
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
192
|
+
--novi-color-secondary: oklch(74% 0.09 235);
|
|
193
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
[data-novi-scheme='dark'][data-novi-color='brick'] {
|
|
197
|
+
--novi-color-primary: oklch(74% 0.09 35);
|
|
198
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
199
|
+
--novi-color-secondary: oklch(74% 0.09 268);
|
|
200
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
[data-novi-scheme='dark'][data-novi-color='bordeaux'] {
|
|
204
|
+
--novi-color-primary: oklch(74% 0.09 12);
|
|
205
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
206
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
207
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
[data-novi-scheme='dark'][data-novi-color='graphite'] {
|
|
211
|
+
--novi-color-primary: oklch(74% 0.017 270);
|
|
212
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
213
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
214
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
@media (prefers-color-scheme: dark) {
|
|
218
|
+
:root:not([data-novi-scheme='light'])[data-novi-color='ink'] {
|
|
219
|
+
--novi-color-primary: oklch(74% 0.09 268);
|
|
220
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
221
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
222
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
:root:not([data-novi-scheme='light'])[data-novi-color='prussian'] {
|
|
226
|
+
--novi-color-primary: oklch(74% 0.09 235);
|
|
227
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
228
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
229
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
:root:not([data-novi-scheme='light'])[data-novi-color='forest'] {
|
|
233
|
+
--novi-color-primary: oklch(74% 0.09 160);
|
|
234
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
235
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
236
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
:root:not([data-novi-scheme='light'])[data-novi-color='olive'] {
|
|
240
|
+
--novi-color-primary: oklch(74% 0.09 125);
|
|
241
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
242
|
+
--novi-color-secondary: oklch(74% 0.09 268);
|
|
243
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
:root:not([data-novi-scheme='light'])[data-novi-color='ochre'] {
|
|
247
|
+
--novi-color-primary: oklch(74% 0.09 70);
|
|
248
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
249
|
+
--novi-color-secondary: oklch(74% 0.09 235);
|
|
250
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
:root:not([data-novi-scheme='light'])[data-novi-color='brick'] {
|
|
254
|
+
--novi-color-primary: oklch(74% 0.09 35);
|
|
255
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
256
|
+
--novi-color-secondary: oklch(74% 0.09 268);
|
|
257
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
:root:not([data-novi-scheme='light'])[data-novi-color='bordeaux'] {
|
|
261
|
+
--novi-color-primary: oklch(74% 0.09 12);
|
|
262
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
263
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
264
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
:root:not([data-novi-scheme='light'])[data-novi-color='graphite'] {
|
|
268
|
+
--novi-color-primary: oklch(74% 0.017 270);
|
|
269
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
270
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
271
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
272
|
+
}
|
|
273
|
+
}
|
|
92
274
|
}
|
package/dist/raster.scoped.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* 自動生成。編集しないこと。src/tokens/raster-tokens.ts を変更して再生成する。 */
|
|
1
|
+
/* 自動生成。編集しないこと。src/tokens/raster-tokens.ts と color-set.ts を変更して再生成する。 */
|
|
2
2
|
|
|
3
3
|
@layer novi.base {
|
|
4
4
|
[data-novi-theme='raster'] {
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
--novi-duration-slow: 120ms;
|
|
24
24
|
--novi-ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
25
25
|
--novi-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
26
|
+
--novi-hue: 268;
|
|
26
27
|
--novi-color-bg: oklch(99% 0 0);
|
|
27
28
|
--novi-color-subtle: oklch(96% 0 0);
|
|
28
29
|
--novi-color-fg: oklch(20% 0 0);
|
|
@@ -32,9 +33,9 @@
|
|
|
32
33
|
--novi-color-overlay: oklch(20% 0 0 / 0.45);
|
|
33
34
|
--novi-color-default: oklch(96% 0 0);
|
|
34
35
|
--novi-color-default-fg: oklch(20% 0 0);
|
|
35
|
-
--novi-color-primary: oklch(
|
|
36
|
+
--novi-color-primary: oklch(44% 0.09 268);
|
|
36
37
|
--novi-color-primary-fg: oklch(99% 0 0);
|
|
37
|
-
--novi-color-secondary: oklch(
|
|
38
|
+
--novi-color-secondary: oklch(44% 0.09 35);
|
|
38
39
|
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
39
40
|
--novi-color-success: oklch(47% 0.13 155);
|
|
40
41
|
--novi-color-success-fg: oklch(99% 0 0);
|
|
@@ -54,9 +55,9 @@
|
|
|
54
55
|
--novi-color-overlay: oklch(10% 0 0 / 0.6);
|
|
55
56
|
--novi-color-default: oklch(25% 0 0);
|
|
56
57
|
--novi-color-default-fg: oklch(95% 0 0);
|
|
57
|
-
--novi-color-primary: oklch(
|
|
58
|
+
--novi-color-primary: oklch(74% 0.09 268);
|
|
58
59
|
--novi-color-primary-fg: oklch(16% 0 0);
|
|
59
|
-
--novi-color-secondary: oklch(
|
|
60
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
60
61
|
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
61
62
|
--novi-color-success: oklch(77% 0.13 155);
|
|
62
63
|
--novi-color-success-fg: oklch(16% 0 0);
|
|
@@ -77,9 +78,9 @@
|
|
|
77
78
|
--novi-color-overlay: oklch(10% 0 0 / 0.6);
|
|
78
79
|
--novi-color-default: oklch(25% 0 0);
|
|
79
80
|
--novi-color-default-fg: oklch(95% 0 0);
|
|
80
|
-
--novi-color-primary: oklch(
|
|
81
|
+
--novi-color-primary: oklch(74% 0.09 268);
|
|
81
82
|
--novi-color-primary-fg: oklch(16% 0 0);
|
|
82
|
-
--novi-color-secondary: oklch(
|
|
83
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
83
84
|
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
84
85
|
--novi-color-success: oklch(77% 0.13 155);
|
|
85
86
|
--novi-color-success-fg: oklch(16% 0 0);
|
|
@@ -89,4 +90,185 @@
|
|
|
89
90
|
--novi-color-danger-fg: oklch(16% 0 0);
|
|
90
91
|
}
|
|
91
92
|
}
|
|
93
|
+
|
|
94
|
+
/* ── カラーセット Print Inks(specs/06-tones-and-colors) ──
|
|
95
|
+
data-novi-color は data-novi-theme と同じ要素(テーマルート)に置く。
|
|
96
|
+
未知の色名はどれにも一致せず、既定色 Ink のまま描画される。 */
|
|
97
|
+
[data-novi-theme='raster'][data-novi-color='ink'] {
|
|
98
|
+
--novi-hue: 268;
|
|
99
|
+
--novi-color-primary: oklch(44% 0.09 268);
|
|
100
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
101
|
+
--novi-color-secondary: oklch(44% 0.09 35);
|
|
102
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
[data-novi-theme='raster'][data-novi-color='prussian'] {
|
|
106
|
+
--novi-hue: 235;
|
|
107
|
+
--novi-color-primary: oklch(44% 0.09 235);
|
|
108
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
109
|
+
--novi-color-secondary: oklch(44% 0.09 70);
|
|
110
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[data-novi-theme='raster'][data-novi-color='forest'] {
|
|
114
|
+
--novi-hue: 160;
|
|
115
|
+
--novi-color-primary: oklch(44% 0.09 160);
|
|
116
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
117
|
+
--novi-color-secondary: oklch(44% 0.09 70);
|
|
118
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
[data-novi-theme='raster'][data-novi-color='olive'] {
|
|
122
|
+
--novi-hue: 125;
|
|
123
|
+
--novi-color-primary: oklch(44% 0.09 125);
|
|
124
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
125
|
+
--novi-color-secondary: oklch(44% 0.09 268);
|
|
126
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
[data-novi-theme='raster'][data-novi-color='ochre'] {
|
|
130
|
+
--novi-hue: 70;
|
|
131
|
+
--novi-color-primary: oklch(44% 0.09 70);
|
|
132
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
133
|
+
--novi-color-secondary: oklch(44% 0.09 235);
|
|
134
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
[data-novi-theme='raster'][data-novi-color='brick'] {
|
|
138
|
+
--novi-hue: 35;
|
|
139
|
+
--novi-color-primary: oklch(44% 0.09 35);
|
|
140
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
141
|
+
--novi-color-secondary: oklch(44% 0.09 268);
|
|
142
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
[data-novi-theme='raster'][data-novi-color='bordeaux'] {
|
|
146
|
+
--novi-hue: 12;
|
|
147
|
+
--novi-color-primary: oklch(44% 0.09 12);
|
|
148
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
149
|
+
--novi-color-secondary: oklch(44% 0.09 70);
|
|
150
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
[data-novi-theme='raster'][data-novi-color='graphite'] {
|
|
154
|
+
--novi-hue: 270;
|
|
155
|
+
--novi-color-primary: oklch(44% 0.02 270);
|
|
156
|
+
--novi-color-primary-fg: oklch(99% 0 0);
|
|
157
|
+
--novi-color-secondary: oklch(44% 0.09 35);
|
|
158
|
+
--novi-color-secondary-fg: oklch(99% 0 0);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
[data-novi-theme='raster'][data-novi-scheme='dark'][data-novi-color='ink'] {
|
|
162
|
+
--novi-color-primary: oklch(74% 0.09 268);
|
|
163
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
164
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
165
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
[data-novi-theme='raster'][data-novi-scheme='dark'][data-novi-color='prussian'] {
|
|
169
|
+
--novi-color-primary: oklch(74% 0.09 235);
|
|
170
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
171
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
172
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
[data-novi-theme='raster'][data-novi-scheme='dark'][data-novi-color='forest'] {
|
|
176
|
+
--novi-color-primary: oklch(74% 0.09 160);
|
|
177
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
178
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
179
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
[data-novi-theme='raster'][data-novi-scheme='dark'][data-novi-color='olive'] {
|
|
183
|
+
--novi-color-primary: oklch(74% 0.09 125);
|
|
184
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
185
|
+
--novi-color-secondary: oklch(74% 0.09 268);
|
|
186
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
[data-novi-theme='raster'][data-novi-scheme='dark'][data-novi-color='ochre'] {
|
|
190
|
+
--novi-color-primary: oklch(74% 0.09 70);
|
|
191
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
192
|
+
--novi-color-secondary: oklch(74% 0.09 235);
|
|
193
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
[data-novi-theme='raster'][data-novi-scheme='dark'][data-novi-color='brick'] {
|
|
197
|
+
--novi-color-primary: oklch(74% 0.09 35);
|
|
198
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
199
|
+
--novi-color-secondary: oklch(74% 0.09 268);
|
|
200
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
[data-novi-theme='raster'][data-novi-scheme='dark'][data-novi-color='bordeaux'] {
|
|
204
|
+
--novi-color-primary: oklch(74% 0.09 12);
|
|
205
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
206
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
207
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
[data-novi-theme='raster'][data-novi-scheme='dark'][data-novi-color='graphite'] {
|
|
211
|
+
--novi-color-primary: oklch(74% 0.017 270);
|
|
212
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
213
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
214
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
@media (prefers-color-scheme: dark) {
|
|
218
|
+
[data-novi-theme='raster']:not([data-novi-scheme='light'])[data-novi-color='ink'] {
|
|
219
|
+
--novi-color-primary: oklch(74% 0.09 268);
|
|
220
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
221
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
222
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
[data-novi-theme='raster']:not([data-novi-scheme='light'])[data-novi-color='prussian'] {
|
|
226
|
+
--novi-color-primary: oklch(74% 0.09 235);
|
|
227
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
228
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
229
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
[data-novi-theme='raster']:not([data-novi-scheme='light'])[data-novi-color='forest'] {
|
|
233
|
+
--novi-color-primary: oklch(74% 0.09 160);
|
|
234
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
235
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
236
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
[data-novi-theme='raster']:not([data-novi-scheme='light'])[data-novi-color='olive'] {
|
|
240
|
+
--novi-color-primary: oklch(74% 0.09 125);
|
|
241
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
242
|
+
--novi-color-secondary: oklch(74% 0.09 268);
|
|
243
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
[data-novi-theme='raster']:not([data-novi-scheme='light'])[data-novi-color='ochre'] {
|
|
247
|
+
--novi-color-primary: oklch(74% 0.09 70);
|
|
248
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
249
|
+
--novi-color-secondary: oklch(74% 0.09 235);
|
|
250
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
[data-novi-theme='raster']:not([data-novi-scheme='light'])[data-novi-color='brick'] {
|
|
254
|
+
--novi-color-primary: oklch(74% 0.09 35);
|
|
255
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
256
|
+
--novi-color-secondary: oklch(74% 0.09 268);
|
|
257
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
[data-novi-theme='raster']:not([data-novi-scheme='light'])[data-novi-color='bordeaux'] {
|
|
261
|
+
--novi-color-primary: oklch(74% 0.09 12);
|
|
262
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
263
|
+
--novi-color-secondary: oklch(74% 0.09 70);
|
|
264
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
[data-novi-theme='raster']:not([data-novi-scheme='light'])[data-novi-color='graphite'] {
|
|
268
|
+
--novi-color-primary: oklch(74% 0.017 270);
|
|
269
|
+
--novi-color-primary-fg: oklch(16% 0 0);
|
|
270
|
+
--novi-color-secondary: oklch(74% 0.09 35);
|
|
271
|
+
--novi-color-secondary-fg: oklch(16% 0 0);
|
|
272
|
+
}
|
|
273
|
+
}
|
|
92
274
|
}
|
|
@@ -17,7 +17,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
17
17
|
trigger: string;
|
|
18
18
|
option: string;
|
|
19
19
|
}>;
|
|
20
|
-
radius: VariantMap<"
|
|
20
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
21
21
|
trigger: string;
|
|
22
22
|
}>;
|
|
23
23
|
}, {
|
|
@@ -39,7 +39,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
39
39
|
trigger: string;
|
|
40
40
|
option: string;
|
|
41
41
|
}>;
|
|
42
|
-
radius: VariantMap<"
|
|
42
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
43
43
|
trigger: string;
|
|
44
44
|
}>;
|
|
45
45
|
}, {
|
|
@@ -61,7 +61,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
|
|
|
61
61
|
trigger: string;
|
|
62
62
|
option: string;
|
|
63
63
|
}>;
|
|
64
|
-
radius: VariantMap<"
|
|
64
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
65
65
|
trigger: string;
|
|
66
66
|
}>;
|
|
67
67
|
}, {
|
|
@@ -7,19 +7,19 @@ import { VariantMap } from "@novi-ui/core";
|
|
|
7
7
|
* const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
|
|
8
8
|
*/
|
|
9
9
|
declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
|
|
10
|
-
radius: VariantMap<"
|
|
10
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
13
|
}, {
|
|
14
14
|
root: string;
|
|
15
15
|
}, undefined, {
|
|
16
|
-
radius: VariantMap<"
|
|
16
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
17
17
|
root: string;
|
|
18
18
|
}>;
|
|
19
19
|
}, {
|
|
20
20
|
root: string;
|
|
21
21
|
}, import("tailwind-variants").TVReturnTypeLike<{
|
|
22
|
-
radius: VariantMap<"
|
|
22
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
23
23
|
root: string;
|
|
24
24
|
}>;
|
|
25
25
|
}, {
|
|
@@ -20,7 +20,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
20
20
|
inputWrapper: string;
|
|
21
21
|
textarea: string;
|
|
22
22
|
}>;
|
|
23
|
-
radius: VariantMap<"
|
|
23
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
24
24
|
inputWrapper: string;
|
|
25
25
|
}>;
|
|
26
26
|
}, {
|
|
@@ -38,7 +38,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
38
38
|
inputWrapper: string;
|
|
39
39
|
textarea: string;
|
|
40
40
|
}>;
|
|
41
|
-
radius: VariantMap<"
|
|
41
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
42
42
|
inputWrapper: string;
|
|
43
43
|
}>;
|
|
44
44
|
}, {
|
|
@@ -56,7 +56,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
|
|
|
56
56
|
inputWrapper: string;
|
|
57
57
|
textarea: string;
|
|
58
58
|
}>;
|
|
59
|
-
radius: VariantMap<"
|
|
59
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
60
60
|
inputWrapper: string;
|
|
61
61
|
}>;
|
|
62
62
|
}, {
|
|
@@ -10,7 +10,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
10
10
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
11
11
|
root: string;
|
|
12
12
|
}>;
|
|
13
|
-
radius: VariantMap<"
|
|
13
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
14
14
|
root: string;
|
|
15
15
|
}>;
|
|
16
16
|
}, {
|
|
@@ -26,7 +26,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
26
26
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
27
27
|
root: string;
|
|
28
28
|
}>;
|
|
29
|
-
radius: VariantMap<"
|
|
29
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
30
30
|
root: string;
|
|
31
31
|
}>;
|
|
32
32
|
}, {
|
|
@@ -42,7 +42,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
|
|
|
42
42
|
color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
|
|
43
43
|
root: string;
|
|
44
44
|
}>;
|
|
45
|
-
radius: VariantMap<"
|
|
45
|
+
radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
|
|
46
46
|
root: string;
|
|
47
47
|
}>;
|
|
48
48
|
}, {
|