@altrex-ui/styling 1.0.0 → 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.
Files changed (4) hide show
  1. package/dist/tokens.css +38 -0
  2. package/dist/tokens.js +134 -0
  3. package/dist/tokens.styl +51 -0
  4. package/package.json +1 -1
package/dist/tokens.css CHANGED
@@ -46,6 +46,44 @@
46
46
  --altrex-colors-info-50: #e6f7ff;
47
47
  --altrex-colors-info-500: #3b82f6;
48
48
  --altrex-colors-info-900: #1e3a8a;
49
+ --altrex-colors-dark-bg-base: #0a0a0a;
50
+ --altrex-colors-dark-bg-surface: #121212;
51
+ --altrex-colors-dark-bg-elevated: #1e1e1e;
52
+ --altrex-colors-dark-bg-hover: #2a2a2a;
53
+ --altrex-colors-dark-bg-overlay: rgba(0, 0, 0, 0.85);
54
+ --altrex-colors-dark-text-primary: #ffffff;
55
+ --altrex-colors-dark-text-secondary: #b4b4b4;
56
+ --altrex-colors-dark-text-tertiary: #8a8a8a;
57
+ --altrex-colors-dark-text-disabled: #5a5a5a;
58
+ --altrex-colors-dark-text-inverse: #0a0a0a;
59
+ --altrex-colors-dark-border-default: #3a3a3a;
60
+ --altrex-colors-dark-border-subtle: #2a2a2a;
61
+ --altrex-colors-dark-border-strong: #4a4a4a;
62
+ --altrex-colors-dark-border-focus: #66b0ff;
63
+ --altrex-colors-dark-primary-default: #66b0ff;
64
+ --altrex-colors-dark-primary-hover: #3396ff;
65
+ --altrex-colors-dark-primary-active: #99cbff;
66
+ --altrex-colors-dark-primary-muted: #004a99;
67
+ --altrex-colors-dark-secondary-default: #a366ff;
68
+ --altrex-colors-dark-secondary-hover: #8533ff;
69
+ --altrex-colors-dark-secondary-active: #c299ff;
70
+ --altrex-colors-dark-secondary-muted: #3d0099;
71
+ --altrex-colors-dark-success-default: #34d399;
72
+ --altrex-colors-dark-success-hover: #10b981;
73
+ --altrex-colors-dark-success-bg: #064e3b;
74
+ --altrex-colors-dark-success-border: #065f46;
75
+ --altrex-colors-dark-warning-default: #fbbf24;
76
+ --altrex-colors-dark-warning-hover: #f59e0b;
77
+ --altrex-colors-dark-warning-bg: #78350f;
78
+ --altrex-colors-dark-warning-border: #92400e;
79
+ --altrex-colors-dark-error-default: #f87171;
80
+ --altrex-colors-dark-error-hover: #ef4444;
81
+ --altrex-colors-dark-error-bg: #7f1d1d;
82
+ --altrex-colors-dark-error-border: #991b1b;
83
+ --altrex-colors-dark-info-default: #60a5fa;
84
+ --altrex-colors-dark-info-hover: #3b82f6;
85
+ --altrex-colors-dark-info-bg: #1e3a8a;
86
+ --altrex-colors-dark-info-border: #1e40af;
49
87
  --altrex-spacing-0: 0;
50
88
  --altrex-spacing-1: 0.25rem;
51
89
  --altrex-spacing-2: 0.5rem;
