creoui 0.20.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.
Files changed (13) hide show
  1. package/README.md +167 -0
  2. package/dist/components.css +3984 -0
  3. package/dist/shells/CreoFacetGrid.d.ts +37 -0
  4. package/dist/shells/CreoPageShell.d.ts +42 -0
  5. package/dist/shells/index.css +1 -0
  6. package/dist/shells/index.d.ts +17 -0
  7. package/dist/shells/index.js +45 -0
  8. package/dist/shells/index.js.map +1 -0
  9. package/dist/token-shim.css +133 -0
  10. package/dist/tokens.css +798 -0
  11. package/dist/tokens.d.ts +1038 -0
  12. package/dist/tokens.js +612 -0
  13. package/package.json +61 -0
package/dist/tokens.js ADDED
@@ -0,0 +1,612 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const ColorSurfaceScrim = "oklch(0 0 0 / 0.4)"; // Drawer / side sheet backdrop scrim — theme-agnostic 40% black overlay。 dark theme でも light theme でも統一して暗 backdrop を使う UX 慣習に従う。 中央 modal (dialog) はより重い注意を引くため `scrim-modal` (50%) を使う。
6
+ export const ColorSurfaceScrimModal = "oklch(0 0 0 / 0.5)"; // Dialog (中央 modal) backdrop scrim — 50% black overlay。 drawer (40%) より強く content を後退させ、 user の注意を modal に集中させる。 dark/light theme 共通。
7
+ export const ColorThemesContrastDarkBrandPrimary = "oklch(0.62 0.16 270)"; // Brand primary (base)
8
+ export const ColorThemesContrastDarkBrandPrimaryHover = "oklch(0.67 0.17 270)"; // Brand primary — hover
9
+ export const ColorThemesContrastDarkBrandPrimaryActive = "oklch(0.57 0.15 270)"; // Brand primary — active / pressed
10
+ export const ColorThemesContrastDarkBrandPrimarySubtle = "oklch(0.24 0.06 270)"; // Brand primary — subtle tint surface
11
+ export const ColorThemesContrastDarkBrandSecondary = "oklch(0.72 0.18 335)"; // Brand secondary (base)
12
+ export const ColorThemesContrastDarkBrandSecondaryHover =
13
+ "oklch(0.77 0.19 335)"; // Brand secondary — hover
14
+ export const ColorThemesContrastDarkBrandSecondaryActive =
15
+ "oklch(0.67 0.17 335)"; // Brand secondary — active / pressed
16
+ export const ColorThemesContrastDarkBrandSecondarySubtle =
17
+ "oklch(0.24 0.06 335)"; // Brand secondary — subtle tint surface
18
+ export const ColorThemesContrastDarkSemanticSuccess = "oklch(0.7 0.14 160)"; // Semantic success (base)
19
+ export const ColorThemesContrastDarkSemanticSuccessHover =
20
+ "oklch(0.75 0.15 160)"; // Semantic success — hover
21
+ export const ColorThemesContrastDarkSemanticSuccessActive =
22
+ "oklch(0.65 0.13 160)"; // Semantic success — active
23
+ export const ColorThemesContrastDarkSemanticSuccessSubtle =
24
+ "oklch(0.24 0.05 160)"; // Semantic success — subtle surface
25
+ export const ColorThemesContrastDarkSemanticSuccessText = "oklch(0.82 0.1 160)"; // Semantic success — text on tinted bg
26
+ export const ColorThemesContrastDarkSemanticWarning = "oklch(0.75 0.13 85)"; // Semantic warning (base)
27
+ export const ColorThemesContrastDarkSemanticWarningHover = "oklch(0.8 0.14 85)"; // Semantic warning — hover
28
+ export const ColorThemesContrastDarkSemanticWarningActive =
29
+ "oklch(0.7 0.12 85)"; // Semantic warning — active
30
+ export const ColorThemesContrastDarkSemanticWarningSubtle =
31
+ "oklch(0.24 0.05 85)"; // Semantic warning — subtle surface
32
+ export const ColorThemesContrastDarkSemanticWarningText = "oklch(0.85 0.1 85)"; // Semantic warning — text on tinted bg
33
+ export const ColorThemesContrastDarkSemanticError = "oklch(0.68 0.17 15)"; // Semantic error (base)
34
+ export const ColorThemesContrastDarkSemanticErrorHover = "oklch(0.73 0.18 15)"; // Semantic error — hover
35
+ export const ColorThemesContrastDarkSemanticErrorActive = "oklch(0.63 0.16 15)"; // Semantic error — active
36
+ export const ColorThemesContrastDarkSemanticErrorSubtle = "oklch(0.24 0.06 15)"; // Semantic error — subtle surface
37
+ export const ColorThemesContrastDarkSemanticErrorText = "oklch(0.83 0.12 15)"; // Semantic error — text on tinted bg
38
+ export const ColorThemesContrastDarkSemanticInfo = "oklch(0.8 0.1 195)"; // Semantic info (base)
39
+ export const ColorThemesContrastDarkSemanticInfoHover = "oklch(0.85 0.11 195)"; // Semantic info — hover
40
+ export const ColorThemesContrastDarkSemanticInfoActive = "oklch(0.75 0.09 195)"; // Semantic info — active
41
+ export const ColorThemesContrastDarkSemanticInfoSubtle = "oklch(0.24 0.04 195)"; // Semantic info — subtle surface
42
+ export const ColorThemesContrastDarkSemanticInfoText = "oklch(0.88 0.08 195)"; // Semantic info — text on tinted bg
43
+ export const ColorThemesContrastDarkSurfaceBgBase = "oklch(0.16 0.06 280)"; // Root background — page canvas
44
+ export const ColorThemesContrastDarkSurfaceBgSubtle = "oklch(0.19 0.06 280)"; // Subtle background — panels, sections
45
+ export const ColorThemesContrastDarkSurfaceBgEmphasis = "oklch(0.28 0.05 280)"; // Emphasized background — highlighted regions
46
+ export const ColorThemesContrastDarkSurfaceSurface = "oklch(0.2 0.06 280)"; // Card / modal / elevated container surface
47
+ export const ColorThemesContrastDarkSurfaceBorder = "oklch(0.32 0.04 280)"; // Default border / divider
48
+ export const ColorThemesContrastDarkSurfaceBorderSubtle =
49
+ "oklch(0.26 0.03 280)"; // Subtle border — quiet separators
50
+ export const ColorThemesContrastDarkTextPrimary = "oklch(0.95 0.01 280)"; // Primary foreground text
51
+ export const ColorThemesContrastDarkTextSecondary = "oklch(0.75 0.01 280)"; // Secondary text — supporting copy
52
+ export const ColorThemesContrastDarkTextTertiary = "oklch(0.58 0.01 280)"; // Tertiary text — captions, hints
53
+ export const ColorThemesContrastDarkTextDisabled = "oklch(0.42 0.01 280)"; // Disabled text
54
+ export const ColorThemesContrastDarkTextInverse = "oklch(0.95 0.01 280)"; // Inverse text — on dark surfaces
55
+ export const ColorThemesContrastDarkShadowBase = "oklch(0 0 0 / 0.4)"; // Shadow tint — default
56
+ export const ColorThemesContrastDarkShadowStrong = "oklch(0 0 0 / 0.6)"; // Shadow tint — strong
57
+ export const ColorThemesContrastDarkFocusRingColor = "oklch(0.78 0.20 270)"; // Focus ring color — outer 2px solid ring (contrast-dark、 high chroma で paradox identity を保持しつつ luminance UP で AAA contrast)
58
+ export const ColorThemesContrastDarkFocusRingHalo =
59
+ "oklch(0.78 0.20 270 / 0.20)"; // Focus halo — inner 4px subtle bg tint (alpha 0.20 で contrast theme assertive)
60
+ export const ColorThemesContrastDarkGradientHero =
61
+ "linear-gradient(135deg, oklch(0.2 0.08 280) 0%, oklch(0.18 0.06 300) 50%, oklch(0.22 0.08 335) 100%)"; // Hero gradient — marketing / splash surfaces
62
+ export const ColorThemesContrastLightBrandPrimary = "oklch(0.52 0.18 270)"; // Brand primary (base)
63
+ export const ColorThemesContrastLightBrandPrimaryHover = "oklch(0.47 0.19 270)"; // Brand primary — hover
64
+ export const ColorThemesContrastLightBrandPrimaryActive = "oklch(0.42 0.2 270)"; // Brand primary — active / pressed
65
+ export const ColorThemesContrastLightBrandPrimarySubtle =
66
+ "oklch(0.94 0.05 270)"; // Brand primary — subtle tint surface
67
+ export const ColorThemesContrastLightBrandSecondary = "oklch(0.62 0.2 335)"; // Brand secondary (base)
68
+ export const ColorThemesContrastLightBrandSecondaryHover =
69
+ "oklch(0.57 0.21 335)"; // Brand secondary — hover
70
+ export const ColorThemesContrastLightBrandSecondaryActive =
71
+ "oklch(0.52 0.22 335)"; // Brand secondary — active / pressed
72
+ export const ColorThemesContrastLightBrandSecondarySubtle =
73
+ "oklch(0.95 0.05 335)"; // Brand secondary — subtle tint surface
74
+ export const ColorThemesContrastLightSemanticSuccess = "oklch(0.6 0.16 160)"; // Semantic success (base)
75
+ export const ColorThemesContrastLightSemanticSuccessHover =
76
+ "oklch(0.55 0.17 160)"; // Semantic success — hover
77
+ export const ColorThemesContrastLightSemanticSuccessActive =
78
+ "oklch(0.5 0.18 160)"; // Semantic success — active
79
+ export const ColorThemesContrastLightSemanticSuccessSubtle =
80
+ "oklch(0.95 0.04 160)"; // Semantic success — subtle surface
81
+ export const ColorThemesContrastLightSemanticSuccessText =
82
+ "oklch(0.35 0.12 160)"; // Semantic success — text on tinted bg
83
+ export const ColorThemesContrastLightSemanticWarning = "oklch(0.78 0.15 85)"; // Semantic warning (base)
84
+ export const ColorThemesContrastLightSemanticWarningHover =
85
+ "oklch(0.73 0.16 85)"; // Semantic warning — hover
86
+ export const ColorThemesContrastLightSemanticWarningActive =
87
+ "oklch(0.68 0.17 85)"; // Semantic warning — active
88
+ export const ColorThemesContrastLightSemanticWarningSubtle =
89
+ "oklch(0.96 0.05 85)"; // Semantic warning — subtle surface
90
+ export const ColorThemesContrastLightSemanticWarningText = "oklch(0.4 0.12 85)"; // Semantic warning — text on tinted bg
91
+ export const ColorThemesContrastLightSemanticError = "oklch(0.6 0.2 15)"; // Semantic error (base)
92
+ export const ColorThemesContrastLightSemanticErrorHover = "oklch(0.55 0.21 15)"; // Semantic error — hover
93
+ export const ColorThemesContrastLightSemanticErrorActive = "oklch(0.5 0.22 15)"; // Semantic error — active
94
+ export const ColorThemesContrastLightSemanticErrorSubtle =
95
+ "oklch(0.95 0.04 15)"; // Semantic error — subtle surface
96
+ export const ColorThemesContrastLightSemanticErrorText = "oklch(0.4 0.15 15)"; // Semantic error — text on tinted bg
97
+ export const ColorThemesContrastLightSemanticInfo = "oklch(0.6 0.12 195)"; // Semantic info (base)
98
+ export const ColorThemesContrastLightSemanticInfoHover = "oklch(0.55 0.13 195)"; // Semantic info — hover
99
+ export const ColorThemesContrastLightSemanticInfoActive = "oklch(0.5 0.14 195)"; // Semantic info — active
100
+ export const ColorThemesContrastLightSemanticInfoSubtle =
101
+ "oklch(0.95 0.04 195)"; // Semantic info — subtle surface
102
+ export const ColorThemesContrastLightSemanticInfoText = "oklch(0.35 0.1 195)"; // Semantic info — text on tinted bg
103
+ export const ColorThemesContrastLightSurfaceBgBase = "oklch(0.98 0.008 280)"; // Root background — page canvas
104
+ export const ColorThemesContrastLightSurfaceBgSubtle = "oklch(0.96 0.01 280)"; // Subtle background — panels, sections
105
+ export const ColorThemesContrastLightSurfaceBgEmphasis =
106
+ "oklch(0.88 0.015 280)"; // Emphasized background — highlighted regions
107
+ export const ColorThemesContrastLightSurfaceSurface = "oklch(1 0 0)"; // Card / modal / elevated container surface
108
+ export const ColorThemesContrastLightSurfaceBorder = "oklch(0.86 0.015 280)"; // Default border / divider
109
+ export const ColorThemesContrastLightSurfaceBorderSubtle =
110
+ "oklch(0.91 0.01 280)"; // Subtle border — quiet separators
111
+ export const ColorThemesContrastLightTextPrimary = "oklch(0.18 0.02 280)"; // Primary foreground text
112
+ export const ColorThemesContrastLightTextSecondary = "oklch(0.38 0.02 280)"; // Secondary text — supporting copy
113
+ export const ColorThemesContrastLightTextTertiary = "oklch(0.52 0.01 280)"; // Tertiary text — captions, hints
114
+ export const ColorThemesContrastLightTextDisabled = "oklch(0.68 0.01 280)"; // Disabled text
115
+ export const ColorThemesContrastLightTextInverse = "oklch(0.98 0 0)"; // Inverse text — on dark surfaces
116
+ export const ColorThemesContrastLightShadowBase = "oklch(0.2 0.03 280 / 0.1)"; // Shadow tint — default
117
+ export const ColorThemesContrastLightShadowStrong = "oklch(0.2 0.03 280 / 0.2)"; // Shadow tint — strong
118
+ export const ColorThemesContrastLightFocusRingColor = "oklch(0.40 0.22 270)"; // Focus ring color — outer 2px solid ring (contrast-light、 high chroma + luminance DOWN で AAA contrast on light bg)
119
+ export const ColorThemesContrastLightFocusRingHalo =
120
+ "oklch(0.40 0.22 270 / 0.20)"; // Focus halo — inner 4px subtle bg tint (alpha 0.20 で contrast theme assertive)
121
+ export const ColorThemesContrastLightGradientHero =
122
+ "linear-gradient(135deg, oklch(0.94 0.04 270) 0%, oklch(0.96 0.03 300) 50%, oklch(0.92 0.05 335) 100%)"; // Hero gradient — marketing / splash surfaces
123
+ export const ColorThemesMintDarkBrandPrimary = "oklch(0.75 0.12 160)"; // Brand primary (base)
124
+ export const ColorThemesMintDarkBrandPrimaryHover = "oklch(0.8 0.13 160)"; // Brand primary — hover
125
+ export const ColorThemesMintDarkBrandPrimaryActive = "oklch(0.7 0.11 160)"; // Brand primary — active / pressed
126
+ export const ColorThemesMintDarkBrandPrimarySubtle = "oklch(0.25 0.05 160)"; // Brand primary — subtle tint surface
127
+ export const ColorThemesMintDarkBrandSecondary = "oklch(0.7 0.12 300)"; // Brand secondary (base)
128
+ export const ColorThemesMintDarkBrandSecondaryHover = "oklch(0.75 0.13 300)"; // Brand secondary — hover
129
+ export const ColorThemesMintDarkBrandSecondaryActive = "oklch(0.65 0.11 300)"; // Brand secondary — active / pressed
130
+ export const ColorThemesMintDarkBrandSecondarySubtle = "oklch(0.25 0.05 300)"; // Brand secondary — subtle tint surface
131
+ export const ColorThemesMintDarkSemanticSuccess = "oklch(0.7 0.15 145)"; // Semantic success (base)
132
+ export const ColorThemesMintDarkSemanticSuccessHover = "oklch(0.75 0.16 145)"; // Semantic success — hover
133
+ export const ColorThemesMintDarkSemanticSuccessActive = "oklch(0.65 0.14 145)"; // Semantic success — active
134
+ export const ColorThemesMintDarkSemanticSuccessSubtle = "oklch(0.25 0.06 145)"; // Semantic success — subtle surface
135
+ export const ColorThemesMintDarkSemanticSuccessText = "oklch(0.8 0.12 145)"; // Semantic success — text on tinted bg
136
+ export const ColorThemesMintDarkSemanticWarning = "oklch(0.75 0.14 85)"; // Semantic warning (base)
137
+ export const ColorThemesMintDarkSemanticWarningHover = "oklch(0.8 0.15 85)"; // Semantic warning — hover
138
+ export const ColorThemesMintDarkSemanticWarningActive = "oklch(0.7 0.13 85)"; // Semantic warning — active
139
+ export const ColorThemesMintDarkSemanticWarningSubtle = "oklch(0.25 0.06 85)"; // Semantic warning — subtle surface
140
+ export const ColorThemesMintDarkSemanticWarningText = "oklch(0.85 0.1 85)"; // Semantic warning — text on tinted bg
141
+ export const ColorThemesMintDarkSemanticError = "oklch(0.7 0.18 25)"; // Semantic error (base)
142
+ export const ColorThemesMintDarkSemanticErrorHover = "oklch(0.75 0.19 25)"; // Semantic error — hover
143
+ export const ColorThemesMintDarkSemanticErrorActive = "oklch(0.65 0.17 25)"; // Semantic error — active
144
+ export const ColorThemesMintDarkSemanticErrorSubtle = "oklch(0.25 0.06 25)"; // Semantic error — subtle surface
145
+ export const ColorThemesMintDarkSemanticErrorText = "oklch(0.85 0.12 25)"; // Semantic error — text on tinted bg
146
+ export const ColorThemesMintDarkSemanticInfo = "oklch(0.7 0.12 240)"; // Semantic info (base)
147
+ export const ColorThemesMintDarkSemanticInfoHover = "oklch(0.75 0.13 240)"; // Semantic info — hover
148
+ export const ColorThemesMintDarkSemanticInfoActive = "oklch(0.65 0.11 240)"; // Semantic info — active
149
+ export const ColorThemesMintDarkSemanticInfoSubtle = "oklch(0.25 0.05 240)"; // Semantic info — subtle surface
150
+ export const ColorThemesMintDarkSemanticInfoText = "oklch(0.85 0.1 240)"; // Semantic info — text on tinted bg
151
+ export const ColorThemesMintDarkSurfaceBgBase = "oklch(0.15 0.02 260)"; // Root background — page canvas
152
+ export const ColorThemesMintDarkSurfaceBgSubtle = "oklch(0.18 0.02 260)"; // Subtle background — panels, sections
153
+ export const ColorThemesMintDarkSurfaceBgEmphasis = "oklch(0.28 0.02 260)"; // Emphasized background — highlighted regions
154
+ export const ColorThemesMintDarkSurfaceSurface = "oklch(0.2 0.02 260)"; // Card / modal / elevated container surface
155
+ export const ColorThemesMintDarkSurfaceBorder = "oklch(0.3 0.02 260)"; // Default border / divider
156
+ export const ColorThemesMintDarkSurfaceBorderSubtle = "oklch(0.25 0.015 260)"; // Subtle border — quiet separators
157
+ export const ColorThemesMintDarkTextPrimary = "oklch(0.95 0.01 260)"; // Primary foreground text
158
+ export const ColorThemesMintDarkTextSecondary = "oklch(0.75 0.01 260)"; // Secondary text — supporting copy
159
+ export const ColorThemesMintDarkTextTertiary = "oklch(0.6 0.01 260)"; // Tertiary text — captions, hints
160
+ export const ColorThemesMintDarkTextDisabled = "oklch(0.45 0.01 260)"; // Disabled text
161
+ export const ColorThemesMintDarkTextInverse = "oklch(0.15 0.02 260)"; // Inverse text — on dark surfaces
162
+ export const ColorThemesMintDarkShadowBase = "oklch(0 0 0 / 0.3)"; // Shadow tint — default
163
+ export const ColorThemesMintDarkShadowStrong = "oklch(0 0 0 / 0.5)"; // Shadow tint — strong
164
+ export const ColorThemesMintDarkGradientHero =
165
+ "linear-gradient(135deg, oklch(0.2 0.04 160) 0%, oklch(0.18 0.03 175) 50%, oklch(0.22 0.05 165) 100%)"; // Hero gradient — marketing / splash surfaces
166
+ export const ColorThemesMintDarkFocusRingColor = "oklch(0.85 0.14 160)"; // Focus ring color — outer 2px solid ring (mint-dark、 brand 同 hue + luminance UP で AAA contrast 確保)
167
+ export const ColorThemesMintDarkFocusRingHalo = "oklch(0.85 0.14 160 / 0.18)"; // Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出
168
+ export const ColorThemesMintLightBrandPrimary = "oklch(0.85 0.14 160)"; // Brand primary (base)
169
+ export const ColorThemesMintLightBrandPrimaryHover = "oklch(0.8 0.15 160)"; // Brand primary — hover
170
+ export const ColorThemesMintLightBrandPrimaryActive = "oklch(0.75 0.16 160)"; // Brand primary — active / pressed
171
+ export const ColorThemesMintLightBrandPrimarySubtle = "oklch(0.95 0.05 160)"; // Brand primary — subtle tint surface
172
+ export const ColorThemesMintLightBrandSecondary = "oklch(0.65 0.15 300)"; // Brand secondary (base)
173
+ export const ColorThemesMintLightBrandSecondaryHover = "oklch(0.6 0.16 300)"; // Brand secondary — hover
174
+ export const ColorThemesMintLightBrandSecondaryActive = "oklch(0.55 0.17 300)"; // Brand secondary — active / pressed
175
+ export const ColorThemesMintLightBrandSecondarySubtle = "oklch(0.95 0.05 300)"; // Brand secondary — subtle tint surface
176
+ export const ColorThemesMintLightSemanticSuccess = "oklch(0.75 0.18 145)"; // Semantic success (base)
177
+ export const ColorThemesMintLightSemanticSuccessHover = "oklch(0.7 0.19 145)"; // Semantic success — hover
178
+ export const ColorThemesMintLightSemanticSuccessActive = "oklch(0.65 0.2 145)"; // Semantic success — active
179
+ export const ColorThemesMintLightSemanticSuccessSubtle = "oklch(0.95 0.05 145)"; // Semantic success — subtle surface
180
+ export const ColorThemesMintLightSemanticSuccessText = "oklch(0.35 0.12 145)"; // Semantic success — text on tinted bg
181
+ export const ColorThemesMintLightSemanticWarning = "oklch(0.8 0.16 85)"; // Semantic warning (base)
182
+ export const ColorThemesMintLightSemanticWarningHover = "oklch(0.75 0.17 85)"; // Semantic warning — hover
183
+ export const ColorThemesMintLightSemanticWarningActive = "oklch(0.7 0.18 85)"; // Semantic warning — active
184
+ export const ColorThemesMintLightSemanticWarningSubtle = "oklch(0.95 0.06 85)"; // Semantic warning — subtle surface
185
+ export const ColorThemesMintLightSemanticWarningText = "oklch(0.4 0.12 85)"; // Semantic warning — text on tinted bg
186
+ export const ColorThemesMintLightSemanticError = "oklch(0.65 0.2 25)"; // Semantic error (base)
187
+ export const ColorThemesMintLightSemanticErrorHover = "oklch(0.6 0.21 25)"; // Semantic error — hover
188
+ export const ColorThemesMintLightSemanticErrorActive = "oklch(0.55 0.22 25)"; // Semantic error — active
189
+ export const ColorThemesMintLightSemanticErrorSubtle = "oklch(0.95 0.05 25)"; // Semantic error — subtle surface
190
+ export const ColorThemesMintLightSemanticErrorText = "oklch(0.4 0.15 25)"; // Semantic error — text on tinted bg
191
+ export const ColorThemesMintLightSemanticInfo = "oklch(0.7 0.15 240)"; // Semantic info (base)
192
+ export const ColorThemesMintLightSemanticInfoHover = "oklch(0.65 0.16 240)"; // Semantic info — hover
193
+ export const ColorThemesMintLightSemanticInfoActive = "oklch(0.6 0.17 240)"; // Semantic info — active
194
+ export const ColorThemesMintLightSemanticInfoSubtle = "oklch(0.95 0.04 240)"; // Semantic info — subtle surface
195
+ export const ColorThemesMintLightSemanticInfoText = "oklch(0.4 0.12 240)"; // Semantic info — text on tinted bg
196
+ export const ColorThemesMintLightSurfaceBgBase = "oklch(0.99 0 0)"; // Root background — page canvas
197
+ export const ColorThemesMintLightSurfaceBgSubtle = "oklch(0.97 0.005 260)"; // Subtle background — panels, sections
198
+ export const ColorThemesMintLightSurfaceBgEmphasis = "oklch(0.9 0.01 260)"; // Emphasized background — highlighted regions
199
+ export const ColorThemesMintLightSurfaceSurface = "oklch(1 0 0)"; // Card / modal / elevated container surface
200
+ export const ColorThemesMintLightSurfaceBorder = "oklch(0.88 0.01 260)"; // Default border / divider
201
+ export const ColorThemesMintLightSurfaceBorderSubtle = "oklch(0.92 0.005 260)"; // Subtle border — quiet separators
202
+ export const ColorThemesMintLightTextPrimary = "oklch(0.2 0.02 260)"; // Primary foreground text
203
+ export const ColorThemesMintLightTextSecondary = "oklch(0.4 0.02 260)"; // Secondary text — supporting copy
204
+ export const ColorThemesMintLightTextTertiary = "oklch(0.55 0.01 260)"; // Tertiary text — captions, hints
205
+ export const ColorThemesMintLightTextDisabled = "oklch(0.7 0.01 260)"; // Disabled text
206
+ export const ColorThemesMintLightTextInverse = "oklch(0.98 0 0)"; // Inverse text — on dark surfaces
207
+ export const ColorThemesMintLightShadowBase = "oklch(0.2 0.02 260 / 0.08)"; // Shadow tint — default
208
+ export const ColorThemesMintLightShadowStrong = "oklch(0.2 0.02 260 / 0.15)"; // Shadow tint — strong
209
+ export const ColorThemesMintLightFocusRingColor = "oklch(0.45 0.16 160)"; // Focus ring color — outer 2px solid ring (mint-light、 brand 同 hue + luminance DOWN で AAA contrast on light bg)
210
+ export const ColorThemesMintLightFocusRingHalo = "oklch(0.45 0.16 160 / 0.18)"; // Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出
211
+ export const ColorThemesMintLightGradientHero =
212
+ "linear-gradient(135deg, oklch(0.92 0.08 160) 0%, oklch(0.94 0.06 175) 50%, oklch(0.9 0.1 165) 100%)"; // Hero gradient — marketing / splash surfaces
213
+ export const ColorThemesOldschoolDarkBrandPrimary = "oklch(0.68 0.12 145)"; // Brand primary (base)
214
+ export const ColorThemesOldschoolDarkBrandPrimaryHover = "oklch(0.73 0.13 145)"; // Brand primary — hover
215
+ export const ColorThemesOldschoolDarkBrandPrimaryActive =
216
+ "oklch(0.63 0.11 145)"; // Brand primary — active / pressed
217
+ export const ColorThemesOldschoolDarkBrandPrimarySubtle =
218
+ "oklch(0.24 0.04 145)"; // Brand primary — subtle tint surface
219
+ export const ColorThemesOldschoolDarkBrandSecondary = "oklch(0.75 0.16 55)"; // Brand secondary (base)
220
+ export const ColorThemesOldschoolDarkBrandSecondaryHover = "oklch(0.8 0.17 55)"; // Brand secondary — hover
221
+ export const ColorThemesOldschoolDarkBrandSecondaryActive =
222
+ "oklch(0.7 0.15 55)"; // Brand secondary — active / pressed
223
+ export const ColorThemesOldschoolDarkBrandSecondarySubtle =
224
+ "oklch(0.24 0.05 55)"; // Brand secondary — subtle tint surface
225
+ export const ColorThemesOldschoolDarkSemanticSuccess = "oklch(0.68 0.12 140)"; // Semantic success (base)
226
+ export const ColorThemesOldschoolDarkSemanticSuccessHover =
227
+ "oklch(0.73 0.13 140)"; // Semantic success — hover
228
+ export const ColorThemesOldschoolDarkSemanticSuccessActive =
229
+ "oklch(0.63 0.11 140)"; // Semantic success — active
230
+ export const ColorThemesOldschoolDarkSemanticSuccessSubtle =
231
+ "oklch(0.24 0.04 140)"; // Semantic success — subtle surface
232
+ export const ColorThemesOldschoolDarkSemanticSuccessText = "oklch(0.8 0.1 140)"; // Semantic success — text on tinted bg
233
+ export const ColorThemesOldschoolDarkSemanticWarning = "oklch(0.78 0.13 75)"; // Semantic warning (base)
234
+ export const ColorThemesOldschoolDarkSemanticWarningHover =
235
+ "oklch(0.83 0.14 75)"; // Semantic warning — hover
236
+ export const ColorThemesOldschoolDarkSemanticWarningActive =
237
+ "oklch(0.73 0.12 75)"; // Semantic warning — active
238
+ export const ColorThemesOldschoolDarkSemanticWarningSubtle =
239
+ "oklch(0.24 0.05 75)"; // Semantic warning — subtle surface
240
+ export const ColorThemesOldschoolDarkSemanticWarningText = "oklch(0.85 0.1 75)"; // Semantic warning — text on tinted bg
241
+ export const ColorThemesOldschoolDarkSemanticError = "oklch(0.68 0.16 20)"; // Semantic error (base)
242
+ export const ColorThemesOldschoolDarkSemanticErrorHover = "oklch(0.73 0.17 20)"; // Semantic error — hover
243
+ export const ColorThemesOldschoolDarkSemanticErrorActive =
244
+ "oklch(0.63 0.15 20)"; // Semantic error — active
245
+ export const ColorThemesOldschoolDarkSemanticErrorSubtle =
246
+ "oklch(0.24 0.05 20)"; // Semantic error — subtle surface
247
+ export const ColorThemesOldschoolDarkSemanticErrorText = "oklch(0.83 0.12 20)"; // Semantic error — text on tinted bg
248
+ export const ColorThemesOldschoolDarkSemanticInfo = "oklch(0.7 0.1 220)"; // Semantic info (base)
249
+ export const ColorThemesOldschoolDarkSemanticInfoHover = "oklch(0.75 0.11 220)"; // Semantic info — hover
250
+ export const ColorThemesOldschoolDarkSemanticInfoActive =
251
+ "oklch(0.65 0.09 220)"; // Semantic info — active
252
+ export const ColorThemesOldschoolDarkSemanticInfoSubtle =
253
+ "oklch(0.24 0.04 220)"; // Semantic info — subtle surface
254
+ export const ColorThemesOldschoolDarkSemanticInfoText = "oklch(0.82 0.08 220)"; // Semantic info — text on tinted bg
255
+ export const ColorThemesOldschoolDarkSurfaceBgBase = "oklch(0.16 0.02 80)"; // Root background — page canvas
256
+ export const ColorThemesOldschoolDarkSurfaceBgSubtle = "oklch(0.19 0.02 80)"; // Subtle background — panels, sections
257
+ export const ColorThemesOldschoolDarkSurfaceBgEmphasis = "oklch(0.28 0.02 80)"; // Emphasized background — highlighted regions
258
+ export const ColorThemesOldschoolDarkSurfaceSurface = "oklch(0.2 0.02 80)"; // Card / modal / elevated container surface
259
+ export const ColorThemesOldschoolDarkSurfaceBorder = "oklch(0.32 0.02 80)"; // Default border / divider
260
+ export const ColorThemesOldschoolDarkSurfaceBorderSubtle =
261
+ "oklch(0.26 0.015 80)"; // Subtle border — quiet separators
262
+ export const ColorThemesOldschoolDarkTextPrimary = "oklch(0.92 0.01 80)"; // Primary foreground text
263
+ export const ColorThemesOldschoolDarkTextSecondary = "oklch(0.72 0.01 80)"; // Secondary text — supporting copy
264
+ export const ColorThemesOldschoolDarkTextTertiary = "oklch(0.55 0.01 80)"; // Tertiary text — captions, hints
265
+ export const ColorThemesOldschoolDarkTextDisabled = "oklch(0.42 0.01 80)"; // Disabled text
266
+ export const ColorThemesOldschoolDarkTextInverse = "oklch(0.15 0.02 80)"; // Inverse text — on dark surfaces
267
+ export const ColorThemesOldschoolDarkShadowBase = "oklch(0 0 0 / 0.35)"; // Shadow tint — default
268
+ export const ColorThemesOldschoolDarkShadowStrong = "oklch(0 0 0 / 0.55)"; // Shadow tint — strong
269
+ export const ColorThemesOldschoolDarkFocusRingColor = "oklch(0.82 0.14 145)"; // Focus ring color — outer 2px solid ring (oldschool-dark、 olive hue + luminance UP で AAA contrast)
270
+ export const ColorThemesOldschoolDarkFocusRingHalo =
271
+ "oklch(0.82 0.14 145 / 0.18)"; // Focus halo — inner 4px subtle bg tint、 retro/corporate identity 保持
272
+ export const ColorThemesOldschoolDarkGradientHero =
273
+ "linear-gradient(135deg, oklch(0.2 0.03 80) 0%, oklch(0.18 0.02 70) 50%, oklch(0.22 0.04 90) 100%)"; // Hero gradient — marketing / splash surfaces
274
+ export const ColorThemesOldschoolLightBrandPrimary = "oklch(0.55 0.14 145)"; // Brand primary (base)
275
+ export const ColorThemesOldschoolLightBrandPrimaryHover = "oklch(0.5 0.15 145)"; // Brand primary — hover
276
+ export const ColorThemesOldschoolLightBrandPrimaryActive =
277
+ "oklch(0.45 0.16 145)"; // Brand primary — active / pressed
278
+ export const ColorThemesOldschoolLightBrandPrimarySubtle =
279
+ "oklch(0.94 0.04 145)"; // Brand primary — subtle tint surface
280
+ export const ColorThemesOldschoolLightBrandSecondary = "oklch(0.7 0.18 55)"; // Brand secondary (base)
281
+ export const ColorThemesOldschoolLightBrandSecondaryHover =
282
+ "oklch(0.65 0.19 55)"; // Brand secondary — hover
283
+ export const ColorThemesOldschoolLightBrandSecondaryActive =
284
+ "oklch(0.6 0.2 55)"; // Brand secondary — active / pressed
285
+ export const ColorThemesOldschoolLightBrandSecondarySubtle =
286
+ "oklch(0.95 0.05 55)"; // Brand secondary — subtle tint surface
287
+ export const ColorThemesOldschoolLightSemanticSuccess = "oklch(0.6 0.14 140)"; // Semantic success (base)
288
+ export const ColorThemesOldschoolLightSemanticSuccessHover =
289
+ "oklch(0.55 0.15 140)"; // Semantic success — hover
290
+ export const ColorThemesOldschoolLightSemanticSuccessActive =
291
+ "oklch(0.5 0.16 140)"; // Semantic success — active
292
+ export const ColorThemesOldschoolLightSemanticSuccessSubtle =
293
+ "oklch(0.94 0.04 140)"; // Semantic success — subtle surface
294
+ export const ColorThemesOldschoolLightSemanticSuccessText =
295
+ "oklch(0.35 0.1 140)"; // Semantic success — text on tinted bg
296
+ export const ColorThemesOldschoolLightSemanticWarning = "oklch(0.78 0.14 75)"; // Semantic warning (base)
297
+ export const ColorThemesOldschoolLightSemanticWarningHover =
298
+ "oklch(0.73 0.15 75)"; // Semantic warning — hover
299
+ export const ColorThemesOldschoolLightSemanticWarningActive =
300
+ "oklch(0.68 0.16 75)"; // Semantic warning — active
301
+ export const ColorThemesOldschoolLightSemanticWarningSubtle =
302
+ "oklch(0.96 0.05 75)"; // Semantic warning — subtle surface
303
+ export const ColorThemesOldschoolLightSemanticWarningText =
304
+ "oklch(0.42 0.1 75)"; // Semantic warning — text on tinted bg
305
+ export const ColorThemesOldschoolLightSemanticError = "oklch(0.62 0.18 20)"; // Semantic error (base)
306
+ export const ColorThemesOldschoolLightSemanticErrorHover =
307
+ "oklch(0.57 0.19 20)"; // Semantic error — hover
308
+ export const ColorThemesOldschoolLightSemanticErrorActive =
309
+ "oklch(0.52 0.2 20)"; // Semantic error — active
310
+ export const ColorThemesOldschoolLightSemanticErrorSubtle =
311
+ "oklch(0.95 0.04 20)"; // Semantic error — subtle surface
312
+ export const ColorThemesOldschoolLightSemanticErrorText = "oklch(0.4 0.13 20)"; // Semantic error — text on tinted bg
313
+ export const ColorThemesOldschoolLightSemanticInfo = "oklch(0.64 0.11 220)"; // Semantic info (base)
314
+ export const ColorThemesOldschoolLightSemanticInfoHover =
315
+ "oklch(0.59 0.12 220)"; // Semantic info — hover
316
+ export const ColorThemesOldschoolLightSemanticInfoActive =
317
+ "oklch(0.54 0.13 220)"; // Semantic info — active
318
+ export const ColorThemesOldschoolLightSemanticInfoSubtle =
319
+ "oklch(0.95 0.03 220)"; // Semantic info — subtle surface
320
+ export const ColorThemesOldschoolLightSemanticInfoText = "oklch(0.38 0.1 220)"; // Semantic info — text on tinted bg
321
+ export const ColorThemesOldschoolLightSurfaceBgBase = "oklch(0.98 0.02 100)"; // Root background — page canvas
322
+ export const ColorThemesOldschoolLightSurfaceBgSubtle = "oklch(0.96 0.03 100)"; // Subtle background — panels, sections
323
+ export const ColorThemesOldschoolLightSurfaceBgEmphasis =
324
+ "oklch(0.88 0.04 100)"; // Emphasized background — highlighted regions
325
+ export const ColorThemesOldschoolLightSurfaceSurface = "oklch(0.99 0.01 100)"; // Card / modal / elevated container surface
326
+ export const ColorThemesOldschoolLightSurfaceBorder = "oklch(0.86 0.02 90)"; // Default border / divider
327
+ export const ColorThemesOldschoolLightSurfaceBorderSubtle =
328
+ "oklch(0.91 0.015 90)"; // Subtle border — quiet separators
329
+ export const ColorThemesOldschoolLightTextPrimary = "oklch(0.22 0.02 80)"; // Primary foreground text
330
+ export const ColorThemesOldschoolLightTextSecondary = "oklch(0.42 0.02 80)"; // Secondary text — supporting copy
331
+ export const ColorThemesOldschoolLightTextTertiary = "oklch(0.55 0.01 80)"; // Tertiary text — captions, hints
332
+ export const ColorThemesOldschoolLightTextDisabled = "oklch(0.7 0.01 80)"; // Disabled text
333
+ export const ColorThemesOldschoolLightTextInverse = "oklch(0.98 0 0)"; // Inverse text — on dark surfaces
334
+ export const ColorThemesOldschoolLightShadowBase = "oklch(0.25 0.02 80 / 0.1)"; // Shadow tint — default
335
+ export const ColorThemesOldschoolLightShadowStrong =
336
+ "oklch(0.25 0.02 80 / 0.2)"; // Shadow tint — strong
337
+ export const ColorThemesOldschoolLightFocusRingColor = "oklch(0.38 0.16 145)"; // Focus ring color — outer 2px solid ring (oldschool-light、 olive hue + luminance DOWN で AAA contrast on paper-like bg)
338
+ export const ColorThemesOldschoolLightFocusRingHalo =
339
+ "oklch(0.38 0.16 145 / 0.18)"; // Focus halo — inner 4px subtle bg tint、 retro/corporate identity 保持
340
+ export const ColorThemesOldschoolLightGradientHero =
341
+ "linear-gradient(135deg, oklch(0.94 0.05 100) 0%, oklch(0.92 0.04 90) 50%, oklch(0.9 0.06 110) 100%)"; // Hero gradient — marketing / splash surfaces
342
+ export const ColorThemesSoraDarkBrandPrimary = "oklch(0.7 0.1 230)"; // Brand primary (base)
343
+ export const ColorThemesSoraDarkBrandPrimaryHover = "oklch(0.75 0.11 230)"; // Brand primary — hover
344
+ export const ColorThemesSoraDarkBrandPrimaryActive = "oklch(0.65 0.09 230)"; // Brand primary — active / pressed
345
+ export const ColorThemesSoraDarkBrandPrimarySubtle = "oklch(0.22 0.04 230)"; // Brand primary — subtle tint surface
346
+ export const ColorThemesSoraDarkBrandSecondary = "oklch(0.72 0.12 50)"; // Brand secondary (base)
347
+ export const ColorThemesSoraDarkBrandSecondaryHover = "oklch(0.77 0.13 50)"; // Brand secondary — hover
348
+ export const ColorThemesSoraDarkBrandSecondaryActive = "oklch(0.67 0.11 50)"; // Brand secondary — active / pressed
349
+ export const ColorThemesSoraDarkBrandSecondarySubtle = "oklch(0.22 0.04 50)"; // Brand secondary — subtle tint surface
350
+ export const ColorThemesSoraDarkSemanticSuccess = "oklch(0.68 0.14 155)"; // Semantic success (base)
351
+ export const ColorThemesSoraDarkSemanticSuccessHover = "oklch(0.73 0.15 155)"; // Semantic success — hover
352
+ export const ColorThemesSoraDarkSemanticSuccessActive = "oklch(0.63 0.13 155)"; // Semantic success — active
353
+ export const ColorThemesSoraDarkSemanticSuccessSubtle = "oklch(0.22 0.05 155)"; // Semantic success — subtle surface
354
+ export const ColorThemesSoraDarkSemanticSuccessText = "oklch(0.78 0.11 155)"; // Semantic success — text on tinted bg
355
+ export const ColorThemesSoraDarkSemanticWarning = "oklch(0.73 0.12 70)"; // Semantic warning (base)
356
+ export const ColorThemesSoraDarkSemanticWarningHover = "oklch(0.78 0.13 70)"; // Semantic warning — hover
357
+ export const ColorThemesSoraDarkSemanticWarningActive = "oklch(0.68 0.11 70)"; // Semantic warning — active
358
+ export const ColorThemesSoraDarkSemanticWarningSubtle = "oklch(0.22 0.05 70)"; // Semantic warning — subtle surface
359
+ export const ColorThemesSoraDarkSemanticWarningText = "oklch(0.83 0.09 70)"; // Semantic warning — text on tinted bg
360
+ export const ColorThemesSoraDarkSemanticError = "oklch(0.68 0.16 15)"; // Semantic error (base)
361
+ export const ColorThemesSoraDarkSemanticErrorHover = "oklch(0.73 0.17 15)"; // Semantic error — hover
362
+ export const ColorThemesSoraDarkSemanticErrorActive = "oklch(0.63 0.15 15)"; // Semantic error — active
363
+ export const ColorThemesSoraDarkSemanticErrorSubtle = "oklch(0.22 0.05 15)"; // Semantic error — subtle surface
364
+ export const ColorThemesSoraDarkSemanticErrorText = "oklch(0.83 0.11 15)"; // Semantic error — text on tinted bg
365
+ export const ColorThemesSoraDarkSemanticInfo = "oklch(0.68 0.1 250)"; // Semantic info (base)
366
+ export const ColorThemesSoraDarkSemanticInfoHover = "oklch(0.73 0.11 250)"; // Semantic info — hover
367
+ export const ColorThemesSoraDarkSemanticInfoActive = "oklch(0.63 0.09 250)"; // Semantic info — active
368
+ export const ColorThemesSoraDarkSemanticInfoSubtle = "oklch(0.22 0.04 250)"; // Semantic info — subtle surface
369
+ export const ColorThemesSoraDarkSemanticInfoText = "oklch(0.83 0.08 250)"; // Semantic info — text on tinted bg
370
+ export const ColorThemesSoraDarkSurfaceBgBase = "oklch(0.12 0.025 240)"; // Root background — page canvas
371
+ export const ColorThemesSoraDarkSurfaceBgSubtle = "oklch(0.15 0.025 240)"; // Subtle background — panels, sections
372
+ export const ColorThemesSoraDarkSurfaceBgEmphasis = "oklch(0.25 0.025 240)"; // Emphasized background — highlighted regions
373
+ export const ColorThemesSoraDarkSurfaceSurface = "oklch(0.17 0.025 240)"; // Card / modal / elevated container surface
374
+ export const ColorThemesSoraDarkSurfaceBorder = "oklch(0.28 0.02 240)"; // Default border / divider
375
+ export const ColorThemesSoraDarkSurfaceBorderSubtle = "oklch(0.23 0.015 240)"; // Subtle border — quiet separators
376
+ export const ColorThemesSoraDarkTextPrimary = "oklch(0.94 0.01 240)"; // Primary foreground text
377
+ export const ColorThemesSoraDarkTextSecondary = "oklch(0.73 0.01 240)"; // Secondary text — supporting copy
378
+ export const ColorThemesSoraDarkTextTertiary = "oklch(0.58 0.01 240)"; // Tertiary text — captions, hints
379
+ export const ColorThemesSoraDarkTextDisabled = "oklch(0.43 0.01 240)"; // Disabled text
380
+ export const ColorThemesSoraDarkTextInverse = "oklch(0.92 0.01 240)"; // Inverse text — on dark surfaces
381
+ export const ColorThemesSoraDarkShadowBase = "oklch(0 0 0 / 0.35)"; // Shadow tint — default
382
+ export const ColorThemesSoraDarkShadowStrong = "oklch(0 0 0 / 0.55)"; // Shadow tint — strong
383
+ export const ColorThemesSoraDarkFocusRingColor = "oklch(0.82 0.13 230)"; // Focus ring color — outer 2px solid ring (sora-dark、 brand 同 hue + luminance UP で AAA contrast)
384
+ export const ColorThemesSoraDarkFocusRingHalo = "oklch(0.82 0.13 230 / 0.18)"; // Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出
385
+ export const ColorThemesSoraDarkGradientHero =
386
+ "linear-gradient(135deg, oklch(0.15 0.04 240) 0%, oklch(0.13 0.03 250) 50%, oklch(0.18 0.05 230) 100%)"; // Hero gradient — marketing / splash surfaces
387
+ export const ColorThemesSoraLightBrandPrimary = "oklch(0.75 0.12 230)"; // Brand primary (base)
388
+ export const ColorThemesSoraLightBrandPrimaryHover = "oklch(0.7 0.13 230)"; // Brand primary — hover
389
+ export const ColorThemesSoraLightBrandPrimaryActive = "oklch(0.65 0.14 230)"; // Brand primary — active / pressed
390
+ export const ColorThemesSoraLightBrandPrimarySubtle = "oklch(0.95 0.04 230)"; // Brand primary — subtle tint surface
391
+ export const ColorThemesSoraLightBrandSecondary = "oklch(0.75 0.15 50)"; // Brand secondary (base)
392
+ export const ColorThemesSoraLightBrandSecondaryHover = "oklch(0.7 0.16 50)"; // Brand secondary — hover
393
+ export const ColorThemesSoraLightBrandSecondaryActive = "oklch(0.65 0.17 50)"; // Brand secondary — active / pressed
394
+ export const ColorThemesSoraLightBrandSecondarySubtle = "oklch(0.95 0.05 50)"; // Brand secondary — subtle tint surface
395
+ export const ColorThemesSoraLightSemanticSuccess = "oklch(0.72 0.16 155)"; // Semantic success (base)
396
+ export const ColorThemesSoraLightSemanticSuccessHover = "oklch(0.67 0.17 155)"; // Semantic success — hover
397
+ export const ColorThemesSoraLightSemanticSuccessActive = "oklch(0.62 0.18 155)"; // Semantic success — active
398
+ export const ColorThemesSoraLightSemanticSuccessSubtle = "oklch(0.95 0.04 155)"; // Semantic success — subtle surface
399
+ export const ColorThemesSoraLightSemanticSuccessText = "oklch(0.38 0.1 155)"; // Semantic success — text on tinted bg
400
+ export const ColorThemesSoraLightSemanticWarning = "oklch(0.82 0.14 70)"; // Semantic warning (base)
401
+ export const ColorThemesSoraLightSemanticWarningHover = "oklch(0.77 0.15 70)"; // Semantic warning — hover
402
+ export const ColorThemesSoraLightSemanticWarningActive = "oklch(0.72 0.16 70)"; // Semantic warning — active
403
+ export const ColorThemesSoraLightSemanticWarningSubtle = "oklch(0.96 0.05 70)"; // Semantic warning — subtle surface
404
+ export const ColorThemesSoraLightSemanticWarningText = "oklch(0.42 0.11 70)"; // Semantic warning — text on tinted bg
405
+ export const ColorThemesSoraLightSemanticError = "oklch(0.65 0.18 15)"; // Semantic error (base)
406
+ export const ColorThemesSoraLightSemanticErrorHover = "oklch(0.6 0.19 15)"; // Semantic error — hover
407
+ export const ColorThemesSoraLightSemanticErrorActive = "oklch(0.55 0.2 15)"; // Semantic error — active
408
+ export const ColorThemesSoraLightSemanticErrorSubtle = "oklch(0.95 0.04 15)"; // Semantic error — subtle surface
409
+ export const ColorThemesSoraLightSemanticErrorText = "oklch(0.4 0.13 15)"; // Semantic error — text on tinted bg
410
+ export const ColorThemesSoraLightSemanticInfo = "oklch(0.68 0.13 250)"; // Semantic info (base)
411
+ export const ColorThemesSoraLightSemanticInfoHover = "oklch(0.63 0.14 250)"; // Semantic info — hover
412
+ export const ColorThemesSoraLightSemanticInfoActive = "oklch(0.58 0.15 250)"; // Semantic info — active
413
+ export const ColorThemesSoraLightSemanticInfoSubtle = "oklch(0.95 0.03 250)"; // Semantic info — subtle surface
414
+ export const ColorThemesSoraLightSemanticInfoText = "oklch(0.38 0.11 250)"; // Semantic info — text on tinted bg
415
+ export const ColorThemesSoraLightSurfaceBgBase = "oklch(0.98 0.005 230)"; // Root background — page canvas
416
+ export const ColorThemesSoraLightSurfaceBgSubtle = "oklch(0.96 0.008 230)"; // Subtle background — panels, sections
417
+ export const ColorThemesSoraLightSurfaceBgEmphasis = "oklch(0.88 0.015 230)"; // Emphasized background — highlighted regions
418
+ export const ColorThemesSoraLightSurfaceSurface = "oklch(1 0 0)"; // Card / modal / elevated container surface
419
+ export const ColorThemesSoraLightSurfaceBorder = "oklch(0.86 0.012 230)"; // Default border / divider
420
+ export const ColorThemesSoraLightSurfaceBorderSubtle = "oklch(0.91 0.008 230)"; // Subtle border — quiet separators
421
+ export const ColorThemesSoraLightTextPrimary = "oklch(0.18 0.02 240)"; // Primary foreground text
422
+ export const ColorThemesSoraLightTextSecondary = "oklch(0.38 0.02 240)"; // Secondary text — supporting copy
423
+ export const ColorThemesSoraLightTextTertiary = "oklch(0.52 0.01 240)"; // Tertiary text — captions, hints
424
+ export const ColorThemesSoraLightTextDisabled = "oklch(0.68 0.01 240)"; // Disabled text
425
+ export const ColorThemesSoraLightTextInverse = "oklch(0.98 0 0)"; // Inverse text — on dark surfaces
426
+ export const ColorThemesSoraLightShadowBase = "oklch(0.2 0.02 240 / 0.1)"; // Shadow tint — default
427
+ export const ColorThemesSoraLightShadowStrong = "oklch(0.2 0.02 240 / 0.18)"; // Shadow tint — strong
428
+ export const ColorThemesSoraLightFocusRingColor = "oklch(0.42 0.16 230)"; // Focus ring color — outer 2px solid ring (sora-light、 brand 同 hue + luminance DOWN で AAA contrast on light bg)
429
+ export const ColorThemesSoraLightFocusRingHalo = "oklch(0.42 0.16 230 / 0.18)"; // Focus halo — inner 4px subtle bg tint、 ring を 「包む glow」 として演出
430
+ export const ColorThemesSoraLightGradientHero =
431
+ "linear-gradient(135deg, oklch(0.9 0.06 230) 0%, oklch(0.92 0.04 245) 50%, oklch(0.88 0.08 220) 100%)"; // Hero gradient — marketing / splash surfaces
432
+ export const DensityDefaultPaddingScale = "1"; // Default density — base spacing そのまま (4 mode の現状値)
433
+ export const DensityDefaultGapScale = "1"; // Default density — base gap そのまま
434
+ export const DensityDefaultMinHeightScale = "1"; // Default density — base target そのまま
435
+ export const DensityComfortablePaddingScale = "1.25"; // Comfortable density — base × 1.25、 広い呼吸 (reading mode / hero / onboarding)
436
+ export const DensityComfortableGapScale = "1.25"; // Comfortable density — gap も × 1.25 で element 間に余裕
437
+ export const DensityComfortableMinHeightScale = "1.1"; // Comfortable density — target × 1.1 (tap も focus も少し大きく)
438
+ export const DensityCompactPaddingScale = "0.85"; // Compact density — base × 0.85、 dense interface (data table / dashboard / dev tool)
439
+ export const DensityCompactGapScale = "0.85"; // Compact density — gap も × 0.85
440
+ export const DensityCompactMinHeightScale = "0.95"; // Compact density — target × 0.95 (tap >= 44px は維持、 focus は少し縮)
441
+ export const DensityCozyPaddingScale = "0.7"; // Cozy density — base × 0.7、 最も dense (terminal mode / log viewer / max info-density)
442
+ export const DensityCozyGapScale = "0.7"; // Cozy density — gap も × 0.7
443
+ export const DensityCozyMinHeightScale = "0.85"; // Cozy density — target × 0.85 (a11y minimum 24px は超える)
444
+ export const DepthFlat = "0px"; // Flat — z=0、 base plane (no elevation)
445
+ export const DepthRaised = "4px"; // Raised — subtle hover lift / sidebar active item
446
+ export const DepthElevated = "8px"; // Elevated — card / hero default forward (5-step rule の中央)
447
+ export const DepthFloating = "16px"; // Floating — feature card hover / popover / dropdown
448
+ export const DepthModal = "32px"; // Modal — overlay / dialog / drawer の前面 (最深 elevation)
449
+ export const EditorModeAxisGlobal = "var(--color-brand-secondary)"; // TOP 領域 accent — global tools / 視線の起点 (active theme の brand secondary に追従)
450
+ export const EditorModeAxisUtility = "var(--color-text-tertiary)"; // BOTTOM 領域 accent — ローカル utility (active theme の text tertiary)
451
+ export const EditorModeAxisPast = "var(--color-semantic-info)"; // LEFT 領域 accent — 時系列過去 / 参照 / 元ソース (active theme の semantic info)
452
+ export const EditorModeAxisFuture = "var(--color-brand-primary)"; // RIGHT 領域 accent — 時系列未来 / ツール / 生成 (active theme の brand primary)
453
+ export const EditorModeOverlayBackdropOpacity = 0; // Editor Layer 最背面の opacity。デフォルト 0 (完全透過) で Content Layer を遮らない
454
+ export const EditorModePanelFieldLabel = "var(--color-text-secondary)"; // Field label の text 色 (active theme の text secondary)
455
+ export const EditorModePanelFieldValue = "var(--color-text-primary)"; // Field value の text 色 (active theme の text primary)
456
+ export const EditorModePanelSeparator = "var(--color-surface-border-subtle)"; // Field group の区切り線 (active theme の border subtle)
457
+ export const EditorModePanelFieldGap = "8px"; // Field 同士の縦間隔
458
+ export const EditorModePanelGroupGap = "16px"; // Field group 間の縦間隔
459
+ export const EditorModeRegionBgColor = "var(--color-surface-bg-base)"; // Region 背景の base RGB (active theme に追従)
460
+ export const EditorModeRegionBgOpacity = 0.92; // Region 背景の 不透明度 (0.0-1.0)。Content を完全に隠さず薄く透かす
461
+ export const EditorModeRegionBorder = "var(--color-surface-border)"; // Region の輪郭色 (active theme に追従)
462
+ export const EditorModeRegionPadding = "12px"; // Region 内側の padding
463
+ export const EditorModeRegionTopHeight = "44px"; // TOP region の固定高さ (Content を大きく隠さないコンパクトサイズ)
464
+ export const EditorModeRegionBottomHeight = "44px"; // BOTTOM region の固定高さ
465
+ export const EditorModeRegionLeftWidth = "240px"; // LEFT region の default 幅 (collapsible)
466
+ export const EditorModeRegionRightWidth = "280px"; // RIGHT region の default 幅 (tool panel、左より広め)
467
+ export const EditorModeSelectionOutlineHover =
468
+ "var(--color-brand-primary-subtle)"; // Editor mode 中の hover outline (ghost highlight、Content を触らず上に描画)
469
+ export const EditorModeSelectionOutlineActive = "var(--color-brand-primary)"; // 選択中の要素 outline (active theme の brand primary)
470
+ export const EditorModeSelectionOutlineWidth = "2px"; // Selection outline の太さ
471
+ export const EditorModeSelectionOutlineOffset = "2px"; // 要素から outline までの offset (要素本体を遮らない)
472
+ export const FocusRingWidth = "2px"; // Outer ring width — WCAG 2.4.11 minimum 2px contrast border、 thinner だと visible 不足
473
+ export const FocusRingOffset = "2px"; // Outline offset — 要素境界から 2px 離す (要素を遮らず ring が呼吸)
474
+ export const FocusRingHaloWidth = "4px"; // Inner halo width — outer ring の補完 subtle bg tint、 ring を 「包む glow」 として演出
475
+ export const FocusRingStyle = "solid"; // Outline style — solid のみ採用 (dashed は精度に欠ける、 double は thicker 設計)
476
+ export const FramePerspectiveDefault = "1400px"; // Default perspective — page-level spatial frame (subtle 3D)
477
+ export const FramePerspectiveShallow = "800px"; // Shallow — closer camera、 dramatic 3D (hero / playground)
478
+ export const FramePerspectiveDeep = "2400px"; // Deep — farther camera、 subtle 3D (long-form content / reading)
479
+ export const LayoutContainerXs = "480px"; // Extra-narrow column — single-line CTA / standalone form / compact dialog body。 mobile portrait の effective text width に近い、 minimal modal stage。
480
+ export const LayoutContainerS = "640px"; // Narrow column — short form / single-line input collection / compact reading. iPhone 15 Pro Max landscape (932×430) や dense modal と整合。
481
+ export const LayoutContainerM = "768px"; // Default reading-friendly — 60-80 char line for long-form text. iPad portrait の content viewport と整合。
482
+ export const LayoutContainerL = "1024px"; // Dashboard / table-rich content — multi-column tables / data lists. iPad landscape / 13" laptop の effective viewport。
483
+ export const LayoutContainerXl = "1280px"; // Hero / multi-column layout — landing / marketing / wide app shell。 14" laptop 以上 desktop の comfortable upper bound。
484
+ export const LayoutGapTight = "4px"; // Tight gap — icon+label inline, chip group, closely-related siblings
485
+ export const LayoutGapSibling = "18px"; // Default sibling gap — between stacked elements (list items, form fields)
486
+ export const LayoutGapSection = "40px"; // Section-to-section gap — thematic block break (between content sections)
487
+ export const LayoutGapPage = "64px"; // Page-level break — hero / footer separation, landing page major divisions
488
+ export const LayoutGridColMinXs = "120px"; // auto-fit grid 最小 column 幅 (xs cells) — chip / avatar grid / icon-only tile。 dense 並びで多数表示が前提の最小単位。
489
+ export const LayoutGridColMinS = "160px"; // auto-fit grid 最小 column 幅 (s cells) — image thumbnail / icon tile / chip group 等の 密 grid 向け。
490
+ export const LayoutGridColMinM = "220px"; // auto-fit grid 最小 column 幅 (m cells) — card list / preview tile の標準サイズ、 readable summary を含む card に最適。
491
+ export const LayoutGridColMinL = "280px"; // auto-fit grid 最小 column 幅 (l cells) — content card with headline + 1-2 line description + meta、 article preview。
492
+ export const LayoutGridColMinXl = "320px"; // auto-fit grid 最小 column 幅 (xl cells) — feature card / hero tile、 multi-line description + CTA を含む rich card。
493
+ export const LayoutTargetTap = "44px"; // Minimum tap target — Apple HIG accessibility requirement (modals, buttons on touch devices)
494
+ export const LayoutTargetFocus = "32px"; // Minimum focus target — pointer devices / desktop-first (smaller than tap but still comfortable)
495
+ export const LayoutTargetHit = "24px"; // Minimum hit target — dense UI (toolbars, inline actions), still WCAG-reasonable with hover affordance
496
+ export const MarginXs = "8px"; // Extra-small margin — tight stack (paragraph spacing, inline gap)
497
+ export const MarginS = "16px"; // Small margin — standard vertical rhythm between elements
498
+ export const MarginM = "18px"; // Medium margin — component block separation (default、 spacing.m と揃える)
499
+ export const MarginL = "40px"; // Large margin — section divider (between thematic blocks)
500
+ export const MarginXl = "64px"; // Extra-large margin — major section or hero break (page-level breathing)
501
+ export const MotionDurationInstant = "80ms"; // Instant — micro feedback (button click flash 等)
502
+ export const MotionDurationFast = "160ms"; // Fast — small UI transitions (tooltip / hover)
503
+ export const MotionDurationNormal = "220ms"; // Normal — default transition (card lift / nav switch、 5-step 中央)
504
+ export const MotionDurationSlow = "320ms"; // Slow — Frame morph / page transition (perceptible motion)
505
+ export const MotionDurationLazy = "480ms"; // Lazy — large layout shift / hero reveal (deliberate)
506
+ export const MotionEasingLinear = "linear"; // Linear — constant velocity (progress bars 等の cumulative motion)
507
+ export const MotionEasingIn = "cubic-bezier(0.4, 0, 1, 1)"; // Ease-in — slow start, fast end (退場 animation)
508
+ export const MotionEasingOut = "cubic-bezier(0, 0, 0.2, 1)"; // Ease-out — fast start, slow end (登場 animation、 Material 3 default)
509
+ export const MotionEasingInOut = "cubic-bezier(0.4, 0, 0.2, 1)"; // Ease-in-out — smooth both ends (state change、 standard default)
510
+ export const MotionEasingSpring = "cubic-bezier(0.2, 0.8, 0.2, 1)"; // Spring — Creo brand bouncy curve (3D Frame morph / lively interactions)
511
+ export const MotionMappingHoverDuration = "160ms"; // Hover transition duration — fast (160ms)、 small surface motion で 「変化が現れる」 感
512
+ export const MotionMappingHoverEasing = "cubic-bezier(0, 0, 0.2, 1)"; // Hover transition easing — ease-out で 「登場 → 落ち着く」 (Material 3 default)
513
+ export const MotionMappingPressDuration = "80ms"; // Press transition duration — instant (80ms) で micro feedback、 押下の即時感
514
+ export const MotionMappingPressEasing = "cubic-bezier(0.4, 0, 1, 1)"; // Press transition easing — ease-in で 「押し込み」 (急停止)
515
+ export const MotionMappingToggleDuration = "220ms"; // Toggle transition duration — normal (220ms) で滑らかな state change
516
+ export const MotionMappingToggleEasing = "cubic-bezier(0.4, 0, 0.2, 1)"; // Toggle transition easing — in-out で両端滑らか (radio / checkbox / switch / segmented)
517
+ export const MotionMappingFocusRingDuration = "80ms"; // Focus ring transition duration — instant (80ms) で keyboard tab に即応
518
+ export const MotionMappingFocusRingEasing = "cubic-bezier(0, 0, 0.2, 1)"; // Focus ring transition easing — ease-out で「ring が現れる」
519
+ export const MotionMappingDropdownDuration = "160ms"; // Dropdown / popover / tooltip duration — fast (160ms) で軽快な登場
520
+ export const MotionMappingDropdownEasing = "cubic-bezier(0, 0, 0.2, 1)"; // Dropdown easing — ease-out で 「ふわっと出る」
521
+ export const MotionMappingModalEnterDuration = "320ms"; // Modal entry duration — slow (320ms) で「落ち着いた登場」 (modal / drawer / dialog)
522
+ export const MotionMappingModalEnterEasing = "cubic-bezier(0, 0, 0.2, 1)"; // Modal entry easing — ease-out で fast → slow (前面に現れて止まる)
523
+ export const MotionMappingModalExitDuration = "220ms"; // Modal exit duration — normal (220ms) で「素早く消える」
524
+ export const MotionMappingModalExitEasing = "cubic-bezier(0.4, 0, 1, 1)"; // Modal exit easing — ease-in で slow → fast (退場、 引っ込む)
525
+ export const MotionMappingPageTransitionDuration = "220ms"; // Page route transition duration — normal (220ms) で滑らかな移動
526
+ export const MotionMappingPageTransitionEasing = "cubic-bezier(0.4, 0, 0.2, 1)"; // Page transition easing — in-out で両端滑らか (route 変化)
527
+ export const MotionMappingFrameMorphDuration = "320ms"; // Frame system morph duration — slow (320ms)、 Creo brand identity の「呼吸」
528
+ export const MotionMappingFrameMorphEasing = "cubic-bezier(0.2, 0.8, 0.2, 1)"; // Frame morph easing — spring で Creo brand bouncy (3D depth metaphor articulate)
529
+ export const MotionMappingSkeletonShimmerDuration = "480ms"; // Skeleton shimmer duration — lazy (480ms) で loading の cumulative motion
530
+ export const MotionMappingSkeletonShimmerEasing = "linear"; // Skeleton shimmer easing — linear で「途切れない流れ」 (loading は時間流動)
531
+ export const MotionMappingProgressIndeterminateDuration = "480ms"; // Progress indeterminate bar duration — lazy (480ms) で end-less cumulative motion
532
+ export const MotionMappingProgressIndeterminateEasing = "linear"; // Progress indeterminate easing — linear で constant velocity (途中 progress 表現)
533
+ export const RadiusNone = "0px"; // No rounding — explicit reset (special, outside 5 tier rule)
534
+ export const RadiusXs = "4px"; // Extra-small radius — minimal rounding (chips, tags)
535
+ export const RadiusS = "8px"; // Small radius — subtle rounding (buttons, inputs)
536
+ export const RadiusM = "15px"; // Medium radius — cards, popovers (soft friendly feel)
537
+ export const RadiusL = "22px"; // Large radius — modals, larger surfaces
538
+ export const RadiusXl = "28px"; // Extra-large radius — hero surfaces
539
+ export const RadiusFull = "9999px"; // Fully rounded — pill shapes and circles (special, outside 5 tier rule)
540
+ export const ShadowNone = "none"; // No shadow
541
+ export const ShadowS = "0 1px 2px 0 rgba(32, 36, 46, 0.06)"; // Small elevation — quiet lift for subtle layers
542
+ export const ShadowM =
543
+ "0 4px 6px -1px rgba(32, 36, 46, 0.08), 0 2px 4px -2px rgba(32, 36, 46, 0.06)"; // Medium elevation — cards, dropdowns
544
+ export const ShadowL =
545
+ "0 10px 15px -3px rgba(32, 36, 46, 0.10), 0 4px 6px -4px rgba(32, 36, 46, 0.08)"; // Large elevation — popovers, overlays
546
+ export const ShadowXl =
547
+ "0 20px 25px -5px rgba(32, 36, 46, 0.12), 0 8px 10px -6px rgba(32, 36, 46, 0.08)"; // Extra-large elevation — modals, focal surfaces
548
+ export const SpacingXs = "4px"; // Extra-small spacing — 4px (base unit)
549
+ export const SpacingS = "8px"; // Small spacing — 8px
550
+ export const SpacingM = "18px"; // Medium spacing — 18px (default gap between UI elements)
551
+ export const SpacingL = "24px"; // Large spacing — 24px
552
+ export const SpacingXl = "32px"; // Extra-large spacing — 32px
553
+ export const TypographyBodyLead = "20px"; // Lead body — opening paragraph / intro (larger, invites reading)
554
+ export const TypographyBodyDefault = "16px"; // Default body — regular paragraph text (最もよく使う)
555
+ export const TypographyBodyEmphasis = "16px"; // Emphasis body — default size with stronger weight (意味的な強調、size は default と同じ)
556
+ export const TypographyBodyHelper = "14px"; // Helper text — form helper, status message, secondary info
557
+ export const TypographyBodyCaption = "12px"; // Caption — image caption, footnote, meta info (smallest readable body)
558
+ export const TypographyDisplayXs = "24px"; // Display xs — smallest heading (h4 / section title / card title)
559
+ export const TypographyDisplayS = "32px"; // Display s — standard heading (h3 / article title / section headline)
560
+ export const TypographyDisplayM = "44px"; // Display m — default hero / h2 (Creo aesthetic: 柔らかく強い存在感)
561
+ export const TypographyDisplayL = "56px"; // Display l — page hero / h1
562
+ export const TypographyDisplayXl = "72px"; // Display xl — landing mega headline / promotional hero
563
+ export const TypographyFamilySans =
564
+ "'Creo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Yu Gothic UI', 'Meiryo UI', Roboto, 'Noto Sans JP', sans-serif"; // Default UI sans-serif family (multi-language: EN/JA/KO, multi-platform: macOS/Win/Linux)
565
+ export const TypographyFamilyMono =
566
+ "'JetBrainsMono Nerd Font', 'FiraCode Nerd Font', 'CaskaydiaCove Nerd Font', 'Iosevka Nerd Font', '0xProto Nerd Font', 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Cascadia Mono', 'Fira Code', 'Consolas', 'Yu Gothic UI', monospace"; // Default monospace family for code blocks, tokens, IDs. Top 5 Nerd Fonts (JetBrainsMono / FiraCode / Cascadia / Iosevka / 0xProto) を primary fallback、IBM Plex Mono を corporate fallback。Nerd Font が install 済なら icon glyph も同 stack で使える
567
+ export const TypographyFamilyMonoLegible =
568
+ "'AtkinsonHyperlegibleMono Nerd Font', 'Atkinson Hyperlegible Mono', 'Hack Nerd Font', 'Hack', 'JetBrainsMono Nerd Font', 'JetBrains Mono', monospace"; // Mono variant for accessibility / high legibility. Atkinson Hyperlegible Mono (Braille Institute) + Hack を主軸。低視力 / 小サイズ / long session で読みやすさ最優先
569
+ export const TypographyFamilyMonoRetro =
570
+ "'DepartureMono Nerd Font', 'Departure Mono', 'Gohu Nerd Font', 'GohuFont', '3270 Nerd Font', '3270 Medium', 'Terminus Nerd Font', 'Terminus', 'JetBrainsMono Nerd Font', monospace"; // Mono variant for retro / pixel / lo-fi aesthetic. Departure Mono / GohuFont / 3270 / Terminus の bitmap-like / pixel-perfect な font 群。display heading や theme アクセントで使う
571
+ export const TypographyFamilyMonoCorporate =
572
+ "'IBM Plex Mono Nerd Font', 'IBM Plex Mono', 'AdwaitaMono Nerd Font', 'Adwaita Mono', 'JetBrainsMono Nerd Font', 'JetBrains Mono', monospace"; // Mono variant for corporate / professional tone. IBM Plex Mono が主軸 (Plex Sans/Serif と family 統一可)、Adwaita Mono が GNOME/Linux native flavor
573
+ export const TypographyFamilyMonoDisplay =
574
+ "'ShareTechMono Nerd Font', 'Share Tech Mono', 'VictorMono Nerd Font', 'Victor Mono', 'JetBrainsMono Nerd Font', 'JetBrains Mono', monospace"; // Mono variant for display / heading / cyberpunk aesthetic. Share Tech Mono (CRT terminal feel) や Victor Mono (cursive italic 強調) が主軸。banner / hero / accent 用
575
+ export const TypographyFamilyDisplay =
576
+ "'Creo Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Yu Gothic UI', 'Noto Sans JP', sans-serif"; // Display family — heroes, large marketing headlines (multi-platform)
577
+ export const TypographyFamilyIcon =
578
+ "'Symbols Nerd Font Mono', 'Symbols Nerd Font', 'JetBrainsMono Nerd Font', 'FiraCode Nerd Font', 'CaskaydiaCove Nerd Font', 'Iosevka Nerd Font', '0xProto Nerd Font', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif"; // Icon family — Nerd Fonts (~10k アイコン: devicons / octicons / font-awesome / material) + OS native emoji fallback。Nerd Font 未 install 環境では emoji / 普通文字に degrade
579
+ export const TypographyFamilyApp =
580
+ "'JetBrainsMono Nerd Font Mono', 'JetBrainsMono Nerd Font', 'JetBrains Mono', 'PlemolJP', 'Noto Sans JP', monospace"; // App UI mode — chrome 全般 (sidebar / button / dialog / tab)。等幅 + Nerd Font icon、CJK は PlemolJP fallback で完全等幅統一。VP Phase A1 default
581
+ export const TypographyFamilyRead =
582
+ "'PlemolJP', 'Noto Sans JP', 'JetBrainsMono Nerd Font Mono', monospace"; // Read mode — 読み専用表示 (memory view / chat history / canvas markdown render / log viewer)。PlemolJP の Plex Sans JP + JetBrains Mono Latin で CJK 完全等幅統一
583
+ export const TypographyFamilyEditor =
584
+ "'iAWriterDuoS Nerd Font Mono', 'iAWriterDuoS Nerd Font', 'iA Writer Duo S', 'PlemolJP', 'Noto Sans JP', monospace"; // Editor mode (write、default) — textarea / Markdown editor / chat input。iA Writer Duo の Duospace で writer 体験、CJK は PlemolJP
585
+ export const TypographyFamilyEditorMono =
586
+ "'iAWriterMonoS', 'iA Writer Mono S', 'PlemolJP', 'Noto Sans JP', monospace"; // Editor mode option — 純粋 mono。iA Writer Mono、コード重視 user 向け
587
+ export const TypographyFamilyEditorQuattro =
588
+ "'iAWriterQuattroS', 'iA Writer Quattro S', 'PlemolJP', 'Noto Sans JP', sans-serif"; // Editor mode option — semi-proportional。iA Writer Quattro、長文散文 user 向け
589
+ export const TypographyFamilyTerminal =
590
+ "'JetBrainsMono Nerd Font Mono', 'JetBrainsMono Nerd Font', 'JetBrains Mono', 'PlemolJP', 'Noto Sans JP', monospace"; // Terminal mode — xterm.js (app と同じ stack だが意味的に分離、将来 terminal 専用調整に拡張可)
591
+ export const TypographyIconXs = "16px"; // Tiny inline icon — text-flow に並ぶ 1em 相当の補助 mark / favicon / dense list の leading icon。
592
+ export const TypographyIconS = "24px"; // Small icon — button / input / chip の leading mark、 toolbar action。 base 16px text と並ぶ comfortable 比率。
593
+ export const TypographyIconM = "40px"; // Icon display — list item / inline 強調。 emoji や icon font の visual size、 typography size とは別 scale。
594
+ export const TypographyIconL = "64px"; // Icon display — empty-state default / card header / feature illustration。
595
+ export const TypographyIconXl = "96px"; // Icon display — empty-state large variant / hero illustration / onboarding。 page-level の visual anchor。
596
+ export const TypographyLineHeightTight = 1.25; // Tight line-height — headings
597
+ export const TypographyLineHeightNormal = 1.5; // Normal line-height — default body
598
+ export const TypographyLineHeightRelaxed = 1.75; // Relaxed line-height — long-form text, CJK languages
599
+ export const TypographySizeXs = "12px"; // Caption / meta text
600
+ export const TypographySizeS = "14px"; // Small body / helper text
601
+ export const TypographySizeM = "16px"; // Default body text
602
+ export const TypographySizeL = "18px"; // Large body / subheading
603
+ export const TypographySizeXl = "20px"; // Largest body / small heading (h4)
604
+ export const TypographyTitleHero = "72px"; // Hero title — landing page mega headline (promotional / marketing)
605
+ export const TypographyTitlePage = "44px"; // Page title — h1 (article title, app screen heading)
606
+ export const TypographyTitleSection = "32px"; // Section title — h2 (thematic block within a page)
607
+ export const TypographyTitleSubsection = "24px"; // Subsection title — h3 (nested group within a section)
608
+ export const TypographyTitleCard = "20px"; // Card title — h4 (inline block title, table header, menu label)
609
+ export const TypographyWeightRegular = 400; // Regular body weight
610
+ export const TypographyWeightMedium = 500; // Medium emphasis
611
+ export const TypographyWeightSemibold = 600; // Semi-bold — subheadings, buttons
612
+ export const TypographyWeightBold = 700; // Bold — headings