@charcoal-ui/tailwind-config 4.0.0-beta.8 → 4.0.0-rc.1
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 +1 -1
- package/dist/_lib/TailwindBuild.d.ts.map +1 -1
- package/dist/colors/plugin.d.ts +3 -2
- package/dist/colors/plugin.d.ts.map +1 -1
- package/dist/colors/pluginTokenV1.d.ts +32 -0
- package/dist/colors/pluginTokenV1.d.ts.map +1 -0
- package/dist/index.cjs.js +194 -45
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +5 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +187 -33
- package/dist/index.esm.js.map +1 -1
- package/dist/tokenV2.d.ts +3 -0
- package/dist/tokenV2.d.ts.map +1 -0
- package/dist/tokenV2.test.d.ts +2 -0
- package/dist/tokenV2.test.d.ts.map +1 -0
- package/dist/util.d.ts +4 -0
- package/dist/util.d.ts.map +1 -1
- package/package.json +10 -7
- package/src/Custom.mdx +122 -0
- package/src/README.mdx +61 -0
- package/src/__snapshots__/index.test.ts.snap +373 -5
- package/src/__snapshots__/tokenV2.test.ts.snap +6082 -0
- package/src/_lib/TailwindBuild.ts +3 -4
- package/src/colors/plugin.ts +17 -6
- package/src/colors/pluginTokenV1.ts +99 -0
- package/src/docs/colors/__snapshots__/TextBgColor.story.storyshot +1 -1
- package/src/index.test.ts +4 -0
- package/src/index.ts +47 -8
- package/src/tokenV2.test.ts +21 -0
- package/src/tokenV2.ts +72 -0
- package/src/util.ts +29 -0
package/src/Custom.mdx
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { Meta, Story } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
<Meta title="tailwind-config/Custom" />
|
|
4
|
+
|
|
5
|
+
# カスタマイズする
|
|
6
|
+
|
|
7
|
+
`createTailwindConfig` を利用することでお使いの環境、色などに適応させることができます。
|
|
8
|
+
|
|
9
|
+
```js
|
|
10
|
+
const { light, dark } = require('@charcoal-ui/theme')
|
|
11
|
+
const { createTailwindConfig } = require('@charcoal-ui/tailwind-config')
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* @type {import('tailwindcss/tailwind-config').TailwindConfig}
|
|
15
|
+
*/
|
|
16
|
+
module.exports = {
|
|
17
|
+
darkMode: false,
|
|
18
|
+
content: ['./src/**/*.tsx', './src/**/*.html'],
|
|
19
|
+
presets: [
|
|
20
|
+
createTailwindConfig({
|
|
21
|
+
version: 'v3',
|
|
22
|
+
theme: {
|
|
23
|
+
':root': light,
|
|
24
|
+
'@media (prefers-color-scheme: dark)': dark,
|
|
25
|
+
},
|
|
26
|
+
}),
|
|
27
|
+
],
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
`createTailwindConfig` には以下のオプションを渡すことができます。
|
|
32
|
+
|
|
33
|
+
| name | type | description |
|
|
34
|
+
| ------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------- |
|
|
35
|
+
| theme | `Record<string, Theme>` | 条件ごとの色の値のマッピングを渡します。 :root は必須のキーです。 |
|
|
36
|
+
| version | v1 \| v2 \| v3 | Tailwind.css のバージョン系統を指定します。色のキー名に使われる DEFAULT と default などの違いを内部で吸収します。 |
|
|
37
|
+
|
|
38
|
+
## ThemaMap について
|
|
39
|
+
|
|
40
|
+
charcoal は Tailwind.css の通常のダークモード (`dark:○○`のようなクラス) をサポートしません。
|
|
41
|
+
なぜなら charcoal における「色」は、見にくい事もなく light テーマと dark テーマで違うカラーコードであり得るからです。
|
|
42
|
+
そこで登場するのが `@charcoal-ui/tailwind-config` で使える `theme` というオプションを受け取ります。
|
|
43
|
+
|
|
44
|
+
以下の例は `:root` （つまり通常ケース）では light テーマで、システムの設定がダークモードである場合は dark テーマを使用するものです。
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
createTailwindConfig({
|
|
48
|
+
version: 'v3',
|
|
49
|
+
theme: {
|
|
50
|
+
':root': light,
|
|
51
|
+
'@media (prefers-color-scheme: dark)': dark,
|
|
52
|
+
},
|
|
53
|
+
})
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
`theme` オプションを渡す設定の場合、ダークテーマ対応されないサービスであっても `:root` に必ず自身のプロダクトのカラーテーマを渡す必要があります。
|
|
57
|
+
|
|
58
|
+
`theme` でこのように書くと、このような CSS Variables を生成します。
|
|
59
|
+
|
|
60
|
+
```css
|
|
61
|
+
/* 以下はイメージです */
|
|
62
|
+
|
|
63
|
+
:root {
|
|
64
|
+
--tailwind-color-background1: #fff;
|
|
65
|
+
--tailwind-color-background2: #f5f5f5;
|
|
66
|
+
/* ... */
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media (prefers-color-scheme: dark) {
|
|
70
|
+
:root {
|
|
71
|
+
--tailwind-color-background1: #1f1f1f;
|
|
72
|
+
--tailwind-color-background2: #000000;
|
|
73
|
+
/* ... */
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
このとき、以下のように置く必要はありません。
|
|
79
|
+
キーが `@media` で始まる場合はビルド時に `:root` が補われます。
|
|
80
|
+
|
|
81
|
+
```js
|
|
82
|
+
{
|
|
83
|
+
theme: {
|
|
84
|
+
// これは間違い！！
|
|
85
|
+
'@media (prefers-color-scheme: dark)': {
|
|
86
|
+
':root': dark
|
|
87
|
+
},
|
|
88
|
+
|
|
89
|
+
// 正しくはこう
|
|
90
|
+
'@media (prefers-color-scheme: dark)': dark
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
`theme` のキーとして通常のセレクタを指定することもできます。
|
|
96
|
+
これによりダークモードの切り替えが DOM の状態に依存するケースにも対応します。`localStorage` などで JS での切り替えを実装しているアプリケーションはこのような手法が好ましいでしょう。
|
|
97
|
+
|
|
98
|
+
```js
|
|
99
|
+
createTailwindConfig({
|
|
100
|
+
version: 'v3',
|
|
101
|
+
theme: {
|
|
102
|
+
':root': light,
|
|
103
|
+
'html[data-theme="dark"]': dark,
|
|
104
|
+
},
|
|
105
|
+
})
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
/* 以下はイメージです */
|
|
110
|
+
|
|
111
|
+
:root {
|
|
112
|
+
--tailwind-color-background1: #fff;
|
|
113
|
+
--tailwind-color-background2: #f5f5f5;
|
|
114
|
+
/* ... */
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
html[data-theme='dark'] {
|
|
118
|
+
--tailwind-color-background1: #1f1f1f;
|
|
119
|
+
--tailwind-color-background2: #000000;
|
|
120
|
+
/* ... */
|
|
121
|
+
}
|
|
122
|
+
```
|
package/src/README.mdx
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { Meta, Story, Canvas, Props } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
<Meta title="tailwind-config/README" />
|
|
4
|
+
|
|
5
|
+
# @charcoal-ui/tailwind-config クイックスタート
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@charcoal-ui/tailwind-config)
|
|
8
|
+
|
|
9
|
+
## インストール
|
|
10
|
+
|
|
11
|
+
以下のいずれかのパッケージマネージャーを使用してインストールしてください
|
|
12
|
+
|
|
13
|
+
### npm
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install --save-dev @charcoal-ui/tailwind-config
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### yarn
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
yarn add -D @charcoal-ui/tailwind-config
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### pnpm
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
pnpm add -D @charcoal-ui/tailwind-config
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### bun
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
bun add -D @charcoal-ui/tailwind-config
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## 概要
|
|
38
|
+
|
|
39
|
+
`@charcoal-ui/tailwind-config` は、Tailwind に `@charcoal-ui/foundation` を適用します。
|
|
40
|
+
|
|
41
|
+
## 使い方
|
|
42
|
+
|
|
43
|
+
`tailwind.config.js` の中で `require` して使います。
|
|
44
|
+
|
|
45
|
+
### デフォルトの config を使う
|
|
46
|
+
|
|
47
|
+
```javascript
|
|
48
|
+
const { config } = require('@charcoal-ui/tailwind-config')
|
|
49
|
+
|
|
50
|
+
/** @type {import('tailwindcss').Config} */
|
|
51
|
+
module.exports = {
|
|
52
|
+
content: [],
|
|
53
|
+
theme: {
|
|
54
|
+
extend: {},
|
|
55
|
+
},
|
|
56
|
+
plugins: [],
|
|
57
|
+
presets: [config],
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
テーマの調整などが必要な場合は[カスタマイズする](/docs/tailwind-config-custom--docs)のページを見てください。
|
|
@@ -1,7 +1,294 @@
|
|
|
1
|
-
//
|
|
1
|
+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
|
-
exports[`tailwind.config.js
|
|
4
|
-
|
|
3
|
+
exports[`tailwind.config.js > defaultConfig 1`] = `
|
|
4
|
+
{
|
|
5
|
+
"corePlugins": {
|
|
6
|
+
"lineHeight": false,
|
|
7
|
+
},
|
|
8
|
+
"plugins": [
|
|
9
|
+
{
|
|
10
|
+
"config": undefined,
|
|
11
|
+
"handler": [Function],
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"config": undefined,
|
|
15
|
+
"handler": [Function],
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"config": undefined,
|
|
19
|
+
"handler": [Function],
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
"config": undefined,
|
|
23
|
+
"handler": [Function],
|
|
24
|
+
},
|
|
25
|
+
],
|
|
26
|
+
"theme": {
|
|
27
|
+
"borderColor": {
|
|
28
|
+
"default": {
|
|
29
|
+
"DEFAULT": "var(--tailwind-color-default, rgba(0,0,0,0.08))",
|
|
30
|
+
"disabled": "var(--tailwind-color-default--disabled, rgba(0,0,0,0.0256))",
|
|
31
|
+
"hover": "var(--tailwind-color-default--hover, rgba(0,0,0,0.1168))",
|
|
32
|
+
"outline": "var(--tailwind-color-default--outline, rgba(0,0,0,0.0256))",
|
|
33
|
+
"press": "var(--tailwind-color-default--press, rgba(0,0,0,0.2272))",
|
|
34
|
+
},
|
|
35
|
+
},
|
|
36
|
+
"borderRadius": {
|
|
37
|
+
"16": "16px",
|
|
38
|
+
"24": "24px",
|
|
39
|
+
"4": "4px",
|
|
40
|
+
"8": "8px",
|
|
41
|
+
"none": "0px",
|
|
42
|
+
"oval": "999999px",
|
|
43
|
+
},
|
|
44
|
+
"colors": {
|
|
45
|
+
"assertive": {
|
|
46
|
+
"DEFAULT": "var(--tailwind-color-assertive, #ff2b00)",
|
|
47
|
+
"disabled": "var(--tailwind-color-assertive--disabled, rgba(255,43,0,0.32))",
|
|
48
|
+
"hover": "var(--tailwind-color-assertive--hover, #f52900)",
|
|
49
|
+
"outline": "var(--tailwind-color-assertive--outline, rgba(255,43,0,0.32))",
|
|
50
|
+
"press": "var(--tailwind-color-assertive--press, #d62400)",
|
|
51
|
+
},
|
|
52
|
+
"background1": {
|
|
53
|
+
"DEFAULT": "var(--tailwind-color-background1, #ffffff)",
|
|
54
|
+
"disabled": "var(--tailwind-color-background1--disabled, rgba(255,255,255,0.32))",
|
|
55
|
+
"hover": "var(--tailwind-color-background1--hover, #f5f5f5)",
|
|
56
|
+
"outline": "var(--tailwind-color-background1--outline, rgba(255,255,255,0.32))",
|
|
57
|
+
"press": "var(--tailwind-color-background1--press, #d6d6d6)",
|
|
58
|
+
},
|
|
59
|
+
"background2": {
|
|
60
|
+
"DEFAULT": "var(--tailwind-color-background2, #f5f5f5)",
|
|
61
|
+
"disabled": "var(--tailwind-color-background2--disabled, rgba(245,245,245,0.32))",
|
|
62
|
+
"hover": "var(--tailwind-color-background2--hover, #ebebeb)",
|
|
63
|
+
"outline": "var(--tailwind-color-background2--outline, rgba(245,245,245,0.32))",
|
|
64
|
+
"press": "var(--tailwind-color-background2--press, #cecece)",
|
|
65
|
+
},
|
|
66
|
+
"black": "#000",
|
|
67
|
+
"border": {
|
|
68
|
+
"DEFAULT": "var(--tailwind-color-border, rgba(0,0,0,0.08))",
|
|
69
|
+
"disabled": "var(--tailwind-color-border--disabled, rgba(0,0,0,0.0256))",
|
|
70
|
+
"hover": "var(--tailwind-color-border--hover, rgba(0,0,0,0.1168))",
|
|
71
|
+
"outline": "var(--tailwind-color-border--outline, rgba(0,0,0,0.0256))",
|
|
72
|
+
"press": "var(--tailwind-color-border--press, rgba(0,0,0,0.2272))",
|
|
73
|
+
},
|
|
74
|
+
"brand": {
|
|
75
|
+
"DEFAULT": "var(--tailwind-color-brand, #0096fa)",
|
|
76
|
+
"disabled": "var(--tailwind-color-brand--disabled, rgba(0,150,250,0.32))",
|
|
77
|
+
"hover": "var(--tailwind-color-brand--hover, #0090f0)",
|
|
78
|
+
"outline": "var(--tailwind-color-brand--outline, rgba(0,150,250,0.32))",
|
|
79
|
+
"press": "var(--tailwind-color-brand--press, #007ed2)",
|
|
80
|
+
},
|
|
81
|
+
"current": "currentColor",
|
|
82
|
+
"icon6": {
|
|
83
|
+
"DEFAULT": "var(--tailwind-color-icon6, rgba(255,255,255,0.28))",
|
|
84
|
+
"disabled": "var(--tailwind-color-icon6--disabled, rgba(255,255,255,0.08960000000000001))",
|
|
85
|
+
"hover": "var(--tailwind-color-icon6--hover, rgba(222,222,222,0.3088))",
|
|
86
|
+
"outline": "var(--tailwind-color-icon6--outline, rgba(255,255,255,0.08960000000000001))",
|
|
87
|
+
"press": "var(--tailwind-color-icon6--press, rgba(152,152,152,0.3952))",
|
|
88
|
+
},
|
|
89
|
+
"link1": {
|
|
90
|
+
"DEFAULT": "var(--tailwind-color-link1, #3d7699)",
|
|
91
|
+
"disabled": "var(--tailwind-color-link1--disabled, rgba(61,118,153,0.32))",
|
|
92
|
+
"hover": "var(--tailwind-color-link1--hover, #3b7193)",
|
|
93
|
+
"outline": "var(--tailwind-color-link1--outline, rgba(61,118,153,0.32))",
|
|
94
|
+
"press": "var(--tailwind-color-link1--press, #336381)",
|
|
95
|
+
},
|
|
96
|
+
"link2": {
|
|
97
|
+
"DEFAULT": "var(--tailwind-color-link2, rgba(255,255,255,0.36))",
|
|
98
|
+
"disabled": "var(--tailwind-color-link2--disabled, rgba(255,255,255,0.1152))",
|
|
99
|
+
"hover": "var(--tailwind-color-link2--hover, rgba(229,229,229,0.3856))",
|
|
100
|
+
"outline": "var(--tailwind-color-link2--outline, rgba(255,255,255,0.1152))",
|
|
101
|
+
"press": "var(--tailwind-color-link2--press, rgba(167,167,167,0.4624))",
|
|
102
|
+
},
|
|
103
|
+
"success": {
|
|
104
|
+
"DEFAULT": "var(--tailwind-color-success, #b1cc29)",
|
|
105
|
+
"disabled": "var(--tailwind-color-success--disabled, rgba(177,204,41,0.32))",
|
|
106
|
+
"hover": "var(--tailwind-color-success--hover, #aac427)",
|
|
107
|
+
"outline": "var(--tailwind-color-success--outline, rgba(177,204,41,0.32))",
|
|
108
|
+
"press": "var(--tailwind-color-success--press, #95ab22)",
|
|
109
|
+
},
|
|
110
|
+
"surface1": {
|
|
111
|
+
"DEFAULT": "var(--tailwind-color-surface1, #ffffff)",
|
|
112
|
+
"disabled": "var(--tailwind-color-surface1--disabled, rgba(255,255,255,0.32))",
|
|
113
|
+
"hover": "var(--tailwind-color-surface1--hover, #f5f5f5)",
|
|
114
|
+
"outline": "var(--tailwind-color-surface1--outline, rgba(255,255,255,0.32))",
|
|
115
|
+
"press": "var(--tailwind-color-surface1--press, #d6d6d6)",
|
|
116
|
+
},
|
|
117
|
+
"surface10": {
|
|
118
|
+
"DEFAULT": "var(--tailwind-color-surface10, rgba(0,0,0,0.16))",
|
|
119
|
+
"disabled": "var(--tailwind-color-surface10--disabled, rgba(0,0,0,0.0512))",
|
|
120
|
+
"hover": "var(--tailwind-color-surface10--hover, rgba(0,0,0,0.1936))",
|
|
121
|
+
"outline": "var(--tailwind-color-surface10--outline, rgba(0,0,0,0.0512))",
|
|
122
|
+
"press": "var(--tailwind-color-surface10--press, rgba(0,0,0,0.2944))",
|
|
123
|
+
},
|
|
124
|
+
"surface2": {
|
|
125
|
+
"DEFAULT": "var(--tailwind-color-surface2, rgba(0,0,0,0.02))",
|
|
126
|
+
"disabled": "var(--tailwind-color-surface2--disabled, rgba(0,0,0,0.0064))",
|
|
127
|
+
"hover": "var(--tailwind-color-surface2--hover, rgba(0,0,0,0.0592))",
|
|
128
|
+
"outline": "var(--tailwind-color-surface2--outline, rgba(0,0,0,0.0064))",
|
|
129
|
+
"press": "var(--tailwind-color-surface2--press, rgba(0,0,0,0.17679999999999998))",
|
|
130
|
+
},
|
|
131
|
+
"surface3": {
|
|
132
|
+
"DEFAULT": "var(--tailwind-color-surface3, rgba(0,0,0,0.04))",
|
|
133
|
+
"disabled": "var(--tailwind-color-surface3--disabled, rgba(0,0,0,0.0128))",
|
|
134
|
+
"hover": "var(--tailwind-color-surface3--hover, rgba(0,0,0,0.0784))",
|
|
135
|
+
"outline": "var(--tailwind-color-surface3--outline, rgba(0,0,0,0.0128))",
|
|
136
|
+
"press": "var(--tailwind-color-surface3--press, rgba(0,0,0,0.1936))",
|
|
137
|
+
},
|
|
138
|
+
"surface4": {
|
|
139
|
+
"DEFAULT": "var(--tailwind-color-surface4, rgba(0,0,0,0.32))",
|
|
140
|
+
"disabled": "var(--tailwind-color-surface4--disabled, rgba(0,0,0,0.1024))",
|
|
141
|
+
"hover": "var(--tailwind-color-surface4--hover, rgba(0,0,0,0.3472))",
|
|
142
|
+
"outline": "var(--tailwind-color-surface4--outline, rgba(0,0,0,0.1024))",
|
|
143
|
+
"press": "var(--tailwind-color-surface4--press, rgba(0,0,0,0.4288))",
|
|
144
|
+
},
|
|
145
|
+
"surface6": {
|
|
146
|
+
"DEFAULT": "var(--tailwind-color-surface6, rgba(0,0,0,0.88))",
|
|
147
|
+
"disabled": "var(--tailwind-color-surface6--disabled, rgba(0,0,0,0.2816))",
|
|
148
|
+
"hover": "var(--tailwind-color-surface6--hover, rgba(0,0,0,0.8848))",
|
|
149
|
+
"outline": "var(--tailwind-color-surface6--outline, rgba(0,0,0,0.2816))",
|
|
150
|
+
"press": "var(--tailwind-color-surface6--press, rgba(0,0,0,0.8992))",
|
|
151
|
+
},
|
|
152
|
+
"surface7": {
|
|
153
|
+
"DEFAULT": "var(--tailwind-color-surface7, rgba(0,0,0,0.02))",
|
|
154
|
+
"disabled": "var(--tailwind-color-surface7--disabled, rgba(0,0,0,0.0064))",
|
|
155
|
+
"hover": "var(--tailwind-color-surface7--hover, rgba(0,0,0,0.0592))",
|
|
156
|
+
"outline": "var(--tailwind-color-surface7--outline, rgba(0,0,0,0.0064))",
|
|
157
|
+
"press": "var(--tailwind-color-surface7--press, rgba(0,0,0,0.17679999999999998))",
|
|
158
|
+
},
|
|
159
|
+
"surface8": {
|
|
160
|
+
"DEFAULT": "var(--tailwind-color-surface8, rgba(0,0,0,0.88))",
|
|
161
|
+
"disabled": "var(--tailwind-color-surface8--disabled, rgba(0,0,0,0.2816))",
|
|
162
|
+
"hover": "var(--tailwind-color-surface8--hover, rgba(0,0,0,0.8848))",
|
|
163
|
+
"outline": "var(--tailwind-color-surface8--outline, rgba(0,0,0,0.2816))",
|
|
164
|
+
"press": "var(--tailwind-color-surface8--press, rgba(0,0,0,0.8992))",
|
|
165
|
+
},
|
|
166
|
+
"surface9": {
|
|
167
|
+
"DEFAULT": "var(--tailwind-color-surface9, #ffffff)",
|
|
168
|
+
"disabled": "var(--tailwind-color-surface9--disabled, rgba(255,255,255,0.32))",
|
|
169
|
+
"hover": "var(--tailwind-color-surface9--hover, #f5f5f5)",
|
|
170
|
+
"outline": "var(--tailwind-color-surface9--outline, rgba(255,255,255,0.32))",
|
|
171
|
+
"press": "var(--tailwind-color-surface9--press, #d6d6d6)",
|
|
172
|
+
},
|
|
173
|
+
"text1": {
|
|
174
|
+
"DEFAULT": "var(--tailwind-color-text1, #1f1f1f)",
|
|
175
|
+
"disabled": "var(--tailwind-color-text1--disabled, rgba(31,31,31,0.32))",
|
|
176
|
+
"hover": "var(--tailwind-color-text1--hover, #1e1e1e)",
|
|
177
|
+
"outline": "var(--tailwind-color-text1--outline, rgba(31,31,31,0.32))",
|
|
178
|
+
"press": "var(--tailwind-color-text1--press, #1a1a1a)",
|
|
179
|
+
},
|
|
180
|
+
"text2": {
|
|
181
|
+
"DEFAULT": "var(--tailwind-color-text2, #474747)",
|
|
182
|
+
"disabled": "var(--tailwind-color-text2--disabled, rgba(71,71,71,0.32))",
|
|
183
|
+
"hover": "var(--tailwind-color-text2--hover, #444)",
|
|
184
|
+
"outline": "var(--tailwind-color-text2--outline, rgba(71,71,71,0.32))",
|
|
185
|
+
"press": "var(--tailwind-color-text2--press, #3c3c3c)",
|
|
186
|
+
},
|
|
187
|
+
"text3": {
|
|
188
|
+
"DEFAULT": "var(--tailwind-color-text3, #858585)",
|
|
189
|
+
"disabled": "var(--tailwind-color-text3--disabled, rgba(133,133,133,0.32))",
|
|
190
|
+
"hover": "var(--tailwind-color-text3--hover, #808080)",
|
|
191
|
+
"outline": "var(--tailwind-color-text3--outline, rgba(133,133,133,0.32))",
|
|
192
|
+
"press": "var(--tailwind-color-text3--press, #707070)",
|
|
193
|
+
},
|
|
194
|
+
"text4": {
|
|
195
|
+
"DEFAULT": "var(--tailwind-color-text4, #adadad)",
|
|
196
|
+
"disabled": "var(--tailwind-color-text4--disabled, rgba(173,173,173,0.32))",
|
|
197
|
+
"hover": "var(--tailwind-color-text4--hover, #a6a6a6)",
|
|
198
|
+
"outline": "var(--tailwind-color-text4--outline, rgba(173,173,173,0.32))",
|
|
199
|
+
"press": "var(--tailwind-color-text4--press, #919191)",
|
|
200
|
+
},
|
|
201
|
+
"text5": {
|
|
202
|
+
"DEFAULT": "var(--tailwind-color-text5, #ffffff)",
|
|
203
|
+
"disabled": "var(--tailwind-color-text5--disabled, rgba(255,255,255,0.32))",
|
|
204
|
+
"hover": "var(--tailwind-color-text5--hover, #f5f5f5)",
|
|
205
|
+
"outline": "var(--tailwind-color-text5--outline, rgba(255,255,255,0.32))",
|
|
206
|
+
"press": "var(--tailwind-color-text5--press, #d6d6d6)",
|
|
207
|
+
},
|
|
208
|
+
"transparent": {
|
|
209
|
+
"DEFAULT": "var(--tailwind-color-transparent, rgba(0,0,0,0))",
|
|
210
|
+
"disabled": "var(--tailwind-color-transparent--disabled, rgba(0,0,0,0))",
|
|
211
|
+
"hover": "var(--tailwind-color-transparent--hover, rgba(0,0,0,0.04))",
|
|
212
|
+
"outline": "var(--tailwind-color-transparent--outline, rgba(0,0,0,0))",
|
|
213
|
+
"press": "var(--tailwind-color-transparent--press, rgba(0,0,0,0.16))",
|
|
214
|
+
},
|
|
215
|
+
"updatedItem": {
|
|
216
|
+
"DEFAULT": "var(--tailwind-color-updatedItem, rgba(0,150,250,0.04))",
|
|
217
|
+
"disabled": "var(--tailwind-color-updatedItem--disabled, rgba(0,150,250,0.0128))",
|
|
218
|
+
"hover": "var(--tailwind-color-updatedItem--hover, rgba(0,73,122,0.0784))",
|
|
219
|
+
"outline": "var(--tailwind-color-updatedItem--outline, rgba(0,150,250,0.0128))",
|
|
220
|
+
"press": "var(--tailwind-color-updatedItem--press, rgba(0,26,43,0.1936))",
|
|
221
|
+
},
|
|
222
|
+
"warning": {
|
|
223
|
+
"DEFAULT": "var(--tailwind-color-warning, #ffaf0f)",
|
|
224
|
+
"disabled": "var(--tailwind-color-warning--disabled, rgba(255,175,15,0.32))",
|
|
225
|
+
"hover": "var(--tailwind-color-warning--hover, #f5a80e)",
|
|
226
|
+
"outline": "var(--tailwind-color-warning--outline, rgba(255,175,15,0.32))",
|
|
227
|
+
"press": "var(--tailwind-color-warning--press, #d6930d)",
|
|
228
|
+
},
|
|
229
|
+
"white": "#fff",
|
|
230
|
+
},
|
|
231
|
+
"gap": {
|
|
232
|
+
"fixed": "24px",
|
|
233
|
+
},
|
|
234
|
+
"screens": {
|
|
235
|
+
"screen1": "0px",
|
|
236
|
+
"screen2": "744px",
|
|
237
|
+
"screen3": "952px",
|
|
238
|
+
"screen4": "1160px",
|
|
239
|
+
"screen5": "1368px",
|
|
240
|
+
},
|
|
241
|
+
"spacing": {
|
|
242
|
+
"0": "0px",
|
|
243
|
+
"104": "104px",
|
|
244
|
+
"16": "16px",
|
|
245
|
+
"168": "168px",
|
|
246
|
+
"24": "24px",
|
|
247
|
+
"272": "272px",
|
|
248
|
+
"4": "4px",
|
|
249
|
+
"40": "40px",
|
|
250
|
+
"440": "440px",
|
|
251
|
+
"64": "64px",
|
|
252
|
+
"8": "8px",
|
|
253
|
+
},
|
|
254
|
+
"transitionDuration": {
|
|
255
|
+
"DEFAULT": "0.2s",
|
|
256
|
+
},
|
|
257
|
+
"width": {
|
|
258
|
+
"1/12": "8.333333333333332%",
|
|
259
|
+
"10/12": "83.33333333333334%",
|
|
260
|
+
"11/12": "91.66666666666666%",
|
|
261
|
+
"2/12": "16.666666666666664%",
|
|
262
|
+
"3/12": "25%",
|
|
263
|
+
"4/12": "33.33333333333333%",
|
|
264
|
+
"5/12": "41.66666666666667%",
|
|
265
|
+
"6/12": "50%",
|
|
266
|
+
"7/12": "58.333333333333336%",
|
|
267
|
+
"8/12": "66.66666666666666%",
|
|
268
|
+
"9/12": "75%",
|
|
269
|
+
"auto": "auto",
|
|
270
|
+
"col-span-1": "80px",
|
|
271
|
+
"col-span-10": "1016px",
|
|
272
|
+
"col-span-11": "1120px",
|
|
273
|
+
"col-span-12": "1224px",
|
|
274
|
+
"col-span-2": "184px",
|
|
275
|
+
"col-span-3": "288px",
|
|
276
|
+
"col-span-4": "392px",
|
|
277
|
+
"col-span-5": "496px",
|
|
278
|
+
"col-span-6": "600px",
|
|
279
|
+
"col-span-7": "704px",
|
|
280
|
+
"col-span-8": "808px",
|
|
281
|
+
"col-span-9": "912px",
|
|
282
|
+
"fit": "fit-content",
|
|
283
|
+
"full": "100%",
|
|
284
|
+
"screen": "100vw",
|
|
285
|
+
},
|
|
286
|
+
},
|
|
287
|
+
}
|
|
288
|
+
`;
|
|
289
|
+
|
|
290
|
+
exports[`tailwind.config.js > list of classes 1`] = `
|
|
291
|
+
[
|
|
5
292
|
"sr-only",
|
|
6
293
|
"not-sr-only",
|
|
7
294
|
"pointer-events-none",
|
|
@@ -4222,8 +4509,8 @@ Array [
|
|
|
4222
4509
|
]
|
|
4223
4510
|
`;
|
|
4224
4511
|
|
|
4225
|
-
exports[`tailwind.config.js list of css variables 1`] = `
|
|
4226
|
-
|
|
4512
|
+
exports[`tailwind.config.js > list of css variables 1`] = `
|
|
4513
|
+
[
|
|
4227
4514
|
"--tailwind-color-transparent",
|
|
4228
4515
|
"--tailwind-color-transparent--disabled",
|
|
4229
4516
|
"--tailwind-color-transparent--hover",
|
|
@@ -4354,6 +4641,87 @@ Array [
|
|
|
4354
4641
|
"--tailwind-color-border--hover",
|
|
4355
4642
|
"--tailwind-color-border--press",
|
|
4356
4643
|
"--tailwind-color-border--outline",
|
|
4644
|
+
"--charcoal-transparent",
|
|
4645
|
+
"--charcoal-transparent-hover",
|
|
4646
|
+
"--charcoal-transparent-press",
|
|
4647
|
+
"--charcoal-background1",
|
|
4648
|
+
"--charcoal-background1-hover",
|
|
4649
|
+
"--charcoal-background1-press",
|
|
4650
|
+
"--charcoal-background2",
|
|
4651
|
+
"--charcoal-background2-hover",
|
|
4652
|
+
"--charcoal-background2-press",
|
|
4653
|
+
"--charcoal-icon6",
|
|
4654
|
+
"--charcoal-icon6-hover",
|
|
4655
|
+
"--charcoal-icon6-press",
|
|
4656
|
+
"--charcoal-link1",
|
|
4657
|
+
"--charcoal-link1-hover",
|
|
4658
|
+
"--charcoal-link1-press",
|
|
4659
|
+
"--charcoal-link2",
|
|
4660
|
+
"--charcoal-link2-hover",
|
|
4661
|
+
"--charcoal-link2-press",
|
|
4662
|
+
"--charcoal-surface1",
|
|
4663
|
+
"--charcoal-surface1-hover",
|
|
4664
|
+
"--charcoal-surface1-press",
|
|
4665
|
+
"--charcoal-surface2",
|
|
4666
|
+
"--charcoal-surface2-hover",
|
|
4667
|
+
"--charcoal-surface2-press",
|
|
4668
|
+
"--charcoal-surface3",
|
|
4669
|
+
"--charcoal-surface3-hover",
|
|
4670
|
+
"--charcoal-surface3-press",
|
|
4671
|
+
"--charcoal-surface4",
|
|
4672
|
+
"--charcoal-surface4-hover",
|
|
4673
|
+
"--charcoal-surface4-press",
|
|
4674
|
+
"--charcoal-surface6",
|
|
4675
|
+
"--charcoal-surface6-hover",
|
|
4676
|
+
"--charcoal-surface6-press",
|
|
4677
|
+
"--charcoal-surface7",
|
|
4678
|
+
"--charcoal-surface7-hover",
|
|
4679
|
+
"--charcoal-surface7-press",
|
|
4680
|
+
"--charcoal-surface8",
|
|
4681
|
+
"--charcoal-surface8-hover",
|
|
4682
|
+
"--charcoal-surface8-press",
|
|
4683
|
+
"--charcoal-surface9",
|
|
4684
|
+
"--charcoal-surface9-hover",
|
|
4685
|
+
"--charcoal-surface9-press",
|
|
4686
|
+
"--charcoal-surface10",
|
|
4687
|
+
"--charcoal-surface10-hover",
|
|
4688
|
+
"--charcoal-surface10-press",
|
|
4689
|
+
"--charcoal-text1",
|
|
4690
|
+
"--charcoal-text1-hover",
|
|
4691
|
+
"--charcoal-text1-press",
|
|
4692
|
+
"--charcoal-text2",
|
|
4693
|
+
"--charcoal-text2-hover",
|
|
4694
|
+
"--charcoal-text2-press",
|
|
4695
|
+
"--charcoal-text3",
|
|
4696
|
+
"--charcoal-text3-hover",
|
|
4697
|
+
"--charcoal-text3-press",
|
|
4698
|
+
"--charcoal-text4",
|
|
4699
|
+
"--charcoal-text4-hover",
|
|
4700
|
+
"--charcoal-text4-press",
|
|
4701
|
+
"--charcoal-text5",
|
|
4702
|
+
"--charcoal-text5-hover",
|
|
4703
|
+
"--charcoal-text5-press",
|
|
4704
|
+
"--charcoal-brand",
|
|
4705
|
+
"--charcoal-brand-hover",
|
|
4706
|
+
"--charcoal-brand-press",
|
|
4707
|
+
"--charcoal-assertive",
|
|
4708
|
+
"--charcoal-assertive-hover",
|
|
4709
|
+
"--charcoal-assertive-press",
|
|
4710
|
+
"--charcoal-warning",
|
|
4711
|
+
"--charcoal-warning-hover",
|
|
4712
|
+
"--charcoal-warning-press",
|
|
4713
|
+
"--charcoal-success",
|
|
4714
|
+
"--charcoal-success-hover",
|
|
4715
|
+
"--charcoal-success-press",
|
|
4716
|
+
"--charcoal-updatedItem",
|
|
4717
|
+
"--charcoal-updatedItem-hover",
|
|
4718
|
+
"--charcoal-updatedItem-press",
|
|
4719
|
+
"--charcoal-border",
|
|
4720
|
+
"--charcoal-border-hover",
|
|
4721
|
+
"--charcoal-border-press",
|
|
4722
|
+
"--charcoal-border-default",
|
|
4723
|
+
"--charcoal-border-default-hover",
|
|
4724
|
+
"--charcoal-border-default-press",
|
|
4357
4725
|
"--tailwind-gradient-surface5-top",
|
|
4358
4726
|
"--tailwind-gradient-surface5-top-disabled",
|
|
4359
4727
|
"--tailwind-gradient-surface5-top-hover",
|