package/dist/tokens.js CHANGED
@@ -60,6 +60,64 @@ export const tokens = {
60
60
  "50": "#e6f7ff",
61
61
  "500": "#3b82f6",
62
62
  "900": "#1e3a8a"
63
+ },
64
+ "dark": {
65
+ "bg": {
66
+ "base": "#0a0a0a",
67
+ "surface": "#121212",
68
+ "elevated": "#1e1e1e",
69
+ "hover": "#2a2a2a",
70
+ "overlay": "rgba(0, 0, 0, 0.85)"
71
+ },
72
+ "text": {
73
+ "primary": "#ffffff",
74
+ "secondary": "#b4b4b4",
75
+ "tertiary": "#8a8a8a",
76
+ "disabled": "#5a5a5a",
77
+ "inverse": "#0a0a0a"
78
+ },
79
+ "border": {
80
+ "default": "#3a3a3a",
81
+ "subtle": "#2a2a2a",
82
+ "strong": "#4a4a4a",
83
+ "focus": "#66b0ff"
84
+ },
85
+ "primary": {
86
+ "default": "#66b0ff",
87
+ "hover": "#3396ff",
88
+ "active": "#99cbff",
89
+ "muted": "#004a99"
90
+ },
91
+ "secondary": {
92
+ "default": "#a366ff",
93
+ "hover": "#8533ff",
94
+ "active": "#c299ff",
95
+ "muted": "#3d0099"
96
+ },
97
+ "success": {
98
+ "default": "#34d399",
99
+ "hover": "#10b981",
100
+ "bg": "#064e3b",
101
+ "border": "#065f46"
102
+ },
103
+ "warning": {
104
+ "default": "#fbbf24",
105
+ "hover": "#f59e0b",
106
+ "bg": "#78350f",
107
+ "border": "#92400e"
108
+ },
109
+ "error": {
110
+ "default": "#f87171",
111
+ "hover": "#ef4444",
112
+ "bg": "#7f1d1d",
113
+ "border": "#991b1b"
114
+ },
115
+ "info": {
116
+ "default": "#60a5fa",
117
+ "hover": "#3b82f6",
118
+ "bg": "#1e3a8a",
119
+ "border": "#1e40af"
120
+ }
63
121
  }
64
122
  },
