@charcoal-ui/tailwind-config 6.0.0-rc.4 → 6.0.0-rc.5
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/tailwind-config",
|
|
3
|
-
"version": "6.0.0-rc.
|
|
3
|
+
"version": "6.0.0-rc.5",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "commonjs",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"tailwindcss": "^3.4.17"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@charcoal-ui/
|
|
30
|
-
"@charcoal-ui/theme": "6.0.0-rc.
|
|
31
|
-
"@charcoal-ui/
|
|
32
|
-
"@charcoal-ui/utils": "6.0.0-rc.
|
|
29
|
+
"@charcoal-ui/icon-files": "6.0.0-rc.5",
|
|
30
|
+
"@charcoal-ui/theme": "6.0.0-rc.5",
|
|
31
|
+
"@charcoal-ui/foundation": "6.0.0-rc.5",
|
|
32
|
+
"@charcoal-ui/utils": "6.0.0-rc.5"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"csstype": ">=3.0.0",
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
|
|
3
|
+
const textDensities = [
|
|
4
|
+
{
|
|
5
|
+
label: 'compact',
|
|
6
|
+
className: 'ch-text-dn-compact',
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
label: 'default',
|
|
10
|
+
className: 'ch-text-dn-default',
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
label: 'cozy',
|
|
14
|
+
className: 'ch-text-dn-cozy',
|
|
15
|
+
},
|
|
16
|
+
] as const
|
|
17
|
+
|
|
18
|
+
const textSamples = [
|
|
19
|
+
{
|
|
20
|
+
label: 'text-caption-s',
|
|
21
|
+
className: 'text-caption-s',
|
|
22
|
+
text: 'キャプション S Caption 123',
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
label: 'text-caption-m',
|
|
26
|
+
className: 'text-caption-m',
|
|
27
|
+
text: 'キャプション M Caption 123',
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
label: 'text-body',
|
|
31
|
+
className: 'text-body',
|
|
32
|
+
text: '本文テキスト Body text 123',
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: 'text-paragraph',
|
|
36
|
+
className: 'text-paragraph',
|
|
37
|
+
text: 'charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。',
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
label: 'text-heading-xxxs',
|
|
41
|
+
className: 'text-heading-xxxs',
|
|
42
|
+
text: '見出し XXXS Heading',
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
label: 'text-heading-xxs',
|
|
46
|
+
className: 'text-heading-xxs',
|
|
47
|
+
text: '見出し XXS Heading',
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
label: 'text-heading-xs',
|
|
51
|
+
className: 'text-heading-xs',
|
|
52
|
+
text: '見出し XS Heading',
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
label: 'text-heading-s',
|
|
56
|
+
className: 'text-heading-s',
|
|
57
|
+
text: '見出し S Heading',
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
label: 'text-heading-m',
|
|
61
|
+
className: 'text-heading-m',
|
|
62
|
+
text: '見出し M Heading',
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
label: 'text-heading-l',
|
|
66
|
+
className: 'text-heading-l',
|
|
67
|
+
text: '見出し L Heading',
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
label: 'text-heading-xl',
|
|
71
|
+
className: 'text-heading-xl',
|
|
72
|
+
text: '見出し XL Heading',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
label: 'text-heading-xxl',
|
|
76
|
+
className: 'text-heading-xxl',
|
|
77
|
+
text: '見出し XXL Heading',
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
label: 'text-heading-xxxl',
|
|
81
|
+
className: 'text-heading-xxxl',
|
|
82
|
+
text: '見出し XXXL Heading',
|
|
83
|
+
},
|
|
84
|
+
] as const
|
|
85
|
+
|
|
86
|
+
export const TextDensity: React.FC = () => (
|
|
87
|
+
<div className="ch-token-v2 overflow-x-auto">
|
|
88
|
+
<div className="grid min-w-[1080px] grid-cols-[168px_repeat(3,minmax(0,1fr))] border-l border-t border-[var(--charcoal-color-border-default)]">
|
|
89
|
+
<div className="bg-container-secondary border-b border-r border-[var(--charcoal-color-border-default)] p-layout-20" />
|
|
90
|
+
{textDensities.map((density) => (
|
|
91
|
+
<div
|
|
92
|
+
key={density.className}
|
|
93
|
+
className="bg-container-secondary border-b border-r border-[var(--charcoal-color-border-default)] p-layout-20"
|
|
94
|
+
>
|
|
95
|
+
<p className="text-caption-m text-text-secondary m-0">
|
|
96
|
+
{density.label}
|
|
97
|
+
</p>
|
|
98
|
+
<p className="text-caption-s text-text-tertiary m-0">
|
|
99
|
+
{density.className}
|
|
100
|
+
</p>
|
|
101
|
+
</div>
|
|
102
|
+
))}
|
|
103
|
+
{textSamples.map((sample) => (
|
|
104
|
+
<React.Fragment key={sample.className}>
|
|
105
|
+
<div className="border-b border-r border-[var(--charcoal-color-border-default)] p-layout-20">
|
|
106
|
+
<p className="text-caption-m text-text-secondary m-0">
|
|
107
|
+
{sample.label}
|
|
108
|
+
</p>
|
|
109
|
+
</div>
|
|
110
|
+
{textDensities.map((density) => (
|
|
111
|
+
<div
|
|
112
|
+
key={`${sample.className}-${density.className}`}
|
|
113
|
+
className={`${density.className} border-b border-r border-[var(--charcoal-color-border-default)] p-layout-20`}
|
|
114
|
+
>
|
|
115
|
+
<p className={`${sample.className} text-text m-0`}>
|
|
116
|
+
{sample.text}
|
|
117
|
+
</p>
|
|
118
|
+
</div>
|
|
119
|
+
))}
|
|
120
|
+
</React.Fragment>
|
|
121
|
+
))}
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Meta, Story } from '@storybook/addon-docs/blocks'
|
|
2
2
|
import { Unstyled } from '@storybook/addon-docs/blocks'
|
|
3
|
-
import { Sizes, HalfLeading } from '.'
|
|
3
|
+
import { Sizes, HalfLeading, TextDensity } from '.'
|
|
4
4
|
|
|
5
5
|
<Meta title="tailwind-config/Typography" component={[Sizes]} />
|
|
6
6
|
|
|
@@ -25,3 +25,13 @@ import { Sizes, HalfLeading } from '.'
|
|
|
25
25
|
<Unstyled>
|
|
26
26
|
<HalfLeading />
|
|
27
27
|
</Unstyled>
|
|
28
|
+
|
|
29
|
+
<br />
|
|
30
|
+
|
|
31
|
+
## Text density (Design Token 2.0)
|
|
32
|
+
|
|
33
|
+
<br />
|
|
34
|
+
|
|
35
|
+
<Unstyled>
|
|
36
|
+
<TextDensity />
|
|
37
|
+
</Unstyled>
|