@evolve.ui/theme-system 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/evolve-ui.entries.json +46 -0
- package/package.json +4 -2
- package/src/index.ts +37 -0
- package/src/tailwind/borderRadius.ts +32 -0
- package/src/tailwind/boxShadow.ts +19 -0
- package/src/tailwind/colors.ts +332 -0
- package/src/tailwind/cssVars.ts +301 -0
- package/src/tailwind/fontFamily.ts +14 -0
- package/src/tailwind/plugin.ts +308 -0
- package/src/tailwind/screens.ts +22 -0
- package/src/tailwind/spacing.ts +20 -0
- package/src/tailwind/text.ts +170 -0
- package/src/tailwind/width.ts +14 -0
- package/src/themes/BasketballTraining.ts +166 -0
- package/src/themes/Default.ts +165 -0
- package/src/themes/ProfessionalBrand.ts +166 -0
- package/src/themes/allThemes.ts +12 -0
- package/src/themes/brands.ts +37 -0
- package/src/themes/common.ts +65 -0
- package/src/themes/generate.ts +46 -0
- package/src/themes/generateCSSVars.ts +123 -0
- package/src/themes/runtime/basketballTraining.ts +3 -0
- package/src/themes/runtime/buildTheme.ts +424 -0
- package/src/themes/runtime/default.ts +3 -0
- package/src/themes/runtime/professionalBrand.ts +3 -0
- package/src/themes/semanticColorTokenSteps.ts +20 -0
- package/src/themes/themeType.ts +169 -0
- package/src/themes/writeToCSSFile.ts +11 -0
- package/src/utils/cn.ts +35 -0
- package/src/utils/color.ts +82 -0
- package/src/utils/wrapVar.ts +24 -0
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typography component classes for Tailwind CSS plugin
|
|
3
|
+
*
|
|
4
|
+
* Defines .hui-text-* and .hui-link-* utility classes that apply
|
|
5
|
+
* complete typography styles (font, size, weight, spacing, line-height).
|
|
6
|
+
*
|
|
7
|
+
* Internal reference: Hammer UI patterns
|
|
8
|
+
* Ported from the upstream theme system.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { CSSRuleObject } from 'tailwindcss/types/config';
|
|
12
|
+
|
|
13
|
+
import { wrapVar } from '../utils/wrapVar';
|
|
14
|
+
import {
|
|
15
|
+
fontWeightBodyPrimary,
|
|
16
|
+
fontWeightBodySecondary,
|
|
17
|
+
fontWeightCaption,
|
|
18
|
+
fontWeightH1,
|
|
19
|
+
fontWeightH2,
|
|
20
|
+
fontWeightH3,
|
|
21
|
+
fontWeightH4,
|
|
22
|
+
fontWeightH5,
|
|
23
|
+
fontWeightH6,
|
|
24
|
+
fontWeightLabelMini,
|
|
25
|
+
fontWeightLabelStrong,
|
|
26
|
+
letterSpacingBodyPrimary,
|
|
27
|
+
letterSpacingBodySecondary,
|
|
28
|
+
letterSpacingCaption,
|
|
29
|
+
letterSpacingH1,
|
|
30
|
+
letterSpacingH1Mobile,
|
|
31
|
+
letterSpacingH2,
|
|
32
|
+
letterSpacingH2Mobile,
|
|
33
|
+
letterSpacingH3,
|
|
34
|
+
letterSpacingH3Mobile,
|
|
35
|
+
letterSpacingH4,
|
|
36
|
+
letterSpacingH5,
|
|
37
|
+
letterSpacingH6,
|
|
38
|
+
letterSpacingLabelMini,
|
|
39
|
+
letterSpacingLabelStrong,
|
|
40
|
+
textTransformH6,
|
|
41
|
+
textTransformLabelMini,
|
|
42
|
+
} from './cssVars';
|
|
43
|
+
import { fontFamily } from './fontFamily';
|
|
44
|
+
import { screens } from './screens';
|
|
45
|
+
|
|
46
|
+
export const textComponents = {
|
|
47
|
+
'.hui-link-md': {
|
|
48
|
+
fontFamily: fontFamily.primary,
|
|
49
|
+
fontSize: '16px',
|
|
50
|
+
fontWeight: wrapVar(fontWeightBodyPrimary),
|
|
51
|
+
letterSpacing: wrapVar(letterSpacingBodyPrimary),
|
|
52
|
+
lineHeight: '24px',
|
|
53
|
+
},
|
|
54
|
+
'.hui-link-sm': {
|
|
55
|
+
fontFamily: fontFamily.primary,
|
|
56
|
+
fontSize: '14px',
|
|
57
|
+
fontWeight: wrapVar(fontWeightBodyPrimary),
|
|
58
|
+
letterSpacing: wrapVar(letterSpacingBodyPrimary),
|
|
59
|
+
lineHeight: '22px',
|
|
60
|
+
},
|
|
61
|
+
'.hui-link-xs': {
|
|
62
|
+
fontFamily: fontFamily.primary,
|
|
63
|
+
fontSize: '12px',
|
|
64
|
+
fontWeight: wrapVar(fontWeightBodyPrimary),
|
|
65
|
+
letterSpacing: wrapVar(letterSpacingBodyPrimary),
|
|
66
|
+
lineHeight: '18px',
|
|
67
|
+
},
|
|
68
|
+
'.hui-text-body-primary': {
|
|
69
|
+
fontFamily: fontFamily.primary,
|
|
70
|
+
fontSize: '16px',
|
|
71
|
+
fontWeight: wrapVar(fontWeightBodyPrimary),
|
|
72
|
+
letterSpacing: wrapVar(letterSpacingBodyPrimary),
|
|
73
|
+
lineHeight: '24px',
|
|
74
|
+
},
|
|
75
|
+
'.hui-text-body-secondary': {
|
|
76
|
+
fontFamily: fontFamily.primary,
|
|
77
|
+
fontSize: '14px',
|
|
78
|
+
fontWeight: wrapVar(fontWeightBodySecondary),
|
|
79
|
+
letterSpacing: wrapVar(letterSpacingBodySecondary),
|
|
80
|
+
lineHeight: '22px',
|
|
81
|
+
},
|
|
82
|
+
'.hui-text-caption': {
|
|
83
|
+
fontFamily: fontFamily.primary,
|
|
84
|
+
fontSize: '12px',
|
|
85
|
+
fontWeight: wrapVar(fontWeightCaption),
|
|
86
|
+
letterSpacing: wrapVar(letterSpacingCaption),
|
|
87
|
+
lineHeight: '18px',
|
|
88
|
+
},
|
|
89
|
+
'.hui-text-h1': {
|
|
90
|
+
fontFamily: fontFamily.secondary,
|
|
91
|
+
fontSize: '32px',
|
|
92
|
+
fontWeight: wrapVar(fontWeightH1),
|
|
93
|
+
letterSpacing: wrapVar(letterSpacingH1),
|
|
94
|
+
lineHeight: '48px',
|
|
95
|
+
[`@media (width < ${screens.smMax.max})`]: {
|
|
96
|
+
fontSize: '24px',
|
|
97
|
+
letterSpacing: wrapVar(letterSpacingH1Mobile),
|
|
98
|
+
lineHeight: '36px',
|
|
99
|
+
},
|
|
100
|
+
},
|
|
101
|
+
'.hui-text-h2': {
|
|
102
|
+
fontFamily: fontFamily.secondary,
|
|
103
|
+
fontSize: '24px',
|
|
104
|
+
fontWeight: wrapVar(fontWeightH2),
|
|
105
|
+
letterSpacing: wrapVar(letterSpacingH2),
|
|
106
|
+
lineHeight: '36px',
|
|
107
|
+
[`@media (width < ${screens.smMax.max})`]: {
|
|
108
|
+
fontSize: '20px',
|
|
109
|
+
letterSpacing: wrapVar(letterSpacingH2Mobile),
|
|
110
|
+
lineHeight: '30px',
|
|
111
|
+
},
|
|
112
|
+
},
|
|
113
|
+
'.hui-text-h3': {
|
|
114
|
+
fontFamily: fontFamily.secondary,
|
|
115
|
+
fontSize: '20px',
|
|
116
|
+
fontWeight: wrapVar(fontWeightH3),
|
|
117
|
+
letterSpacing: wrapVar(letterSpacingH3),
|
|
118
|
+
lineHeight: '30px',
|
|
119
|
+
[`@media (width < ${screens.smMax.max})`]: {
|
|
120
|
+
fontSize: '16px',
|
|
121
|
+
letterSpacing: wrapVar(letterSpacingH3Mobile),
|
|
122
|
+
lineHeight: '24px',
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
'.hui-text-h4': {
|
|
126
|
+
fontFamily: fontFamily.secondary,
|
|
127
|
+
fontSize: '16px',
|
|
128
|
+
fontWeight: wrapVar(fontWeightH4),
|
|
129
|
+
letterSpacing: wrapVar(letterSpacingH4),
|
|
130
|
+
lineHeight: '24px',
|
|
131
|
+
},
|
|
132
|
+
'.hui-text-h5': {
|
|
133
|
+
fontFamily: fontFamily.primary,
|
|
134
|
+
fontSize: '16px',
|
|
135
|
+
fontWeight: wrapVar(fontWeightH5),
|
|
136
|
+
letterSpacing: wrapVar(letterSpacingH5),
|
|
137
|
+
lineHeight: '24px',
|
|
138
|
+
},
|
|
139
|
+
'.hui-text-h6': {
|
|
140
|
+
fontFamily: fontFamily.primary,
|
|
141
|
+
fontSize: '14px',
|
|
142
|
+
fontWeight: wrapVar(fontWeightH6),
|
|
143
|
+
letterSpacing: wrapVar(letterSpacingH6),
|
|
144
|
+
lineHeight: '22px',
|
|
145
|
+
textTransform: wrapVar(textTransformH6),
|
|
146
|
+
},
|
|
147
|
+
'.hui-text-label-mini': {
|
|
148
|
+
fontFamily: fontFamily.primary,
|
|
149
|
+
fontSize: '12px',
|
|
150
|
+
fontWeight: wrapVar(fontWeightLabelMini),
|
|
151
|
+
letterSpacing: wrapVar(letterSpacingLabelMini),
|
|
152
|
+
lineHeight: '14px',
|
|
153
|
+
textTransform: wrapVar(textTransformLabelMini),
|
|
154
|
+
},
|
|
155
|
+
'.hui-text-label-mini-strong': {
|
|
156
|
+
fontFamily: fontFamily.primary,
|
|
157
|
+
fontSize: '12px',
|
|
158
|
+
fontWeight: wrapVar(fontWeightLabelStrong),
|
|
159
|
+
letterSpacing: wrapVar(letterSpacingLabelMini),
|
|
160
|
+
lineHeight: '14px',
|
|
161
|
+
textTransform: wrapVar(textTransformLabelMini),
|
|
162
|
+
},
|
|
163
|
+
'.hui-text-label-strong': {
|
|
164
|
+
fontFamily: fontFamily.primary,
|
|
165
|
+
fontSize: '14px',
|
|
166
|
+
fontWeight: wrapVar(fontWeightLabelStrong),
|
|
167
|
+
letterSpacing: wrapVar(letterSpacingLabelStrong),
|
|
168
|
+
lineHeight: '22px',
|
|
169
|
+
},
|
|
170
|
+
} satisfies Record<string, CSSRuleObject>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Layout width configuration for Tailwind CSS
|
|
3
|
+
*
|
|
4
|
+
* Internal reference: Hammer UI patterns
|
|
5
|
+
* Ported from the upstream theme system.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import { wrapVar } from '../utils/wrapVar';
|
|
9
|
+
import { widthDense, widthPage } from './cssVars';
|
|
10
|
+
|
|
11
|
+
export const width = {
|
|
12
|
+
dense: wrapVar(widthDense),
|
|
13
|
+
page: wrapVar(widthPage),
|
|
14
|
+
} as const;
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import {
|
|
2
|
+
colorCritical400,
|
|
3
|
+
colorCritical50,
|
|
4
|
+
colorCritical500,
|
|
5
|
+
colorInfo400,
|
|
6
|
+
colorInfo50,
|
|
7
|
+
colorInfo600,
|
|
8
|
+
colorInfo700,
|
|
9
|
+
colorPrimary500,
|
|
10
|
+
colorPrimary700,
|
|
11
|
+
colorPrimary900,
|
|
12
|
+
colorSecondary50,
|
|
13
|
+
colorSuccess300,
|
|
14
|
+
colorSuccess50,
|
|
15
|
+
colorSuccess700,
|
|
16
|
+
colorSuccess900,
|
|
17
|
+
colorSurface100,
|
|
18
|
+
colorSurface200,
|
|
19
|
+
colorSurface300,
|
|
20
|
+
colorSurface50,
|
|
21
|
+
colorSurface500,
|
|
22
|
+
colorSurface900,
|
|
23
|
+
colorTertiary50,
|
|
24
|
+
colorWarning300,
|
|
25
|
+
colorWarning50,
|
|
26
|
+
colorWarning500,
|
|
27
|
+
colorWarning600,
|
|
28
|
+
colorWarning800,
|
|
29
|
+
} from '../tailwind/cssVars';
|
|
30
|
+
import { colorStepArrayToObject, generateNormalColorSteps, generateSurfaceColorSteps } from '../utils/color';
|
|
31
|
+
import { wrapOpacity, wrapVar } from '../utils/wrapVar';
|
|
32
|
+
import { ColorAliasesObject, NonColorCSSVariables } from './generateCSSVars';
|
|
33
|
+
|
|
34
|
+
// "Court Heat" palette (DS-83, approved 2026-07-12): burnt court-orange hero, midnight-navy
|
|
35
|
+
// secondary, hardwood-teal accent, warm leather-undertoned neutrals. Key names are stable API
|
|
36
|
+
// (buildTheme exposes them) so they keep their original hue names; comments give the actual hue.
|
|
37
|
+
export const coreColors = {
|
|
38
|
+
amber: colorStepArrayToObject(generateNormalColorSteps('#B45309')), // burnt amber
|
|
39
|
+
blue: colorStepArrayToObject(generateNormalColorSteps('#0369A1')), // sky blue
|
|
40
|
+
green: colorStepArrayToObject(generateNormalColorSteps('#15803D')), // court green
|
|
41
|
+
neutral: colorStepArrayToObject(generateSurfaceColorSteps('#5D564F', true)), // warm gray
|
|
42
|
+
orange: colorStepArrayToObject(generateNormalColorSteps('#C2410C')), // burnt court orange
|
|
43
|
+
red: colorStepArrayToObject(generateNormalColorSteps('#CC2B20')), // warm signal red
|
|
44
|
+
teal: colorStepArrayToObject(generateNormalColorSteps('#1E3A5F')), // midnight navy (was teal)
|
|
45
|
+
violet: colorStepArrayToObject(generateNormalColorSteps('#0F766E')), // hardwood teal (was violet)
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
export const colorAliases = {
|
|
49
|
+
critical: coreColors.red,
|
|
50
|
+
info: coreColors.blue,
|
|
51
|
+
primary: coreColors.orange,
|
|
52
|
+
secondary: coreColors.teal,
|
|
53
|
+
success: coreColors.green,
|
|
54
|
+
surface: coreColors.neutral,
|
|
55
|
+
tertiary: coreColors.violet,
|
|
56
|
+
warning: coreColors.amber,
|
|
57
|
+
} satisfies ColorAliasesObject;
|
|
58
|
+
|
|
59
|
+
export const nonColorVariables = {
|
|
60
|
+
'--box-shadow-01': `0px 4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
|
|
61
|
+
'--box-shadow-02': `0px 1px 4px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 1px 8px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
|
|
62
|
+
'--box-shadow-03': `0px 2px 8px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 4px 16px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
|
|
63
|
+
'--box-shadow-04': `0px 3px 12px ${wrapOpacity(wrapVar(colorSurface500), 50)}, 0px 6px 24px ${wrapOpacity(wrapVar(colorSurface300), 50)}`,
|
|
64
|
+
'--box-shadow-05': `0px -4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
|
|
65
|
+
'--button-border-radius': '8px',
|
|
66
|
+
'--checkbox-border-radius': '4px',
|
|
67
|
+
'--color-background-critical-dark': wrapVar(colorCritical500),
|
|
68
|
+
'--color-background-critical-light': wrapVar(colorCritical50),
|
|
69
|
+
'--color-background-disabled': wrapVar(colorSurface200),
|
|
70
|
+
'--color-background-hover': wrapVar(colorSurface900),
|
|
71
|
+
'--color-background-hover-inverse': wrapVar(colorSurface50),
|
|
72
|
+
'--color-background-info-dark': wrapVar(colorInfo600),
|
|
73
|
+
'--color-background-info-light': wrapVar(colorInfo50),
|
|
74
|
+
'--color-background-inverse': wrapVar(colorPrimary900),
|
|
75
|
+
'--color-background-overlay': wrapVar(colorSurface900),
|
|
76
|
+
'--color-background-pressed': wrapVar(colorSurface900),
|
|
77
|
+
'--color-background-pressed-inverse': wrapVar(colorSurface50),
|
|
78
|
+
'--color-background-primary': wrapVar(colorSurface50),
|
|
79
|
+
'--color-background-secondary': wrapVar(colorSecondary50),
|
|
80
|
+
'--color-background-subdued': wrapVar(colorSurface100),
|
|
81
|
+
'--color-background-success-dark': wrapVar(colorSuccess900),
|
|
82
|
+
'--color-background-success-light': wrapVar(colorSuccess50),
|
|
83
|
+
'--color-background-tertiary': wrapVar(colorTertiary50),
|
|
84
|
+
'--color-background-warning-dark': wrapVar(colorWarning500),
|
|
85
|
+
'--color-background-warning-light': wrapVar(colorWarning50),
|
|
86
|
+
'--color-border-black': wrapVar(colorSurface900),
|
|
87
|
+
'--color-border-critical': wrapVar(colorCritical400),
|
|
88
|
+
'--color-border-disabled': wrapVar(colorSurface300),
|
|
89
|
+
'--color-border-hover': wrapVar(colorPrimary700),
|
|
90
|
+
'--color-border-info': wrapVar(colorInfo400),
|
|
91
|
+
'--color-border-inverse': wrapVar(colorSurface50),
|
|
92
|
+
'--color-border-primary': wrapVar(colorSurface300),
|
|
93
|
+
'--color-border-secondary': wrapVar(colorSurface200),
|
|
94
|
+
'--color-border-selected': wrapVar(colorPrimary500),
|
|
95
|
+
'--color-border-success': wrapVar(colorSuccess300),
|
|
96
|
+
'--color-border-tertiary': wrapVar(colorSurface100),
|
|
97
|
+
'--color-border-warning': wrapVar(colorWarning300),
|
|
98
|
+
'--color-focus-inverse': wrapVar(colorSurface50),
|
|
99
|
+
'--color-focus-primary': wrapVar(colorPrimary500),
|
|
100
|
+
'--color-icon-critical': wrapVar(colorCritical400),
|
|
101
|
+
'--color-icon-disabled': wrapVar(colorSurface300),
|
|
102
|
+
'--color-icon-info': wrapVar(colorInfo400),
|
|
103
|
+
'--color-icon-inverse': wrapVar(colorSurface50),
|
|
104
|
+
'--color-icon-primary': wrapVar(colorSurface500),
|
|
105
|
+
'--color-icon-secondary': wrapVar(colorPrimary500),
|
|
106
|
+
'--color-icon-success': wrapVar(colorSuccess700),
|
|
107
|
+
'--color-icon-warning': wrapVar(colorWarning600),
|
|
108
|
+
'--color-link-disabled': wrapVar(colorSurface300),
|
|
109
|
+
'--color-link-hover': wrapVar(colorPrimary700),
|
|
110
|
+
'--color-link-inverse': wrapVar(colorSurface50),
|
|
111
|
+
'--color-link-inverse-disabled': wrapVar(colorSurface300),
|
|
112
|
+
'--color-link-inverse-hover': wrapVar(colorSurface100),
|
|
113
|
+
'--color-link-inverse-pressed': wrapVar(colorSurface200),
|
|
114
|
+
'--color-link-monochrome': wrapVar(colorSurface900),
|
|
115
|
+
'--color-link-pressed': wrapVar(colorPrimary900),
|
|
116
|
+
'--color-link-primary': wrapVar(colorPrimary500),
|
|
117
|
+
'--color-link-secondary': wrapVar(colorSurface500),
|
|
118
|
+
'--color-text-critical': wrapVar(colorCritical500),
|
|
119
|
+
'--color-text-disabled': wrapVar(colorSurface300),
|
|
120
|
+
'--color-text-inactive': wrapVar(colorSurface300),
|
|
121
|
+
'--color-text-info': wrapVar(colorInfo700),
|
|
122
|
+
'--color-text-inverse': wrapVar(colorSurface50),
|
|
123
|
+
'--color-text-primary': wrapVar(colorSurface900),
|
|
124
|
+
'--color-text-secondary': wrapVar(colorSurface500),
|
|
125
|
+
'--color-text-success': wrapVar(colorSuccess900),
|
|
126
|
+
'--color-text-warning': wrapVar(colorWarning800),
|
|
127
|
+
'--container-border-radius': '12px',
|
|
128
|
+
'--font-family-primary': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
129
|
+
'--font-family-secondary': "'Georgia', serif",
|
|
130
|
+
'--font-size-button-100': '14px',
|
|
131
|
+
'--font-size-button-200': '12px',
|
|
132
|
+
'--font-weight-body-primary': '400',
|
|
133
|
+
'--font-weight-body-secondary': '400',
|
|
134
|
+
'--font-weight-button': '600',
|
|
135
|
+
'--font-weight-caption': '400',
|
|
136
|
+
'--font-weight-h1': '400',
|
|
137
|
+
'--font-weight-h2': '400',
|
|
138
|
+
'--font-weight-h3': '400',
|
|
139
|
+
'--font-weight-h4': '400',
|
|
140
|
+
'--font-weight-h5': '600',
|
|
141
|
+
'--font-weight-h6': '600',
|
|
142
|
+
'--font-weight-label-mini': '400',
|
|
143
|
+
'--font-weight-label-strong': '600',
|
|
144
|
+
'--input-border-radius': '6px',
|
|
145
|
+
'--letter-spacing-body-primary': '0.2px',
|
|
146
|
+
'--letter-spacing-body-secondary': '0.2px',
|
|
147
|
+
'--letter-spacing-button': '1px',
|
|
148
|
+
'--letter-spacing-caption': '0.2px',
|
|
149
|
+
'--letter-spacing-h1': '0.2px',
|
|
150
|
+
'--letter-spacing-h1-mobile': '0.2px',
|
|
151
|
+
'--letter-spacing-h2': '0.2px',
|
|
152
|
+
'--letter-spacing-h2-mobile': '0.2px',
|
|
153
|
+
'--letter-spacing-h3': '0.2px',
|
|
154
|
+
'--letter-spacing-h3-mobile': '0.2px',
|
|
155
|
+
'--letter-spacing-h4': '0.2px',
|
|
156
|
+
'--letter-spacing-h5': '0.2px',
|
|
157
|
+
'--letter-spacing-h6': '1px',
|
|
158
|
+
'--letter-spacing-label-mini': '1px',
|
|
159
|
+
'--letter-spacing-label-strong': '0.2px',
|
|
160
|
+
'--search-input-border-radius': '24px',
|
|
161
|
+
'--text-transform-button': 'uppercase',
|
|
162
|
+
'--text-transform-h6': 'uppercase',
|
|
163
|
+
'--text-transform-label-mini': 'uppercase',
|
|
164
|
+
'--width-dense': '1200px',
|
|
165
|
+
'--width-page': '1644px',
|
|
166
|
+
} satisfies Record<NonColorCSSVariables, string>;
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import {
|
|
2
|
+
colorCritical400,
|
|
3
|
+
colorCritical50,
|
|
4
|
+
colorCritical500,
|
|
5
|
+
colorInfo400,
|
|
6
|
+
colorInfo50,
|
|
7
|
+
colorInfo600,
|
|
8
|
+
colorInfo700,
|
|
9
|
+
colorPrimary500,
|
|
10
|
+
colorPrimary700,
|
|
11
|
+
colorPrimary900,
|
|
12
|
+
colorSecondary50,
|
|
13
|
+
colorSuccess300,
|
|
14
|
+
colorSuccess50,
|
|
15
|
+
colorSuccess700,
|
|
16
|
+
colorSuccess900,
|
|
17
|
+
colorSurface100,
|
|
18
|
+
colorSurface200,
|
|
19
|
+
colorSurface300,
|
|
20
|
+
colorSurface50,
|
|
21
|
+
colorSurface500,
|
|
22
|
+
colorSurface900,
|
|
23
|
+
colorTertiary50,
|
|
24
|
+
colorWarning300,
|
|
25
|
+
colorWarning50,
|
|
26
|
+
colorWarning500,
|
|
27
|
+
colorWarning600,
|
|
28
|
+
colorWarning800,
|
|
29
|
+
} from '../tailwind/cssVars';
|
|
30
|
+
import { colorStepArrayToObject, generateNormalColorSteps, generateSurfaceColorSteps } from '../utils/color';
|
|
31
|
+
import { wrapOpacity, wrapVar } from '../utils/wrapVar';
|
|
32
|
+
import { ColorAliasesObject, NonColorCSSVariables } from './generateCSSVars';
|
|
33
|
+
|
|
34
|
+
// "Graphite & Ink" palette (DS-83, approved 2026-07-12): deep ink-blue primary over cool graphite
|
|
35
|
+
// neutrals. Key names are stable API (buildTheme exposes them); comments give the actual hue.
|
|
36
|
+
export const coreColors = {
|
|
37
|
+
amber: colorStepArrayToObject(generateNormalColorSteps('#D97706')), // burnt amber
|
|
38
|
+
blue: colorStepArrayToObject(generateNormalColorSteps('#2563EB')), // royal blue
|
|
39
|
+
gray: colorStepArrayToObject(generateNormalColorSteps('#33415C')), // ink blue
|
|
40
|
+
green: colorStepArrayToObject(generateNormalColorSteps('#16A34A')), // emerald
|
|
41
|
+
neutral: colorStepArrayToObject(generateSurfaceColorSteps('#555E6B', true)), // cool graphite
|
|
42
|
+
red: colorStepArrayToObject(generateNormalColorSteps('#D92525')), // signal red
|
|
43
|
+
stone: colorStepArrayToObject(generateNormalColorSteps('#6E6259')), // warm stone
|
|
44
|
+
zinc: colorStepArrayToObject(generateNormalColorSteps('#5C6470')), // cool zinc
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export const colorAliases = {
|
|
48
|
+
critical: coreColors.red,
|
|
49
|
+
info: coreColors.blue,
|
|
50
|
+
primary: coreColors.gray,
|
|
51
|
+
secondary: coreColors.zinc,
|
|
52
|
+
success: coreColors.green,
|
|
53
|
+
surface: coreColors.neutral,
|
|
54
|
+
tertiary: coreColors.stone,
|
|
55
|
+
warning: coreColors.amber,
|
|
56
|
+
} satisfies ColorAliasesObject;
|
|
57
|
+
|
|
58
|
+
export const nonColorVariables = {
|
|
59
|
+
'--box-shadow-01': `0px 4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
|
|
60
|
+
'--box-shadow-02': `0px 1px 4px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 1px 8px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
|
|
61
|
+
'--box-shadow-03': `0px 2px 8px ${wrapOpacity(wrapVar(colorSurface300), 50)}, 0px 4px 16px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
|
|
62
|
+
'--box-shadow-04': `0px 3px 12px ${wrapOpacity(wrapVar(colorSurface500), 50)}, 0px 6px 24px ${wrapOpacity(wrapVar(colorSurface300), 50)}`,
|
|
63
|
+
'--box-shadow-05': `0px -4px 4px ${wrapOpacity(wrapVar(colorSurface200), 50)}`,
|
|
64
|
+
'--button-border-radius': '8px',
|
|
65
|
+
'--checkbox-border-radius': '4px',
|
|
66
|
+
'--color-background-critical-dark': wrapVar(colorCritical500),
|
|
67
|
+
'--color-background-critical-light': wrapVar(colorCritical50),
|
|
68
|
+
'--color-background-disabled': wrapVar(colorSurface200),
|
|
69
|
+
'--color-background-hover': wrapVar(colorSurface900),
|
|
70
|
+
'--color-background-hover-inverse': wrapVar(colorSurface50),
|
|
71
|
+
'--color-background-info-dark': wrapVar(colorInfo600),
|
|
72
|
+
'--color-background-info-light': wrapVar(colorInfo50),
|
|
73
|
+
'--color-background-inverse': wrapVar(colorPrimary900),
|
|
74
|
+
'--color-background-overlay': wrapVar(colorSurface900),
|
|
75
|
+
'--color-background-pressed': wrapVar(colorSurface900),
|
|
76
|
+
'--color-background-pressed-inverse': wrapVar(colorSurface50),
|
|
77
|
+
'--color-background-primary': wrapVar(colorSurface50),
|
|
78
|
+
'--color-background-secondary': wrapVar(colorSecondary50),
|
|
79
|
+
'--color-background-subdued': wrapVar(colorSurface100),
|
|
80
|
+
'--color-background-success-dark': wrapVar(colorSuccess900),
|
|
81
|
+
'--color-background-success-light': wrapVar(colorSuccess50),
|
|
82
|
+
'--color-background-tertiary': wrapVar(colorTertiary50),
|
|
83
|
+
'--color-background-warning-dark': wrapVar(colorWarning500),
|
|
84
|
+
'--color-background-warning-light': wrapVar(colorWarning50),
|
|
85
|
+
'--color-border-black': wrapVar(colorSurface900),
|
|
86
|
+
'--color-border-critical': wrapVar(colorCritical400),
|
|
87
|
+
'--color-border-disabled': wrapVar(colorSurface300),
|
|
88
|
+
'--color-border-hover': wrapVar(colorPrimary700),
|
|
89
|
+
'--color-border-info': wrapVar(colorInfo400),
|
|
90
|
+
'--color-border-inverse': wrapVar(colorSurface50),
|
|
91
|
+
'--color-border-primary': wrapVar(colorSurface300),
|
|
92
|
+
'--color-border-secondary': wrapVar(colorSurface200),
|
|
93
|
+
'--color-border-selected': wrapVar(colorPrimary500),
|
|
94
|
+
'--color-border-success': wrapVar(colorSuccess300),
|
|
95
|
+
'--color-border-tertiary': wrapVar(colorSurface100),
|
|
96
|
+
'--color-border-warning': wrapVar(colorWarning300),
|
|
97
|
+
'--color-focus-inverse': wrapVar(colorSurface50),
|
|
98
|
+
'--color-focus-primary': wrapVar(colorPrimary500),
|
|
99
|
+
'--color-icon-critical': wrapVar(colorCritical400),
|
|
100
|
+
'--color-icon-disabled': wrapVar(colorSurface300),
|
|
101
|
+
'--color-icon-info': wrapVar(colorInfo400),
|
|
102
|
+
'--color-icon-inverse': wrapVar(colorSurface50),
|
|
103
|
+
'--color-icon-primary': wrapVar(colorSurface500),
|
|
104
|
+
'--color-icon-secondary': wrapVar(colorPrimary500),
|
|
105
|
+
'--color-icon-success': wrapVar(colorSuccess700),
|
|
106
|
+
'--color-icon-warning': wrapVar(colorWarning600),
|
|
107
|
+
'--color-link-disabled': wrapVar(colorSurface300),
|
|
108
|
+
'--color-link-hover': wrapVar(colorPrimary700),
|
|
109
|
+
'--color-link-inverse': wrapVar(colorSurface50),
|
|
110
|
+
'--color-link-inverse-disabled': wrapVar(colorSurface300),
|
|
111
|
+
'--color-link-inverse-hover': wrapVar(colorSurface100),
|
|
112
|
+
'--color-link-inverse-pressed': wrapVar(colorSurface200),
|
|
113
|
+
'--color-link-monochrome': wrapVar(colorSurface900),
|
|
114
|
+
'--color-link-pressed': wrapVar(colorPrimary900),
|
|
115
|
+
'--color-link-primary': wrapVar(colorPrimary500),
|
|
116
|
+
'--color-link-secondary': wrapVar(colorSurface500),
|
|
117
|
+
'--color-text-critical': wrapVar(colorCritical500),
|
|
118
|
+
'--color-text-disabled': wrapVar(colorSurface300),
|
|
119
|
+
'--color-text-inactive': wrapVar(colorSurface300),
|
|
120
|
+
'--color-text-info': wrapVar(colorInfo700),
|
|
121
|
+
'--color-text-inverse': wrapVar(colorSurface50),
|
|
122
|
+
'--color-text-primary': wrapVar(colorSurface900),
|
|
123
|
+
'--color-text-secondary': wrapVar(colorSurface500),
|
|
124
|
+
'--color-text-success': wrapVar(colorSuccess900),
|
|
125
|
+
'--color-text-warning': wrapVar(colorWarning800),
|
|
126
|
+
'--container-border-radius': '8px',
|
|
127
|
+
'--font-family-primary': "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
|
|
128
|
+
'--font-family-secondary': "'Georgia', serif",
|
|
129
|
+
'--font-size-button-100': '14px',
|
|
130
|
+
'--font-size-button-200': '12px',
|
|
131
|
+
'--font-weight-body-primary': '400',
|
|
132
|
+
'--font-weight-body-secondary': '400',
|
|
133
|
+
'--font-weight-button': '600',
|
|
134
|
+
'--font-weight-caption': '400',
|
|
135
|
+
'--font-weight-h1': '400',
|
|
136
|
+
'--font-weight-h2': '400',
|
|
137
|
+
'--font-weight-h3': '400',
|
|
138
|
+
'--font-weight-h4': '400',
|
|
139
|
+
'--font-weight-h5': '600',
|
|
140
|
+
'--font-weight-h6': '600',
|
|
141
|
+
'--font-weight-label-mini': '400',
|
|
142
|
+
'--font-weight-label-strong': '600',
|
|
143
|
+
'--input-border-radius': '6px',
|
|
144
|
+
'--letter-spacing-body-primary': '0.2px',
|
|
145
|
+
'--letter-spacing-body-secondary': '0.2px',
|
|
146
|
+
'--letter-spacing-button': '1px',
|
|
147
|
+
'--letter-spacing-caption': '0.2px',
|
|
148
|
+
'--letter-spacing-h1': '0.2px',
|
|
149
|
+
'--letter-spacing-h1-mobile': '0.2px',
|
|
150
|
+
'--letter-spacing-h2': '0.2px',
|
|
151
|
+
'--letter-spacing-h2-mobile': '0.2px',
|
|
152
|
+
'--letter-spacing-h3': '0.2px',
|
|
153
|
+
'--letter-spacing-h3-mobile': '0.2px',
|
|
154
|
+
'--letter-spacing-h4': '0.2px',
|
|
155
|
+
'--letter-spacing-h5': '0.2px',
|
|
156
|
+
'--letter-spacing-h6': '1px',
|
|
157
|
+
'--letter-spacing-label-mini': '1px',
|
|
158
|
+
'--letter-spacing-label-strong': '0.2px',
|
|
159
|
+
'--search-input-border-radius': '24px',
|
|
160
|
+
'--text-transform-button': 'uppercase',
|
|
161
|
+
'--text-transform-h6': 'uppercase',
|
|
162
|
+
'--text-transform-label-mini': 'uppercase',
|
|
163
|
+
'--width-dense': '1200px',
|
|
164
|
+
'--width-page': '1644px',
|
|
165
|
+
} satisfies Record<NonColorCSSVariables, string>;
|