@life-cockpit/angular-ui-kit 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +13 -7
- package/src/styles/_reset.scss +78 -0
- package/src/styles/_theme-dark.scss +237 -0
- package/src/styles/_theme-light.scss +241 -0
- package/src/styles/_typography.scss +123 -0
- package/src/styles/_utilities.scss +141 -0
- package/src/styles/index.scss +17 -0
- package/src/styles/tokens/_all.scss +117 -0
- package/src/styles/tokens/_animation.scss +7 -0
- package/src/styles/tokens/_border-radius.scss +10 -0
- package/src/styles/tokens/_colors.scss +50 -0
- package/src/styles/tokens/_elevation.scss +7 -0
- package/src/styles/tokens/_size.scss +17 -0
- package/src/styles/tokens/_spacing.scss +22 -0
- package/src/styles/tokens/_typography.scss +22 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@life-cockpit/angular-ui-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Life Cockpit Design System - Angular UI component library",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -23,18 +23,24 @@
|
|
|
23
23
|
"@angular/router": "^21.0.0",
|
|
24
24
|
"rxjs": "^7.8.0"
|
|
25
25
|
},
|
|
26
|
-
"sideEffects":
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
"sideEffects": [
|
|
27
|
+
"**/*.css",
|
|
28
|
+
"**/*.scss"
|
|
29
|
+
],
|
|
29
30
|
"exports": {
|
|
30
|
-
"./package.json": {
|
|
31
|
-
"default": "./package.json"
|
|
32
|
-
},
|
|
33
31
|
".": {
|
|
34
32
|
"types": "./types/life-cockpit-angular-ui-kit.d.ts",
|
|
35
33
|
"default": "./fesm2022/life-cockpit-angular-ui-kit.mjs"
|
|
34
|
+
},
|
|
35
|
+
"./styles/*": {
|
|
36
|
+
"default": "./src/styles/*"
|
|
37
|
+
},
|
|
38
|
+
"./package.json": {
|
|
39
|
+
"default": "./package.json"
|
|
36
40
|
}
|
|
37
41
|
},
|
|
42
|
+
"module": "fesm2022/life-cockpit-angular-ui-kit.mjs",
|
|
43
|
+
"typings": "types/life-cockpit-angular-ui-kit.d.ts",
|
|
38
44
|
"type": "module",
|
|
39
45
|
"dependencies": {
|
|
40
46
|
"tslib": "^2.3.0"
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Reset and Normalize Styles
|
|
3
|
+
* Uses normalize.css for cross-browser consistency
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// Import normalize.css for CSS reset
|
|
7
|
+
@use 'normalize.css';
|
|
8
|
+
|
|
9
|
+
// Additional resets
|
|
10
|
+
*,
|
|
11
|
+
*::before,
|
|
12
|
+
*::after {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
html {
|
|
17
|
+
-webkit-font-smoothing: antialiased;
|
|
18
|
+
-moz-osx-font-smoothing: grayscale;
|
|
19
|
+
text-rendering: optimizeLegibility;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
body {
|
|
23
|
+
margin: 0;
|
|
24
|
+
padding: 0;
|
|
25
|
+
min-height: 100vh;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// Remove default button styles
|
|
29
|
+
button {
|
|
30
|
+
border: none;
|
|
31
|
+
background: none;
|
|
32
|
+
padding: 0;
|
|
33
|
+
margin: 0;
|
|
34
|
+
font: inherit;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
|
|
37
|
+
&:focus {
|
|
38
|
+
outline: none;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Remove default input styles
|
|
43
|
+
input,
|
|
44
|
+
textarea,
|
|
45
|
+
select {
|
|
46
|
+
font: inherit;
|
|
47
|
+
color: inherit;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Remove default link styles
|
|
51
|
+
a {
|
|
52
|
+
color: inherit;
|
|
53
|
+
text-decoration: none;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Remove default list styles
|
|
57
|
+
ul,
|
|
58
|
+
ol {
|
|
59
|
+
list-style: none;
|
|
60
|
+
margin: 0;
|
|
61
|
+
padding: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Remove default heading margins
|
|
65
|
+
h1,
|
|
66
|
+
h2,
|
|
67
|
+
h3,
|
|
68
|
+
h4,
|
|
69
|
+
h5,
|
|
70
|
+
h6 {
|
|
71
|
+
margin: 0;
|
|
72
|
+
font-weight: inherit;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Remove default paragraph margins
|
|
76
|
+
p {
|
|
77
|
+
margin: 0;
|
|
78
|
+
}
|
|
@@ -0,0 +1,237 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dark Theme CSS Custom Properties
|
|
3
|
+
*
|
|
4
|
+
* Maps design tokens to CSS custom properties for the dark theme.
|
|
5
|
+
* Color scales are inverted for proper contrast in dark mode.
|
|
6
|
+
* Lighter shades become darker and vice versa.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
@use './tokens/colors' as *;
|
|
10
|
+
@use './tokens/spacing' as *;
|
|
11
|
+
@use './tokens/typography' as *;
|
|
12
|
+
@use './tokens/elevation' as *;
|
|
13
|
+
@use './tokens/border-radius' as *;
|
|
14
|
+
@use './tokens/animation' as *;
|
|
15
|
+
@use './tokens/size' as *;
|
|
16
|
+
|
|
17
|
+
:root.dark {
|
|
18
|
+
// ============================================================================
|
|
19
|
+
// Colors - Primary (Inverted for dark mode)
|
|
20
|
+
// ============================================================================
|
|
21
|
+
--color-primary-50: #{$color-primary-900};
|
|
22
|
+
--color-primary-100: #{$color-primary-800};
|
|
23
|
+
--color-primary-200: #{$color-primary-700};
|
|
24
|
+
--color-primary-300: #{$color-primary-600};
|
|
25
|
+
--color-primary-400: #{$color-primary-500};
|
|
26
|
+
--color-primary-500: #{$color-primary-400};
|
|
27
|
+
--color-primary-600: #{$color-primary-300};
|
|
28
|
+
--color-primary-700: #{$color-primary-200};
|
|
29
|
+
--color-primary-800: #{$color-primary-100};
|
|
30
|
+
--color-primary-900: #{$color-primary-50};
|
|
31
|
+
|
|
32
|
+
// ============================================================================
|
|
33
|
+
// Colors - Secondary (Inverted for dark mode)
|
|
34
|
+
// ============================================================================
|
|
35
|
+
--color-secondary-50: #{$color-secondary-900};
|
|
36
|
+
--color-secondary-100: #{$color-secondary-800};
|
|
37
|
+
--color-secondary-200: #{$color-secondary-700};
|
|
38
|
+
--color-secondary-300: #{$color-secondary-600};
|
|
39
|
+
--color-secondary-400: #{$color-secondary-500};
|
|
40
|
+
--color-secondary-500: #{$color-secondary-400};
|
|
41
|
+
--color-secondary-600: #{$color-secondary-300};
|
|
42
|
+
--color-secondary-700: #{$color-secondary-200};
|
|
43
|
+
--color-secondary-800: #{$color-secondary-100};
|
|
44
|
+
--color-secondary-900: #{$color-secondary-50};
|
|
45
|
+
|
|
46
|
+
// ============================================================================
|
|
47
|
+
// Colors - Neutral (Inverted for dark mode)
|
|
48
|
+
// ============================================================================
|
|
49
|
+
--color-neutral-50: #{$color-neutral-900};
|
|
50
|
+
--color-neutral-100: #{$color-neutral-800};
|
|
51
|
+
--color-neutral-200: #{$color-neutral-700};
|
|
52
|
+
--color-neutral-300: #{$color-neutral-600};
|
|
53
|
+
--color-neutral-400: #{$color-neutral-500};
|
|
54
|
+
--color-neutral-500: #{$color-neutral-400};
|
|
55
|
+
--color-neutral-600: #{$color-neutral-300};
|
|
56
|
+
--color-neutral-700: #{$color-neutral-200};
|
|
57
|
+
--color-neutral-800: #{$color-neutral-100};
|
|
58
|
+
--color-neutral-900: #{$color-neutral-50};
|
|
59
|
+
|
|
60
|
+
// ============================================================================
|
|
61
|
+
// Colors - Semantic (Adjusted for dark mode visibility)
|
|
62
|
+
// ============================================================================
|
|
63
|
+
--color-success-default: #{$color-success-light};
|
|
64
|
+
--color-success-light: #{$color-success-default};
|
|
65
|
+
--color-success-dark: #{$color-success-dark};
|
|
66
|
+
|
|
67
|
+
--color-error-default: #{$color-error-light};
|
|
68
|
+
--color-error-light: #{$color-error-default};
|
|
69
|
+
--color-error-dark: #{$color-error-dark};
|
|
70
|
+
|
|
71
|
+
--color-warning-default: #{$color-warning-light};
|
|
72
|
+
--color-warning-light: #{$color-warning-default};
|
|
73
|
+
--color-warning-dark: #{$color-warning-dark};
|
|
74
|
+
|
|
75
|
+
--color-info-default: #{$color-info-light};
|
|
76
|
+
--color-info-light: #{$color-info-default};
|
|
77
|
+
--color-info-dark: #{$color-info-dark};
|
|
78
|
+
|
|
79
|
+
// ============================================================================
|
|
80
|
+
// Colors - Accent (Same as light theme)
|
|
81
|
+
// ============================================================================
|
|
82
|
+
--color-accent-orange: #{$color-accent-orange};
|
|
83
|
+
--color-accent-purple: #{$color-accent-purple};
|
|
84
|
+
--color-accent-red: #{$color-accent-red};
|
|
85
|
+
--color-accent-rust: #{$color-accent-rust};
|
|
86
|
+
--color-accent-violet: #{$color-accent-violet};
|
|
87
|
+
|
|
88
|
+
// ============================================================================
|
|
89
|
+
// Spacing (Same as light theme)
|
|
90
|
+
// ============================================================================
|
|
91
|
+
--spacing-0: #{$spacing-0};
|
|
92
|
+
--spacing-0-5: #{$spacing-0-5};
|
|
93
|
+
--spacing-1: #{$spacing-1};
|
|
94
|
+
--spacing-1-5: #{$spacing-1-5};
|
|
95
|
+
--spacing-2: #{$spacing-2};
|
|
96
|
+
--spacing-2-5: #{$spacing-2-5};
|
|
97
|
+
--spacing-3: #{$spacing-3};
|
|
98
|
+
--spacing-3-5: #{$spacing-3-5};
|
|
99
|
+
--spacing-4: #{$spacing-4};
|
|
100
|
+
--spacing-5: #{$spacing-5};
|
|
101
|
+
--spacing-6: #{$spacing-6};
|
|
102
|
+
--spacing-7: #{$spacing-7};
|
|
103
|
+
--spacing-8: #{$spacing-8};
|
|
104
|
+
--spacing-9: #{$spacing-9};
|
|
105
|
+
--spacing-10: #{$spacing-10};
|
|
106
|
+
--spacing-11: #{$spacing-11};
|
|
107
|
+
--spacing-12: #{$spacing-12};
|
|
108
|
+
--spacing-14: #{$spacing-14};
|
|
109
|
+
--spacing-16: #{$spacing-16};
|
|
110
|
+
|
|
111
|
+
// ============================================================================
|
|
112
|
+
// Typography - Font Families (Same as light theme)
|
|
113
|
+
// ============================================================================
|
|
114
|
+
--typography-font-family-base: #{$typography-font-family-base};
|
|
115
|
+
--typography-font-family-mono: #{$typography-font-family-mono};
|
|
116
|
+
|
|
117
|
+
// ============================================================================
|
|
118
|
+
// Typography - Font Sizes (Same as light theme)
|
|
119
|
+
// ============================================================================
|
|
120
|
+
--typography-font-size-xs: #{$typography-font-size-xs};
|
|
121
|
+
--typography-font-size-sm: #{$typography-font-size-sm};
|
|
122
|
+
--typography-font-size-base: #{$typography-font-size-base};
|
|
123
|
+
--typography-font-size-lg: #{$typography-font-size-lg};
|
|
124
|
+
--typography-font-size-xl: #{$typography-font-size-xl};
|
|
125
|
+
--typography-font-size-2xl: #{$typography-font-size-2xl};
|
|
126
|
+
--typography-font-size-3xl: #{$typography-font-size-3xl};
|
|
127
|
+
--typography-font-size-4xl: #{$typography-font-size-4xl};
|
|
128
|
+
--typography-font-size-5xl: #{$typography-font-size-5xl};
|
|
129
|
+
--typography-font-size-6xl: #{$typography-font-size-6xl};
|
|
130
|
+
|
|
131
|
+
// ============================================================================
|
|
132
|
+
// Typography - Font Weights (Same as light theme)
|
|
133
|
+
// ============================================================================
|
|
134
|
+
--typography-font-weight-normal: #{$typography-font-weight-normal};
|
|
135
|
+
--typography-font-weight-medium: #{$typography-font-weight-medium};
|
|
136
|
+
--typography-font-weight-semibold: #{$typography-font-weight-semibold};
|
|
137
|
+
--typography-font-weight-bold: #{$typography-font-weight-bold};
|
|
138
|
+
|
|
139
|
+
// ============================================================================
|
|
140
|
+
// Typography - Line Heights (Same as light theme)
|
|
141
|
+
// ============================================================================
|
|
142
|
+
--typography-line-height-tight: #{$typography-line-height-tight};
|
|
143
|
+
--typography-line-height-normal: #{$typography-line-height-normal};
|
|
144
|
+
--typography-line-height-relaxed: #{$typography-line-height-relaxed};
|
|
145
|
+
|
|
146
|
+
// ============================================================================
|
|
147
|
+
// Elevation (Enhanced shadows for dark mode)
|
|
148
|
+
// ============================================================================
|
|
149
|
+
--elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.18);
|
|
150
|
+
--elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.18);
|
|
151
|
+
--elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
|
|
152
|
+
--elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.12);
|
|
153
|
+
|
|
154
|
+
// ============================================================================
|
|
155
|
+
// Border Radius (Same as light theme)
|
|
156
|
+
// ============================================================================
|
|
157
|
+
--border-radius-none: #{$border-radius-none};
|
|
158
|
+
--border-radius-sm: #{$border-radius-sm};
|
|
159
|
+
--border-radius-md: #{$border-radius-md};
|
|
160
|
+
--border-radius-lg: #{$border-radius-lg};
|
|
161
|
+
--border-radius-xl: #{$border-radius-xl};
|
|
162
|
+
--border-radius-2xl: #{$border-radius-2xl};
|
|
163
|
+
--border-radius-full: #{$border-radius-full};
|
|
164
|
+
|
|
165
|
+
// ============================================================================
|
|
166
|
+
// Animation (Same as light theme)
|
|
167
|
+
// ============================================================================
|
|
168
|
+
--animation-duration-base: #{$animation-duration-fast};
|
|
169
|
+
--animation-easing-ease-in: #{$animation-easing-ease-in};
|
|
170
|
+
--animation-easing-ease-out: #{$animation-easing-ease-out};
|
|
171
|
+
--animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
|
|
172
|
+
|
|
173
|
+
// ============================================================================
|
|
174
|
+
// Size - Interactive Elements (Same as light theme)
|
|
175
|
+
// ============================================================================
|
|
176
|
+
--size-interactive-xs-height: #{$size-interactive-xs-height};
|
|
177
|
+
--size-interactive-xs-padding: #{$size-interactive-xs-padding};
|
|
178
|
+
--size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
|
|
179
|
+
|
|
180
|
+
--size-interactive-sm-height: #{$size-interactive-sm-height};
|
|
181
|
+
--size-interactive-sm-padding: #{$size-interactive-sm-padding};
|
|
182
|
+
--size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
|
|
183
|
+
|
|
184
|
+
--size-interactive-md-height: #{$size-interactive-md-height};
|
|
185
|
+
--size-interactive-md-padding: #{$size-interactive-md-padding};
|
|
186
|
+
--size-interactive-md-font-size: #{$size-interactive-md-font-size};
|
|
187
|
+
|
|
188
|
+
--size-interactive-lg-height: #{$size-interactive-lg-height};
|
|
189
|
+
--size-interactive-lg-padding: #{$size-interactive-lg-padding};
|
|
190
|
+
--size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
|
|
191
|
+
|
|
192
|
+
// ============================================================================
|
|
193
|
+
// Size - Minimum Touch Target (Same as light theme)
|
|
194
|
+
// ============================================================================
|
|
195
|
+
--size-min-touch-width: #{$size-min-touch-width};
|
|
196
|
+
--size-min-touch-height: #{$size-min-touch-height};
|
|
197
|
+
|
|
198
|
+
// ============================================================================
|
|
199
|
+
// Semantic Color Mappings for Dark Theme
|
|
200
|
+
// ============================================================================
|
|
201
|
+
--color-background: #{$color-neutral-900};
|
|
202
|
+
--color-surface: #{$color-neutral-800};
|
|
203
|
+
--color-text-primary: #{$color-neutral-50};
|
|
204
|
+
--color-text-secondary: #{$color-neutral-300};
|
|
205
|
+
--color-text-disabled: #{$color-neutral-500};
|
|
206
|
+
--color-border: #{$color-neutral-700};
|
|
207
|
+
--color-divider: #{$color-neutral-800};
|
|
208
|
+
--color-neutral-white: #ffffff;
|
|
209
|
+
// Semantic color aliases for components
|
|
210
|
+
--color-error: #{$color-error-default};
|
|
211
|
+
--color-success: #{$color-success-default};
|
|
212
|
+
--color-warning: #{$color-warning-default};
|
|
213
|
+
--color-info: #{$color-info-default};
|
|
214
|
+
// ============================================================================
|
|
215
|
+
// Short Aliases for Common Usage (Component Convenience)
|
|
216
|
+
// ============================================================================
|
|
217
|
+
--font-family-sans: var(--typography-font-family-base);
|
|
218
|
+
--font-family-mono: var(--typography-font-family-mono);
|
|
219
|
+
--font-size-xs: var(--typography-font-size-xs);
|
|
220
|
+
--font-size-sm: var(--typography-font-size-sm);
|
|
221
|
+
--font-size-base: var(--typography-font-size-base);
|
|
222
|
+
--font-size-lg: var(--typography-font-size-lg);
|
|
223
|
+
--font-size-xl: var(--typography-font-size-xl);
|
|
224
|
+
--font-weight-normal: var(--typography-font-weight-normal);
|
|
225
|
+
--font-weight-medium: var(--typography-font-weight-medium);
|
|
226
|
+
--font-weight-semibold: var(--typography-font-weight-semibold);
|
|
227
|
+
--font-weight-bold: var(--typography-font-weight-bold);
|
|
228
|
+
--line-height-tight: var(--typography-line-height-tight);
|
|
229
|
+
--line-height-normal: var(--typography-line-height-normal);
|
|
230
|
+
--line-height-relaxed: var(--typography-line-height-relaxed);
|
|
231
|
+
--animation-timing-ease: var(--animation-easing-ease-in-out);
|
|
232
|
+
|
|
233
|
+
// Error color scale aliases (for danger buttons, etc.)
|
|
234
|
+
--color-error-600: var(--color-error-default);
|
|
235
|
+
--color-error-700: var(--color-error-dark);
|
|
236
|
+
--color-error-800: #5a0707; // Darker shade for active state
|
|
237
|
+
}
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Light Theme CSS Custom Properties
|
|
3
|
+
*
|
|
4
|
+
* Maps design tokens to CSS custom properties for the light theme.
|
|
5
|
+
* These custom properties enable runtime theme switching and provide
|
|
6
|
+
* semantic color mappings for components.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
@use './tokens/colors' as *;
|
|
10
|
+
@use './tokens/spacing' as *;
|
|
11
|
+
@use './tokens/typography' as *;
|
|
12
|
+
@use './tokens/elevation' as *;
|
|
13
|
+
@use './tokens/border-radius' as *;
|
|
14
|
+
@use './tokens/animation' as *;
|
|
15
|
+
@use './tokens/size' as *;
|
|
16
|
+
|
|
17
|
+
// Default theme (light) on :root
|
|
18
|
+
:root,
|
|
19
|
+
:root.light {
|
|
20
|
+
// ============================================================================
|
|
21
|
+
// Colors - Primary
|
|
22
|
+
// ============================================================================
|
|
23
|
+
--color-primary-50: #{$color-primary-50};
|
|
24
|
+
--color-primary-100: #{$color-primary-100};
|
|
25
|
+
--color-primary-200: #{$color-primary-200};
|
|
26
|
+
--color-primary-300: #{$color-primary-300};
|
|
27
|
+
--color-primary-400: #{$color-primary-400};
|
|
28
|
+
--color-primary-500: #{$color-primary-500};
|
|
29
|
+
--color-primary-600: #{$color-primary-600};
|
|
30
|
+
--color-primary-700: #{$color-primary-700};
|
|
31
|
+
--color-primary-800: #{$color-primary-800};
|
|
32
|
+
--color-primary-900: #{$color-primary-900};
|
|
33
|
+
|
|
34
|
+
// ============================================================================
|
|
35
|
+
// Colors - Secondary
|
|
36
|
+
// ============================================================================
|
|
37
|
+
--color-secondary-50: #{$color-secondary-50};
|
|
38
|
+
--color-secondary-100: #{$color-secondary-100};
|
|
39
|
+
--color-secondary-200: #{$color-secondary-200};
|
|
40
|
+
--color-secondary-300: #{$color-secondary-300};
|
|
41
|
+
--color-secondary-400: #{$color-secondary-400};
|
|
42
|
+
--color-secondary-500: #{$color-secondary-500};
|
|
43
|
+
--color-secondary-600: #{$color-secondary-600};
|
|
44
|
+
--color-secondary-700: #{$color-secondary-700};
|
|
45
|
+
--color-secondary-800: #{$color-secondary-800};
|
|
46
|
+
--color-secondary-900: #{$color-secondary-900};
|
|
47
|
+
|
|
48
|
+
// ============================================================================
|
|
49
|
+
// Colors - Neutral (Grays)
|
|
50
|
+
// ============================================================================
|
|
51
|
+
--color-neutral-50: #{$color-neutral-50};
|
|
52
|
+
--color-neutral-100: #{$color-neutral-100};
|
|
53
|
+
--color-neutral-200: #{$color-neutral-200};
|
|
54
|
+
--color-neutral-300: #{$color-neutral-300};
|
|
55
|
+
--color-neutral-400: #{$color-neutral-400};
|
|
56
|
+
--color-neutral-500: #{$color-neutral-500};
|
|
57
|
+
--color-neutral-600: #{$color-neutral-600};
|
|
58
|
+
--color-neutral-700: #{$color-neutral-700};
|
|
59
|
+
--color-neutral-800: #{$color-neutral-800};
|
|
60
|
+
--color-neutral-900: #{$color-neutral-900};
|
|
61
|
+
|
|
62
|
+
// ============================================================================
|
|
63
|
+
// Colors - Semantic
|
|
64
|
+
// ============================================================================
|
|
65
|
+
--color-success-default: #{$color-success-default};
|
|
66
|
+
--color-success-light: #{$color-success-light};
|
|
67
|
+
--color-success-dark: #{$color-success-dark};
|
|
68
|
+
|
|
69
|
+
--color-error-default: #{$color-error-default};
|
|
70
|
+
--color-error-light: #{$color-error-light};
|
|
71
|
+
--color-error-dark: #{$color-error-dark};
|
|
72
|
+
|
|
73
|
+
--color-warning-default: #{$color-warning-default};
|
|
74
|
+
--color-warning-light: #{$color-warning-light};
|
|
75
|
+
--color-warning-dark: #{$color-warning-dark};
|
|
76
|
+
|
|
77
|
+
--color-info-default: #{$color-info-default};
|
|
78
|
+
--color-info-light: #{$color-info-light};
|
|
79
|
+
--color-info-dark: #{$color-info-dark};
|
|
80
|
+
|
|
81
|
+
// ============================================================================
|
|
82
|
+
// Colors - Accent
|
|
83
|
+
// ============================================================================
|
|
84
|
+
--color-accent-orange: #{$color-accent-orange};
|
|
85
|
+
--color-accent-purple: #{$color-accent-purple};
|
|
86
|
+
--color-accent-red: #{$color-accent-red};
|
|
87
|
+
--color-accent-rust: #{$color-accent-rust};
|
|
88
|
+
--color-accent-violet: #{$color-accent-violet};
|
|
89
|
+
|
|
90
|
+
// ============================================================================
|
|
91
|
+
// Spacing
|
|
92
|
+
// ============================================================================
|
|
93
|
+
--spacing-0: #{$spacing-0};
|
|
94
|
+
--spacing-0-5: #{$spacing-0-5};
|
|
95
|
+
--spacing-1: #{$spacing-1};
|
|
96
|
+
--spacing-1-5: #{$spacing-1-5};
|
|
97
|
+
--spacing-2: #{$spacing-2};
|
|
98
|
+
--spacing-2-5: #{$spacing-2-5};
|
|
99
|
+
--spacing-3: #{$spacing-3};
|
|
100
|
+
--spacing-3-5: #{$spacing-3-5};
|
|
101
|
+
--spacing-4: #{$spacing-4};
|
|
102
|
+
--spacing-5: #{$spacing-5};
|
|
103
|
+
--spacing-6: #{$spacing-6};
|
|
104
|
+
--spacing-7: #{$spacing-7};
|
|
105
|
+
--spacing-8: #{$spacing-8};
|
|
106
|
+
--spacing-9: #{$spacing-9};
|
|
107
|
+
--spacing-10: #{$spacing-10};
|
|
108
|
+
--spacing-11: #{$spacing-11};
|
|
109
|
+
--spacing-12: #{$spacing-12};
|
|
110
|
+
--spacing-14: #{$spacing-14};
|
|
111
|
+
--spacing-16: #{$spacing-16};
|
|
112
|
+
|
|
113
|
+
// ============================================================================
|
|
114
|
+
// Typography - Font Families
|
|
115
|
+
// ============================================================================
|
|
116
|
+
--typography-font-family-base: #{$typography-font-family-base};
|
|
117
|
+
--typography-font-family-mono: #{$typography-font-family-mono};
|
|
118
|
+
|
|
119
|
+
// ============================================================================
|
|
120
|
+
// Typography - Font Sizes
|
|
121
|
+
// ============================================================================
|
|
122
|
+
--typography-font-size-xs: #{$typography-font-size-xs};
|
|
123
|
+
--typography-font-size-sm: #{$typography-font-size-sm};
|
|
124
|
+
--typography-font-size-base: #{$typography-font-size-base};
|
|
125
|
+
--typography-font-size-lg: #{$typography-font-size-lg};
|
|
126
|
+
--typography-font-size-xl: #{$typography-font-size-xl};
|
|
127
|
+
--typography-font-size-2xl: #{$typography-font-size-2xl};
|
|
128
|
+
--typography-font-size-3xl: #{$typography-font-size-3xl};
|
|
129
|
+
--typography-font-size-4xl: #{$typography-font-size-4xl};
|
|
130
|
+
--typography-font-size-5xl: #{$typography-font-size-5xl};
|
|
131
|
+
--typography-font-size-6xl: #{$typography-font-size-6xl};
|
|
132
|
+
|
|
133
|
+
// ============================================================================
|
|
134
|
+
// Typography - Font Weights
|
|
135
|
+
// ============================================================================
|
|
136
|
+
--typography-font-weight-normal: #{$typography-font-weight-normal};
|
|
137
|
+
--typography-font-weight-medium: #{$typography-font-weight-medium};
|
|
138
|
+
--typography-font-weight-semibold: #{$typography-font-weight-semibold};
|
|
139
|
+
--typography-font-weight-bold: #{$typography-font-weight-bold};
|
|
140
|
+
|
|
141
|
+
// ============================================================================
|
|
142
|
+
// Typography - Line Heights
|
|
143
|
+
// ============================================================================
|
|
144
|
+
--typography-line-height-tight: #{$typography-line-height-tight};
|
|
145
|
+
--typography-line-height-normal: #{$typography-line-height-normal};
|
|
146
|
+
--typography-line-height-relaxed: #{$typography-line-height-relaxed};
|
|
147
|
+
|
|
148
|
+
// ============================================================================
|
|
149
|
+
// Elevation (Box Shadows)
|
|
150
|
+
// ============================================================================
|
|
151
|
+
--elevation-1: #{$elevation-1};
|
|
152
|
+
--elevation-2: #{$elevation-2};
|
|
153
|
+
--elevation-3: #{$elevation-3};
|
|
154
|
+
--elevation-4: #{$elevation-4};
|
|
155
|
+
|
|
156
|
+
// ============================================================================
|
|
157
|
+
// Border Radius
|
|
158
|
+
// ============================================================================
|
|
159
|
+
--border-radius-none: #{$border-radius-none};
|
|
160
|
+
--border-radius-sm: #{$border-radius-sm};
|
|
161
|
+
--border-radius-md: #{$border-radius-md};
|
|
162
|
+
--border-radius-lg: #{$border-radius-lg};
|
|
163
|
+
--border-radius-xl: #{$border-radius-xl};
|
|
164
|
+
--border-radius-2xl: #{$border-radius-2xl};
|
|
165
|
+
--border-radius-full: #{$border-radius-full};
|
|
166
|
+
|
|
167
|
+
// ============================================================================
|
|
168
|
+
// Animation
|
|
169
|
+
// ============================================================================
|
|
170
|
+
--animation-duration-base: #{$animation-duration-fast};
|
|
171
|
+
--animation-easing-ease-in: #{$animation-easing-ease-in};
|
|
172
|
+
--animation-easing-ease-out: #{$animation-easing-ease-out};
|
|
173
|
+
--animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
|
|
174
|
+
|
|
175
|
+
// ============================================================================
|
|
176
|
+
// Size - Interactive Elements
|
|
177
|
+
// ============================================================================
|
|
178
|
+
--size-interactive-xs-height: #{$size-interactive-xs-height};
|
|
179
|
+
--size-interactive-xs-padding: #{$size-interactive-xs-padding};
|
|
180
|
+
--size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
|
|
181
|
+
|
|
182
|
+
--size-interactive-sm-height: #{$size-interactive-sm-height};
|
|
183
|
+
--size-interactive-sm-padding: #{$size-interactive-sm-padding};
|
|
184
|
+
--size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
|
|
185
|
+
|
|
186
|
+
--size-interactive-md-height: #{$size-interactive-md-height};
|
|
187
|
+
--size-interactive-md-padding: #{$size-interactive-md-padding};
|
|
188
|
+
--size-interactive-md-font-size: #{$size-interactive-md-font-size};
|
|
189
|
+
|
|
190
|
+
--size-interactive-lg-height: #{$size-interactive-lg-height};
|
|
191
|
+
--size-interactive-lg-padding: #{$size-interactive-lg-padding};
|
|
192
|
+
--size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
|
|
193
|
+
|
|
194
|
+
// ============================================================================
|
|
195
|
+
// Size - Minimum Touch Target
|
|
196
|
+
// ============================================================================
|
|
197
|
+
--size-min-touch-width: #{$size-min-touch-width};
|
|
198
|
+
--size-min-touch-height: #{$size-min-touch-height};
|
|
199
|
+
|
|
200
|
+
// ============================================================================
|
|
201
|
+
// Semantic Color Mappings for Light Theme
|
|
202
|
+
// ============================================================================
|
|
203
|
+
--color-background: #ffffff;
|
|
204
|
+
--color-surface: #ffffff;
|
|
205
|
+
--color-text-primary: #{$color-neutral-900};
|
|
206
|
+
--color-text-secondary: #{$color-neutral-600};
|
|
207
|
+
--color-text-disabled: #{$color-neutral-400};
|
|
208
|
+
--color-border: #{$color-neutral-300};
|
|
209
|
+
--color-divider: #{$color-neutral-200};
|
|
210
|
+
--color-neutral-white: #ffffff;
|
|
211
|
+
|
|
212
|
+
// Semantic color aliases for components
|
|
213
|
+
--color-error: #{$color-error-default};
|
|
214
|
+
--color-success: #{$color-success-default};
|
|
215
|
+
--color-warning: #{$color-warning-default};
|
|
216
|
+
--color-info: #{$color-info-default};
|
|
217
|
+
|
|
218
|
+
// ============================================================================
|
|
219
|
+
// Short Aliases for Common Usage (Component Convenience)
|
|
220
|
+
// ============================================================================
|
|
221
|
+
--font-family-sans: var(--typography-font-family-base);
|
|
222
|
+
--font-family-mono: var(--typography-font-family-mono);
|
|
223
|
+
--font-size-xs: var(--typography-font-size-xs);
|
|
224
|
+
--font-size-sm: var(--typography-font-size-sm);
|
|
225
|
+
--font-size-base: var(--typography-font-size-base);
|
|
226
|
+
--font-size-lg: var(--typography-font-size-lg);
|
|
227
|
+
--font-size-xl: var(--typography-font-size-xl);
|
|
228
|
+
--font-weight-normal: var(--typography-font-weight-normal);
|
|
229
|
+
--font-weight-medium: var(--typography-font-weight-medium);
|
|
230
|
+
--font-weight-semibold: var(--typography-font-weight-semibold);
|
|
231
|
+
--font-weight-bold: var(--typography-font-weight-bold);
|
|
232
|
+
--line-height-tight: var(--typography-line-height-tight);
|
|
233
|
+
--line-height-normal: var(--typography-line-height-normal);
|
|
234
|
+
--line-height-relaxed: var(--typography-line-height-relaxed);
|
|
235
|
+
--animation-timing-ease: var(--animation-easing-ease-in-out);
|
|
236
|
+
|
|
237
|
+
// Error color scale aliases (for danger buttons, etc.)
|
|
238
|
+
--color-error-600: var(--color-error-default);
|
|
239
|
+
--color-error-700: var(--color-error-dark);
|
|
240
|
+
--color-error-800: #5a0707; // Darker shade for active state
|
|
241
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Typography Styles
|
|
3
|
+
* Based on design system typography scale
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
// Font families
|
|
8
|
+
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
|
9
|
+
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
10
|
+
--font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono',
|
|
11
|
+
'Source Code Pro', monospace;
|
|
12
|
+
|
|
13
|
+
// Font sizes
|
|
14
|
+
--font-size-xs: 0.75rem; // 12px
|
|
15
|
+
--font-size-sm: 0.875rem; // 14px
|
|
16
|
+
--font-size-base: 1rem; // 16px
|
|
17
|
+
--font-size-lg: 1.125rem; // 18px
|
|
18
|
+
--font-size-xl: 1.25rem; // 20px
|
|
19
|
+
--font-size-2xl: 1.5rem; // 24px
|
|
20
|
+
--font-size-3xl: 1.875rem; // 30px
|
|
21
|
+
--font-size-4xl: 2.25rem; // 36px
|
|
22
|
+
--font-size-5xl: 3rem; // 48px
|
|
23
|
+
--font-size-6xl: 3.75rem; // 60px
|
|
24
|
+
|
|
25
|
+
// Line heights
|
|
26
|
+
--line-height-tight: 1.25;
|
|
27
|
+
--line-height-normal: 1.5;
|
|
28
|
+
--line-height-relaxed: 1.75;
|
|
29
|
+
|
|
30
|
+
// Font weights
|
|
31
|
+
--font-weight-normal: 400;
|
|
32
|
+
--font-weight-medium: 500;
|
|
33
|
+
--font-weight-semibold: 600;
|
|
34
|
+
--font-weight-bold: 700;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
body {
|
|
38
|
+
font-family: var(--font-family-base);
|
|
39
|
+
font-size: var(--font-size-base);
|
|
40
|
+
line-height: var(--line-height-normal);
|
|
41
|
+
font-weight: var(--font-weight-normal);
|
|
42
|
+
color: var(--color-text-primary, #111827);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Heading styles
|
|
46
|
+
h1 {
|
|
47
|
+
font-size: var(--font-size-5xl);
|
|
48
|
+
line-height: var(--line-height-tight);
|
|
49
|
+
font-weight: var(--font-weight-bold);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
h2 {
|
|
53
|
+
font-size: var(--font-size-4xl);
|
|
54
|
+
line-height: var(--line-height-tight);
|
|
55
|
+
font-weight: var(--font-weight-bold);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
h3 {
|
|
59
|
+
font-size: var(--font-size-3xl);
|
|
60
|
+
line-height: var(--line-height-tight);
|
|
61
|
+
font-weight: var(--font-weight-semibold);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
h4 {
|
|
65
|
+
font-size: var(--font-size-2xl);
|
|
66
|
+
line-height: var(--line-height-normal);
|
|
67
|
+
font-weight: var(--font-weight-semibold);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
h5 {
|
|
71
|
+
font-size: var(--font-size-xl);
|
|
72
|
+
line-height: var(--line-height-normal);
|
|
73
|
+
font-weight: var(--font-weight-medium);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
h6 {
|
|
77
|
+
font-size: var(--font-size-lg);
|
|
78
|
+
line-height: var(--line-height-normal);
|
|
79
|
+
font-weight: var(--font-weight-medium);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Code styles
|
|
83
|
+
code {
|
|
84
|
+
font-family: var(--font-family-mono);
|
|
85
|
+
font-size: 0.875em;
|
|
86
|
+
padding: 0.125rem 0.25rem;
|
|
87
|
+
background-color: var(--color-neutral-100);
|
|
88
|
+
color: var(--color-text-primary);
|
|
89
|
+
border-radius: 0.25rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
pre {
|
|
93
|
+
font-family: var(--font-family-mono);
|
|
94
|
+
font-size: var(--font-size-sm);
|
|
95
|
+
padding: 1rem;
|
|
96
|
+
background-color: var(--color-neutral-900);
|
|
97
|
+
color: var(--color-neutral-50);
|
|
98
|
+
border-radius: 0.5rem;
|
|
99
|
+
overflow-x: auto;
|
|
100
|
+
|
|
101
|
+
code {
|
|
102
|
+
padding: 0;
|
|
103
|
+
background-color: transparent;
|
|
104
|
+
color: inherit;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Small text
|
|
109
|
+
small {
|
|
110
|
+
font-size: var(--font-size-sm);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// Strong and bold
|
|
114
|
+
strong,
|
|
115
|
+
b {
|
|
116
|
+
font-weight: var(--font-weight-bold);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// Emphasis
|
|
120
|
+
em,
|
|
121
|
+
i {
|
|
122
|
+
font-style: italic;
|
|
123
|
+
}
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Utility Classes
|
|
3
|
+
* Common utility classes for spacing, display, and more
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// Screen reader only
|
|
7
|
+
.sr-only {
|
|
8
|
+
position: absolute;
|
|
9
|
+
width: 1px;
|
|
10
|
+
height: 1px;
|
|
11
|
+
padding: 0;
|
|
12
|
+
margin: -1px;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
clip: rect(0, 0, 0, 0);
|
|
15
|
+
white-space: nowrap;
|
|
16
|
+
border-width: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Focus visible styles
|
|
20
|
+
.focus-visible {
|
|
21
|
+
outline: 2px solid var(--color-primary-500, #208497);
|
|
22
|
+
outline-offset: 2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Skip to content link (accessibility)
|
|
26
|
+
.skip-to-content {
|
|
27
|
+
position: absolute;
|
|
28
|
+
top: -40px;
|
|
29
|
+
left: 0;
|
|
30
|
+
z-index: 100;
|
|
31
|
+
padding: 0.5rem 1rem;
|
|
32
|
+
background-color: var(--color-primary-500, #208497);
|
|
33
|
+
color: white;
|
|
34
|
+
text-decoration: none;
|
|
35
|
+
border-radius: 0 0 0.25rem 0;
|
|
36
|
+
|
|
37
|
+
&:focus {
|
|
38
|
+
top: 0;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Container utility
|
|
43
|
+
.container {
|
|
44
|
+
width: 100%;
|
|
45
|
+
max-width: 1280px;
|
|
46
|
+
margin-left: auto;
|
|
47
|
+
margin-right: auto;
|
|
48
|
+
padding-left: 1rem;
|
|
49
|
+
padding-right: 1rem;
|
|
50
|
+
|
|
51
|
+
@media (min-width: 640px) {
|
|
52
|
+
padding-left: 1.5rem;
|
|
53
|
+
padding-right: 1.5rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (min-width: 1024px) {
|
|
57
|
+
padding-left: 2rem;
|
|
58
|
+
padding-right: 2rem;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Truncate text
|
|
63
|
+
.truncate {
|
|
64
|
+
overflow: hidden;
|
|
65
|
+
text-overflow: ellipsis;
|
|
66
|
+
white-space: nowrap;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// Line clamp utilities
|
|
70
|
+
.line-clamp-1 {
|
|
71
|
+
display: -webkit-box;
|
|
72
|
+
-webkit-line-clamp: 1;
|
|
73
|
+
line-clamp: 1;
|
|
74
|
+
-webkit-box-orient: vertical;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.line-clamp-2 {
|
|
79
|
+
display: -webkit-box;
|
|
80
|
+
-webkit-line-clamp: 2;
|
|
81
|
+
line-clamp: 2;
|
|
82
|
+
-webkit-box-orient: vertical;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.line-clamp-3 {
|
|
87
|
+
display: -webkit-box;
|
|
88
|
+
-webkit-line-clamp: 3;
|
|
89
|
+
line-clamp: 3;
|
|
90
|
+
-webkit-box-orient: vertical;
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Aspect ratio utilities
|
|
95
|
+
.aspect-square {
|
|
96
|
+
aspect-ratio: 1 / 1;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.aspect-video {
|
|
100
|
+
aspect-ratio: 16 / 9;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// Animation utilities
|
|
104
|
+
@media (prefers-reduced-motion: reduce) {
|
|
105
|
+
*,
|
|
106
|
+
*::before,
|
|
107
|
+
*::after {
|
|
108
|
+
animation-duration: 0.01ms !important;
|
|
109
|
+
animation-iteration-count: 1 !important;
|
|
110
|
+
transition-duration: 0.01ms !important;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// Focus ring utility
|
|
115
|
+
.focus-ring {
|
|
116
|
+
&:focus-visible {
|
|
117
|
+
outline: 2px solid var(--color-primary-500, #208497);
|
|
118
|
+
outline-offset: 2px;
|
|
119
|
+
border-radius: 0.25rem;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Disabled state utility
|
|
124
|
+
.disabled {
|
|
125
|
+
opacity: 0.5;
|
|
126
|
+
cursor: not-allowed;
|
|
127
|
+
pointer-events: none;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
// Visually hidden but accessible
|
|
131
|
+
.visually-hidden {
|
|
132
|
+
position: absolute;
|
|
133
|
+
width: 1px;
|
|
134
|
+
height: 1px;
|
|
135
|
+
padding: 0;
|
|
136
|
+
margin: -1px;
|
|
137
|
+
overflow: hidden;
|
|
138
|
+
clip: rect(0, 0, 0, 0);
|
|
139
|
+
white-space: nowrap;
|
|
140
|
+
border: 0;
|
|
141
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Global Styles Entry Point
|
|
3
|
+
* Import this file in your Angular application's styles.scss to use the design system
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
// 1. Themes (must be first to define CSS custom properties)
|
|
7
|
+
@use './theme-light';
|
|
8
|
+
@use './theme-dark';
|
|
9
|
+
|
|
10
|
+
// 2. Reset and normalize
|
|
11
|
+
@use './reset';
|
|
12
|
+
|
|
13
|
+
// 3. Typography
|
|
14
|
+
@use './typography';
|
|
15
|
+
|
|
16
|
+
// 4. Utilities
|
|
17
|
+
@use './utilities';
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$color-primary-50: #f0f8fa;
|
|
5
|
+
$color-primary-100: #e0f1f4;
|
|
6
|
+
$color-primary-200: #c1e3e9;
|
|
7
|
+
$color-primary-300: #a3d5df;
|
|
8
|
+
$color-primary-400: #84c7d4;
|
|
9
|
+
$color-primary-500: #208497; // Primary brand color from lc-design
|
|
10
|
+
$color-primary-600: #1a6a79;
|
|
11
|
+
$color-primary-700: #144f5b;
|
|
12
|
+
$color-primary-800: #0d353d;
|
|
13
|
+
$color-primary-900: #071a1f;
|
|
14
|
+
$color-secondary-50: #f5f8f9;
|
|
15
|
+
$color-secondary-100: #ebf1f3;
|
|
16
|
+
$color-secondary-200: #d7e3e7;
|
|
17
|
+
$color-secondary-300: #c3d5db;
|
|
18
|
+
$color-secondary-400: #afc7cf;
|
|
19
|
+
$color-secondary-500: #7097af; // Secondary brand color from lc-design
|
|
20
|
+
$color-secondary-600: #5a798c;
|
|
21
|
+
$color-secondary-700: #435b69;
|
|
22
|
+
$color-secondary-800: #2d3c46;
|
|
23
|
+
$color-secondary-900: #161e23;
|
|
24
|
+
$color-neutral-50: #f9fafb;
|
|
25
|
+
$color-neutral-100: #f3f4f6;
|
|
26
|
+
$color-neutral-200: #e5e7eb;
|
|
27
|
+
$color-neutral-300: #d1d5db;
|
|
28
|
+
$color-neutral-400: #9ca3af;
|
|
29
|
+
$color-neutral-500: #6b7280;
|
|
30
|
+
$color-neutral-600: #4b5563;
|
|
31
|
+
$color-neutral-700: #374151;
|
|
32
|
+
$color-neutral-800: #1f2937;
|
|
33
|
+
$color-neutral-900: #111827;
|
|
34
|
+
$color-success-default: #8ea475;
|
|
35
|
+
$color-success-light: #cdd6c2;
|
|
36
|
+
$color-success-dark: #5f7150;
|
|
37
|
+
$color-error-default: #9d0e0e;
|
|
38
|
+
$color-error-light: #f7a1a1;
|
|
39
|
+
$color-error-dark: #6b0909;
|
|
40
|
+
$color-warning-default: #e1a040;
|
|
41
|
+
$color-warning-light: #f1d3a7;
|
|
42
|
+
$color-warning-dark: #9b6b2b;
|
|
43
|
+
$color-info-default: #3b6588;
|
|
44
|
+
$color-info-light: #b8cee0;
|
|
45
|
+
$color-info-dark: #27445c;
|
|
46
|
+
$color-accent-orange: #df792e;
|
|
47
|
+
$color-accent-purple: #866aa0;
|
|
48
|
+
$color-accent-red: #9e3846;
|
|
49
|
+
$color-accent-rust: #c6592e;
|
|
50
|
+
$color-accent-violet: #4e3f84;
|
|
51
|
+
$spacing-0: 0;
|
|
52
|
+
$spacing-1: 0.25rem; // 4px - Base grid unit
|
|
53
|
+
$spacing-2: 0.5rem; // 8px
|
|
54
|
+
$spacing-3: 0.75rem; // 12px
|
|
55
|
+
$spacing-4: 1rem; // 16px
|
|
56
|
+
$spacing-5: 1.25rem; // 20px
|
|
57
|
+
$spacing-6: 1.5rem; // 24px
|
|
58
|
+
$spacing-7: 1.75rem; // 28px
|
|
59
|
+
$spacing-8: 2rem; // 32px
|
|
60
|
+
$spacing-9: 2.25rem; // 36px
|
|
61
|
+
$spacing-10: 2.5rem; // 40px
|
|
62
|
+
$spacing-11: 2.75rem; // 44px - Minimum touch target
|
|
63
|
+
$spacing-12: 3rem; // 48px
|
|
64
|
+
$spacing-14: 3.5rem; // 56px
|
|
65
|
+
$spacing-16: 4rem; // 64px
|
|
66
|
+
$spacing-0-5: 0.125rem; // 2px
|
|
67
|
+
$spacing-1-5: 0.375rem; // 6px
|
|
68
|
+
$spacing-2-5: 0.625rem; // 10px
|
|
69
|
+
$spacing-3-5: 0.875rem; // 14px
|
|
70
|
+
$typography-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
71
|
+
$typography-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
|
|
72
|
+
$typography-font-size-xs: 0.75rem; // 12px
|
|
73
|
+
$typography-font-size-sm: 0.875rem; // 14px
|
|
74
|
+
$typography-font-size-base: 1rem; // 16px
|
|
75
|
+
$typography-font-size-lg: 1.125rem; // 18px
|
|
76
|
+
$typography-font-size-xl: 1.25rem; // 20px
|
|
77
|
+
$typography-font-size-2xl: 1.5rem; // 24px
|
|
78
|
+
$typography-font-size-3xl: 1.875rem; // 30px
|
|
79
|
+
$typography-font-size-4xl: 2.25rem; // 36px
|
|
80
|
+
$typography-font-size-5xl: 3rem; // 48px
|
|
81
|
+
$typography-font-size-6xl: 3.75rem; // 60px
|
|
82
|
+
$typography-font-weight-normal: 400;
|
|
83
|
+
$typography-font-weight-medium: 500;
|
|
84
|
+
$typography-font-weight-semibold: 600;
|
|
85
|
+
$typography-font-weight-bold: 700;
|
|
86
|
+
$typography-line-height-tight: 1.25;
|
|
87
|
+
$typography-line-height-normal: 1.5;
|
|
88
|
+
$typography-line-height-relaxed: 1.75;
|
|
89
|
+
$elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // Subtle elevation for cards
|
|
90
|
+
$elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // Medium elevation for dropdowns
|
|
91
|
+
$elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); // High elevation for modals
|
|
92
|
+
$elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); // Highest elevation for tooltips
|
|
93
|
+
$border-radius-none: 0;
|
|
94
|
+
$border-radius-sm: 0.25rem; // 4px
|
|
95
|
+
$border-radius-md: 0.5rem; // 8px - Default
|
|
96
|
+
$border-radius-lg: 0.75rem; // 12px
|
|
97
|
+
$border-radius-xl: 1rem; // 16px
|
|
98
|
+
$border-radius-2xl: 1.5rem; // 24px
|
|
99
|
+
$border-radius-full: 9999px; // Fully rounded
|
|
100
|
+
$animation-duration-fast: 150ms; // Standard animation duration
|
|
101
|
+
$animation-easing-ease-in: ease-in;
|
|
102
|
+
$animation-easing-ease-out: ease-out;
|
|
103
|
+
$animation-easing-ease-in-out: ease-in-out;
|
|
104
|
+
$size-interactive-xs-height: 1.5rem; // 24px
|
|
105
|
+
$size-interactive-xs-padding: 0.25rem 0.5rem;
|
|
106
|
+
$size-interactive-xs-font-size: 0.75rem;
|
|
107
|
+
$size-interactive-sm-height: 2rem; // 32px
|
|
108
|
+
$size-interactive-sm-padding: 0.375rem 0.75rem;
|
|
109
|
+
$size-interactive-sm-font-size: 0.875rem;
|
|
110
|
+
$size-interactive-md-height: 2.5rem; // 40px - Default
|
|
111
|
+
$size-interactive-md-padding: 0.5rem 1rem;
|
|
112
|
+
$size-interactive-md-font-size: 1rem;
|
|
113
|
+
$size-interactive-lg-height: 2.75rem; // 44px - Minimum touch target
|
|
114
|
+
$size-interactive-lg-padding: 0.625rem 1.25rem;
|
|
115
|
+
$size-interactive-lg-font-size: 1.125rem;
|
|
116
|
+
$size-min-touch-width: 2.75rem; // 44px minimum
|
|
117
|
+
$size-min-touch-height: 2.75rem; // 44px minimum
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$border-radius-none: 0;
|
|
5
|
+
$border-radius-sm: 0.25rem; // 4px
|
|
6
|
+
$border-radius-md: 0.5rem; // 8px - Default
|
|
7
|
+
$border-radius-lg: 0.75rem; // 12px
|
|
8
|
+
$border-radius-xl: 1rem; // 16px
|
|
9
|
+
$border-radius-2xl: 1.5rem; // 24px
|
|
10
|
+
$border-radius-full: 9999px; // Fully rounded
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$color-primary-50: #f0f8fa;
|
|
5
|
+
$color-primary-100: #e0f1f4;
|
|
6
|
+
$color-primary-200: #c1e3e9;
|
|
7
|
+
$color-primary-300: #a3d5df;
|
|
8
|
+
$color-primary-400: #84c7d4;
|
|
9
|
+
$color-primary-500: #208497; // Primary brand color from lc-design
|
|
10
|
+
$color-primary-600: #1a6a79;
|
|
11
|
+
$color-primary-700: #144f5b;
|
|
12
|
+
$color-primary-800: #0d353d;
|
|
13
|
+
$color-primary-900: #071a1f;
|
|
14
|
+
$color-secondary-50: #f5f8f9;
|
|
15
|
+
$color-secondary-100: #ebf1f3;
|
|
16
|
+
$color-secondary-200: #d7e3e7;
|
|
17
|
+
$color-secondary-300: #c3d5db;
|
|
18
|
+
$color-secondary-400: #afc7cf;
|
|
19
|
+
$color-secondary-500: #7097af; // Secondary brand color from lc-design
|
|
20
|
+
$color-secondary-600: #5a798c;
|
|
21
|
+
$color-secondary-700: #435b69;
|
|
22
|
+
$color-secondary-800: #2d3c46;
|
|
23
|
+
$color-secondary-900: #161e23;
|
|
24
|
+
$color-neutral-50: #f9fafb;
|
|
25
|
+
$color-neutral-100: #f3f4f6;
|
|
26
|
+
$color-neutral-200: #e5e7eb;
|
|
27
|
+
$color-neutral-300: #d1d5db;
|
|
28
|
+
$color-neutral-400: #9ca3af;
|
|
29
|
+
$color-neutral-500: #6b7280;
|
|
30
|
+
$color-neutral-600: #4b5563;
|
|
31
|
+
$color-neutral-700: #374151;
|
|
32
|
+
$color-neutral-800: #1f2937;
|
|
33
|
+
$color-neutral-900: #111827;
|
|
34
|
+
$color-success-default: #8ea475;
|
|
35
|
+
$color-success-light: #cdd6c2;
|
|
36
|
+
$color-success-dark: #5f7150;
|
|
37
|
+
$color-error-default: #9d0e0e;
|
|
38
|
+
$color-error-light: #f7a1a1;
|
|
39
|
+
$color-error-dark: #6b0909;
|
|
40
|
+
$color-warning-default: #e1a040;
|
|
41
|
+
$color-warning-light: #f1d3a7;
|
|
42
|
+
$color-warning-dark: #9b6b2b;
|
|
43
|
+
$color-info-default: #3b6588;
|
|
44
|
+
$color-info-light: #b8cee0;
|
|
45
|
+
$color-info-dark: #27445c;
|
|
46
|
+
$color-accent-orange: #df792e;
|
|
47
|
+
$color-accent-purple: #866aa0;
|
|
48
|
+
$color-accent-red: #9e3846;
|
|
49
|
+
$color-accent-rust: #c6592e;
|
|
50
|
+
$color-accent-violet: #4e3f84;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // Subtle elevation for cards
|
|
5
|
+
$elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); // Medium elevation for dropdowns
|
|
6
|
+
$elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); // High elevation for modals
|
|
7
|
+
$elevation-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); // Highest elevation for tooltips
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$size-interactive-xs-height: 1.5rem; // 24px
|
|
5
|
+
$size-interactive-xs-padding: 0.25rem 0.5rem;
|
|
6
|
+
$size-interactive-xs-font-size: 0.75rem;
|
|
7
|
+
$size-interactive-sm-height: 2rem; // 32px
|
|
8
|
+
$size-interactive-sm-padding: 0.375rem 0.75rem;
|
|
9
|
+
$size-interactive-sm-font-size: 0.875rem;
|
|
10
|
+
$size-interactive-md-height: 2.5rem; // 40px - Default
|
|
11
|
+
$size-interactive-md-padding: 0.5rem 1rem;
|
|
12
|
+
$size-interactive-md-font-size: 1rem;
|
|
13
|
+
$size-interactive-lg-height: 2.75rem; // 44px - Minimum touch target
|
|
14
|
+
$size-interactive-lg-padding: 0.625rem 1.25rem;
|
|
15
|
+
$size-interactive-lg-font-size: 1.125rem;
|
|
16
|
+
$size-min-touch-width: 2.75rem; // 44px minimum
|
|
17
|
+
$size-min-touch-height: 2.75rem; // 44px minimum
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$spacing-0: 0;
|
|
5
|
+
$spacing-1: 0.25rem; // 4px - Base grid unit
|
|
6
|
+
$spacing-2: 0.5rem; // 8px
|
|
7
|
+
$spacing-3: 0.75rem; // 12px
|
|
8
|
+
$spacing-4: 1rem; // 16px
|
|
9
|
+
$spacing-5: 1.25rem; // 20px
|
|
10
|
+
$spacing-6: 1.5rem; // 24px
|
|
11
|
+
$spacing-7: 1.75rem; // 28px
|
|
12
|
+
$spacing-8: 2rem; // 32px
|
|
13
|
+
$spacing-9: 2.25rem; // 36px
|
|
14
|
+
$spacing-10: 2.5rem; // 40px
|
|
15
|
+
$spacing-11: 2.75rem; // 44px - Minimum touch target
|
|
16
|
+
$spacing-12: 3rem; // 48px
|
|
17
|
+
$spacing-14: 3.5rem; // 56px
|
|
18
|
+
$spacing-16: 4rem; // 64px
|
|
19
|
+
$spacing-0-5: 0.125rem; // 2px
|
|
20
|
+
$spacing-1-5: 0.375rem; // 6px
|
|
21
|
+
$spacing-2-5: 0.625rem; // 10px
|
|
22
|
+
$spacing-3-5: 0.875rem; // 14px
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly, this file was auto-generated.
|
|
3
|
+
|
|
4
|
+
$typography-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
5
|
+
$typography-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
|
|
6
|
+
$typography-font-size-xs: 0.75rem; // 12px
|
|
7
|
+
$typography-font-size-sm: 0.875rem; // 14px
|
|
8
|
+
$typography-font-size-base: 1rem; // 16px
|
|
9
|
+
$typography-font-size-lg: 1.125rem; // 18px
|
|
10
|
+
$typography-font-size-xl: 1.25rem; // 20px
|
|
11
|
+
$typography-font-size-2xl: 1.5rem; // 24px
|
|
12
|
+
$typography-font-size-3xl: 1.875rem; // 30px
|
|
13
|
+
$typography-font-size-4xl: 2.25rem; // 36px
|
|
14
|
+
$typography-font-size-5xl: 3rem; // 48px
|
|
15
|
+
$typography-font-size-6xl: 3.75rem; // 60px
|
|
16
|
+
$typography-font-weight-normal: 400;
|
|
17
|
+
$typography-font-weight-medium: 500;
|
|
18
|
+
$typography-font-weight-semibold: 600;
|
|
19
|
+
$typography-font-weight-bold: 700;
|
|
20
|
+
$typography-line-height-tight: 1.25;
|
|
21
|
+
$typography-line-height-normal: 1.5;
|
|
22
|
+
$typography-line-height-relaxed: 1.75;
|