@altrex-ui/styling 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.
Files changed (4) hide show
  1. package/dist/tokens.css +38 -0
  2. package/dist/tokens.js +134 -0
  3. package/dist/tokens.styl +38 -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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@altrex-ui/styling",
3
- "version": "1.0.1",
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": {