65
123
  "spacing": {
@@ -174,6 +232,44 @@ export const flatTokens = {
174
232
  "colors.info.50": "#e6f7ff",
175
233
  "colors.info.500": "#3b82f6",
176
234
  "colors.info.900": "#1e3a8a",
235
+ "colors.dark.bg.base": "#0a0a0a",
236
+ "colors.dark.bg.surface": "#121212",
237
+ "colors.dark.bg.elevated": "#1e1e1e",
238
+ "colors.dark.bg.hover": "#2a2a2a",
239
+ "colors.dark.bg.overlay": "rgba(0, 0, 0, 0.85)",
240
+ "colors.dark.text.primary": "#ffffff",
241
+ "colors.dark.text.secondary": "#b4b4b4",
242
+ "colors.dark.text.tertiary": "#8a8a8a",
243
+ "colors.dark.text.disabled": "#5a5a5a",
244
+ "colors.dark.text.inverse": "#0a0a0a",
245
+ "colors.dark.border.default": "#3a3a3a",
246
+ "colors.dark.border.subtle": "#2a2a2a",
247
+ "colors.dark.border.strong": "#4a4a4a",
248
+ "colors.dark.border.focus": "#66b0ff",
249
+ "colors.dark.primary.default": "#66b0ff",
250
+ "colors.dark.primary.hover": "#3396ff",
251
+ "colors.dark.primary.active": "#99cbff",
252
+ "colors.dark.primary.muted": "#004a99",
253
+ "colors.dark.secondary.default": "#a366ff",
254
+ "colors.dark.secondary.hover": "#8533ff",
255
+ "colors.dark.secondary.active": "#c299ff",
256
+ "colors.dark.secondary.muted": "#3d0099",
257
+ "colors.dark.success.default": "#34d399",
258
+ "colors.dark.success.hover": "#10b981",
259
+ "colors.dark.success.bg": "#064e3b",
260
+ "colors.dark.success.border": "#065f46",
261
+ "colors.dark.warning.default": "#fbbf24",
262
+ "colors.dark.warning.hover": "#f59e0b",
263
+ "colors.dark.warning.bg": "#78350f",
264
+ "colors.dark.warning.border": "#92400e",
265
+ "colors.dark.error.default": "#f87171",
266
+ "colors.dark.error.hover": "#ef4444",
267
+ "colors.dark.error.bg": "#7f1d1d",
268
+ "colors.dark.error.border": "#991b1b",
269
+ "colors.dark.info.default": "#60a5fa",
270
+ "colors.dark.info.hover": "#3b82f6",
271
+ "colors.dark.info.bg": "#1e3a8a",
272
+ "colors.dark.info.border": "#1e40af",
177
273
  "spacing.0": "0",
178
274
  "spacing.1": "0.25rem",
179
275
  "spacing.2": "0.5rem",
@@ -272,6 +368,44 @@ export const cssVarNames = {
272
368
  "colors.info.50": "--altrex-colors-info-50",
273
369
  "colors.info.500": "--altrex-colors-info-500",
274
370
  "colors.info.900": "--altrex-colors-info-900",
371
+ "colors.dark.bg.base": "--altrex-colors-dark-bg-base",
372
+ "colors.dark.bg.surface": "--altrex-colors-dark-bg-surface",
373
+ "colors.dark.bg.elevated": "--altrex-colors-dark-bg-elevated",
374
+ "colors.dark.bg.hover": "--altrex-colors-dark-bg-hover",
375
+ "colors.dark.bg.overlay": "--altrex-colors-dark-bg-overlay",
376
+ "colors.dark.text.primary": "--altrex-colors-dark-text-primary",
377
+ "colors.dark.text.secondary": "--altrex-colors-dark-text-secondary",
378
+ "colors.dark.text.tertiary": "--altrex-colors-dark-text-tertiary",
379
+ "colors.dark.text.disabled": "--altrex-colors-dark-text-disabled",
380
+ "colors.dark.text.inverse": "--altrex-colors-dark-text-inverse",
381
+ "colors.dark.border.default": "--altrex-colors-dark-border-default",
382
+ "colors.dark.border.subtle": "--altrex-colors-dark-border-subtle",
383
+ "colors.dark.border.strong": "--altrex-colors-dark-border-strong",
384
+ "colors.dark.border.focus": "--altrex-colors-dark-border-focus",
385
+ "colors.dark.primary.default": "--altrex-colors-dark-primary-default",
386
+ "colors.dark.primary.hover": "--altrex-colors-dark-primary-hover",
387
+ "colors.dark.primary.active": "--altrex-colors-dark-primary-active",
388
+ "colors.dark.primary.muted": "--altrex-colors-dark-primary-muted",
389
+ "colors.dark.secondary.default": "--altrex-colors-dark-secondary-default",
390
+ "colors.dark.secondary.hover": "--altrex-colors-dark-secondary-hover",
391
+ "colors.dark.secondary.active": "--altrex-colors-dark-secondary-active",
392
+ "colors.dark.secondary.muted": "--altrex-colors-dark-secondary-muted",
393
+ "colors.dark.success.default": "--altrex-colors-dark-success-default",
394
+ "colors.dark.success.hover": "--altrex-colors-dark-success-hover",
395
+ "colors.dark.success.bg": "--altrex-colors-dark-success-bg",
396
+ "colors.dark.success.border": "--altrex-colors-dark-success-border",
397
+ "colors.dark.warning.default": "--altrex-colors-dark-warning-default",
398
+ "colors.dark.warning.hover": "--altrex-colors-dark-warning-hover",
399
+ "colors.dark.warning.bg": "--altrex-colors-dark-warning-bg",
400
+ "colors.dark.warning.border": "--altrex-colors-dark-warning-border",
401
+ "colors.dark.error.default": "--altrex-colors-dark-error-default",
402
+ "colors.dark.error.hover": "--altrex-colors-dark-error-hover",
403
+ "colors.dark.error.bg": "--altrex-colors-dark-error-bg",
404
+ "colors.dark.error.border": "--altrex-colors-dark-error-border",
405
+ "colors.dark.info.default": "--altrex-colors-dark-info-default",
406
+ "colors.dark.info.hover": "--altrex-colors-dark-info-hover",
407
+ "colors.dark.info.bg": "--altrex-colors-dark-info-bg",
408
+ "colors.dark.info.border": "--altrex-colors-dark-info-border",
275
409
  "spacing.0": "--altrex-spacing-0",
276
410
  "spacing.1": "--altrex-spacing-1",
277
411
  "spacing.2": "--altrex-spacing-2",
package/dist/tokens.styl CHANGED
@@ -45,6 +45,44 @@ $altrex-colors-error-900 = #7f1d1d
45
45
  $altrex-colors-info-50 = #e6f7ff
46
46
  $altrex-colors-info-500 = #3b82f6
47
47
  $altrex-colors-info-900 = #1e3a8a
48
+ $altrex-colors-dark-bg-base = #0a0a0a
49
+ $altrex-colors-dark-bg-surface = #121212
50
+ $altrex-colors-dark-bg-elevated = #1e1e1e
51
+ $altrex-colors-dark-bg-hover = #2a2a2a
52
+ $altrex-colors-dark-bg-overlay = rgba(0, 0, 0, 0.85)
53
+ $altrex-colors-dark-text-primary = #ffffff
54
+ $altrex-colors-dark-text-secondary = #b4b4b4
55
+ $altrex-colors-dark-text-tertiary = #8a8a8a
56
+ $altrex-colors-dark-text-disabled = #5a5a5a
57
+ $altrex-colors-dark-text-inverse = #0a0a0a
58
+ $altrex-colors-dark-border-default = #3a3a3a
59
+ $altrex-colors-dark-border-subtle = #2a2a2a
60
+ $altrex-colors-dark-border-strong = #4a4a4a
61
+ $altrex-colors-dark-border-focus = #66b0ff
62
+ $altrex-colors-dark-primary-default = #66b0ff
63
+ $altrex-colors-dark-primary-hover = #3396ff
64
+ $altrex-colors-dark-primary-active = #99cbff
65
+ $altrex-colors-dark-primary-muted = #004a99
66
+ $altrex-colors-dark-secondary-default = #a366ff
67
+ $altrex-colors-dark-secondary-hover = #8533ff
68
+ $altrex-colors-dark-secondary-active = #c299ff
69
+ $altrex-colors-dark-secondary-muted = #3d0099
70
+ $altrex-colors-dark-success-default = #34d399
71
+ $altrex-colors-dark-success-hover = #10b981
72
+ $altrex-colors-dark-success-bg = #064e3b
73
+ $altrex-colors-dark-success-border = #065f46
74
+ $altrex-colors-dark-warning-default = #fbbf24
75
+ $altrex-colors-dark-warning-hover = #f59e0b
76
+ $altrex-colors-dark-warning-bg = #78350f
77
+ $altrex-colors-dark-warning-border = #92400e
78
+ $altrex-colors-dark-error-default = #f87171
79
+ $altrex-colors-dark-error-hover = #ef4444
80
+ $altrex-colors-dark-error-bg = #7f1d1d
81
+ $altrex-colors-dark-error-border = #991b1b
82
+ $altrex-colors-dark-info-default = #60a5fa
83
+ $altrex-colors-dark-info-hover = #3b82f6
84
+ $altrex-colors-dark-info-bg = #1e3a8a
85
+ $altrex-colors-dark-info-border = #1e40af
48
86
  $altrex-spacing-0 = 0
49
87
  $altrex-spacing-1 = 0.25rem
50
88
  $altrex-spacing-2 = 0.5rem
@@ -99,6 +137,19 @@ $altrex-breakpoints-lg = 1024px
99
137
  $altrex-breakpoints-xl = 1280px
100
138
  $altrex-breakpoints-2xl = 1536px
101
139
 
140
+ // Component-specific tokens
141
+ $altrex-border-radius-button-default = $altrex-borderRadius-default
142
+ $altrex-border-radius-button-pill = $altrex-borderRadius-full
143
+
144
+ // Typography
145
+ $altrex-font-family-body = -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
146
+ $altrex-font-size-body-1 = $altrex-fontSize-base
147
+ $altrex-font-size-body-2 = $altrex-fontSize-sm
148
+ $altrex-font-size-caption = $altrex-fontSize-xs
149
+
150
+ // Transitions
151
+ $altrex-transition-default = 0.2s ease-in-out
152
+
102
153
  // Icon size mixins
103
154
  altrex-icon-s()
104
155
  height: 16px
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@altrex-ui/styling",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Core design tokens for the Altrex design system",
5
5
  "main": "dist/index.js",
6
6
  "exports": {