@geomak/ui 1.3.0 → 1.5.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.
Files changed (24) hide show
  1. package/dist/chunk-255PCZIW.cjs +238 -0
  2. package/dist/chunk-255PCZIW.cjs.map +1 -0
  3. package/dist/chunk-GKXP6OJJ.js +233 -0
  4. package/dist/chunk-GKXP6OJJ.js.map +1 -0
  5. package/dist/index-CvyV3YPI.d.cts +293 -0
  6. package/dist/index-CvyV3YPI.d.ts +293 -0
  7. package/dist/index.cjs +566 -102
  8. package/dist/index.cjs.map +1 -1
  9. package/dist/index.d.cts +329 -49
  10. package/dist/index.d.ts +329 -49
  11. package/dist/index.js +534 -77
  12. package/dist/index.js.map +1 -1
  13. package/dist/styles.css +2242 -0
  14. package/dist/tokens/index.cjs +4 -4
  15. package/dist/tokens/index.d.cts +1 -1
  16. package/dist/tokens/index.d.ts +1 -1
  17. package/dist/tokens/index.js +1 -1
  18. package/package.json +6 -2
  19. package/dist/chunk-DNQSZOYD.js +0 -152
  20. package/dist/chunk-DNQSZOYD.js.map +0 -1
  21. package/dist/chunk-ZS3HB5YJ.cjs +0 -157
  22. package/dist/chunk-ZS3HB5YJ.cjs.map +0 -1
  23. package/dist/index-CPCiQllz.d.cts +0 -191
  24. package/dist/index-CPCiQllz.d.ts +0 -191
package/dist/tokens/index.cjs CHANGED
@@ -1,20 +1,20 @@
1
1
  'use strict';
2
2
 
3
- var chunkZS3HB5YJ_cjs = require('../chunk-ZS3HB5YJ.cjs');
3
+ var chunk255PCZIW_cjs = require('../chunk-255PCZIW.cjs');
4
4
 
5
5
 
6
6
 
7
7
  Object.defineProperty(exports, "palette", {
8
8
  enumerable: true,
9
- get: function () { return chunkZS3HB5YJ_cjs.PALETTE; }
9
+ get: function () { return chunk255PCZIW_cjs.PALETTE; }
10
10
  });
11
11
  Object.defineProperty(exports, "semanticTokens", {
12
12
  enumerable: true,
13
- get: function () { return chunkZS3HB5YJ_cjs.semanticTokens; }
13
+ get: function () { return chunk255PCZIW_cjs.semanticTokens; }
14
14
  });
15
15
  Object.defineProperty(exports, "vars", {
16
16
  enumerable: true,
17
- get: function () { return chunkZS3HB5YJ_cjs.vars; }
17
+ get: function () { return chunk255PCZIW_cjs.vars; }
18
18
  });
19
19
  //# sourceMappingURL=index.cjs.map
20
20
  //# sourceMappingURL=index.cjs.map
package/dist/tokens/index.d.cts CHANGED
@@ -1 +1 @@
1
- export { S as SemanticColorKey, a as SemanticRadiusKey, V as VarColorKey, b as VarRadiusKey, c as VarShadowKey, P as palette, s as semanticTokens, v as vars } from '../index-CPCiQllz.cjs';
1
+ export { S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from '../index-CvyV3YPI.cjs';
package/dist/tokens/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { S as SemanticColorKey, a as SemanticRadiusKey, V as VarColorKey, b as VarRadiusKey, c as VarShadowKey, P as palette, s as semanticTokens, v as vars } from '../index-CPCiQllz.js';
1
+ export { S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from '../index-CvyV3YPI.js';
package/dist/tokens/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { PALETTE as palette, semanticTokens, vars } from '../chunk-DNQSZOYD.js';
1
+ export { PALETTE as palette, semanticTokens, vars } from '../chunk-GKXP6OJJ.js';
2
2
  //# sourceMappingURL=index.js.map
3
3
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@geomak/ui",
3
- "version": "1.3.0",
3
+ "version": "1.5.0",
4
4
  "description": "Oxygen Design System — reusable UI primitives built with Radix UI behaviours and Tailwind CSS styling",
5
5
  "author": "G-MAKROGLOU",
6
6
  "license": "MIT",
@@ -29,7 +29,9 @@
29
29
  "**/*.css"
30
30
  ],
31
31
  "scripts": {
32
- "build": "tsup",
32
+ "build:js": "tsup",
33
+ "build:styles": "sass src/styles/index.scss dist/styles.css --no-source-map && postcss dist/styles.css --replace",
34
+ "build": "yarn build:js && yarn build:styles",
33
35
  "dev": "tsup --watch",
34
36
  "storybook": "storybook dev -p 6006",
35
37
  "build-storybook": "storybook build",
@@ -81,6 +83,8 @@
81
83
  "msw": "2",
82
84
  "msw-storybook-addon": "2",
83
85
  "postcss": "^8.4.16",
86
+ "postcss-cli": "^11.0.1",
87
+ "sass": "^1.100.0",
84
88
  "semantic-release": "^24.0.0",
85
89
  "storybook": "^8.6.12",
86
90
  "tailwindcss": "^3.1.8",
package/dist/chunk-DNQSZOYD.js DELETED
@@ -1,152 +0,0 @@
1
- // src/utils/colors.ts
2
- var PALETTE = {
3
- "true-blue": "#0466C8",
4
- "usafa-blue": "#0353A4",
5
- "dark-cornflower-blue": "#023E7D",
6
- "oxford-blue-700": "#002855",
7
- "oxford-blue-800": "#001845",
8
- "oxford-blue-900": "#001233",
9
- independence: "#33415C",
10
- "black-coral": "#5C677D",
11
- "roman-silver": "#7D8597",
12
- manatee: "#979DAC",
13
- white: "#fff",
14
- ice: "#DBF1FD",
15
- "ice-dark": "#d0e3ed",
16
- "midnight-green-eagle-900": "#013E53",
17
- "midnight-green-eagle-700": "#125F6C",
18
- "midnight-green-eagle-500": "#125F6C",
19
- "rich-black-fogra": "#000202",
20
- "rich-black-fogra-opaque": "#0000005b",
21
- "prussian-blue": "#00273A",
22
- "indigo-dye": "#013C54",
23
- ming: "#0F6372",
24
- skobeloff: "#217479",
25
- "dark-cyan": "#2A8784",
26
- "celadon-green": "#297E74",
27
- turquise: "#2EB8B0",
28
- "oxford-blue-700-opaque": "rgba(0, 40, 85, .3)",
29
- disabled: "#dee2e6",
30
- error: "tomato",
31
- warning: "orange",
32
- success: "lightgreen",
33
- info: "lightblue",
34
- transparent: "rgba(255, 255, 255, .0)"
35
- };
36
- var COLORS = { PALETTE };
37
- var colors_default = COLORS;
38
-
39
- // src/tokens/index.ts
40
- var semanticTokens = {
41
- light: {
42
- // Surfaces
43
- background: "#DBF1FD",
44
- // ice — page-level background
45
- surface: "#ffffff",
46
- // white — panel / card background
47
- "surface-raised": "#ffffff",
48
- // white — elevated layer (shadow differentiates)
49
- // Borders
50
- border: "#d0e3ed",
51
- // ice-dark — default separator
52
- "border-strong": "#7D8597",
53
- // roman-silver — focus rings, strong dividers
54
- // Text
55
- foreground: "#001845",
56
- // oxford-blue-800 — primary body text
57
- "foreground-secondary": "#33415C",
58
- // independence — labels, captions
59
- "foreground-muted": "#5C677D",
60
- // black-coral — placeholders, helper text
61
- // Accent (interactive)
62
- accent: "#0466C8",
63
- // true-blue
64
- "accent-hover": "#0353A4",
65
- // usafa-blue (darker → lower on dark scale)
66
- "accent-foreground": "#ffffff",
67
- // text on accent backgrounds
68
- // Status
69
- error: "#e03131",
70
- warning: "#e67700",
71
- success: "#2f9e44",
72
- info: "#1971c2"
73
- },
74
- dark: {
75
- // Surfaces
76
- background: "#001233",
77
- // oxford-blue-900 — deepest app shell
78
- surface: "#00273A",
79
- // prussian-blue — cards / panels
80
- "surface-raised": "#002855",
81
- // oxford-blue-700 — dropdowns, popovers
82
- // Borders
83
- border: "#33415C",
84
- // independence
85
- "border-strong": "#5C677D",
86
- // black-coral
87
- // Text
88
- foreground: "#DBF1FD",
89
- // ice (light blue-white — avoids harsh #fff)
90
- "foreground-secondary": "#979DAC",
91
- // manatee
92
- "foreground-muted": "#7D8597",
93
- // roman-silver
94
- // Accent (interactive)
95
- accent: "#0466C8",
96
- // true-blue (same — holds contrast on dark bg)
97
- "accent-hover": "#1a80e8",
98
- // lighter tint — hover goes up in brightness on dark
99
- "accent-foreground": "#ffffff",
100
- // Status (lightened for dark backgrounds — sufficient contrast)
101
- error: "#ff6b6b",
102
- warning: "#ffa94d",
103
- success: "#69db7c",
104
- info: "#74c0fc"
105
- },
106
- // Mode-independent structure tokens
107
- shared: {
108
- "radius-sm": "4px",
109
- "radius-md": "8px",
110
- "radius-lg": "12px",
111
- "radius-xl": "16px",
112
- "radius-2xl": "20px",
113
- "radius-full": "9999px"
114
- }
115
- };
116
- var vars = {
117
- color: {
118
- background: "var(--color-background)",
119
- surface: "var(--color-surface)",
120
- surfaceRaised: "var(--color-surface-raised)",
121
- border: "var(--color-border)",
122
- borderStrong: "var(--color-border-strong)",
123
- foreground: "var(--color-foreground)",
124
- foregroundSecondary: "var(--color-foreground-secondary)",
125
- foregroundMuted: "var(--color-foreground-muted)",
126
- accent: "var(--color-accent)",
127
- accentHover: "var(--color-accent-hover)",
128
- accentForeground: "var(--color-accent-foreground)",
129
- error: "var(--color-error)",
130
- warning: "var(--color-warning)",
131
- success: "var(--color-success)",
132
- info: "var(--color-info)"
133
- },
134
- radius: {
135
- sm: "var(--radius-sm)",
136
- md: "var(--radius-md)",
137
- lg: "var(--radius-lg)",
138
- xl: "var(--radius-xl)",
139
- "2xl": "var(--radius-2xl)",
140
- full: "var(--radius-full)"
141
- },
142
- shadow: {
143
- sm: "var(--shadow-sm)",
144
- md: "var(--shadow-md)",
145
- lg: "var(--shadow-lg)",
146
- xl: "var(--shadow-xl)"
147
- }
148
- };
149
-
150
- export { PALETTE, colors_default, semanticTokens, vars };
151
- //# sourceMappingURL=chunk-DNQSZOYD.js.map
152
- //# sourceMappingURL=chunk-DNQSZOYD.js.map
package/dist/chunk-DNQSZOYD.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/utils/colors.ts","../src/tokens/index.ts"],"names":[],"mappings":"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","file":"chunk-DNQSZOYD.js","sourcesContent":["/**\n * Oxygen design-system colour palette.\n * Duplicated here so the published package is fully self-contained.\n */\nexport const PALETTE = {\n 'true-blue': '#0466C8',\n 'usafa-blue': '#0353A4',\n 'dark-cornflower-blue': '#023E7D',\n 'oxford-blue-700': '#002855',\n 'oxford-blue-800': '#001845',\n 'oxford-blue-900': '#001233',\n independence: '#33415C',\n 'black-coral': '#5C677D',\n 'roman-silver': '#7D8597',\n manatee: '#979DAC',\n white: '#fff',\n ice: '#DBF1FD',\n 'ice-dark': '#d0e3ed',\n 'midnight-green-eagle-900': '#013E53',\n 'midnight-green-eagle-700': '#125F6C',\n 'midnight-green-eagle-500': '#125F6C',\n 'rich-black-fogra': '#000202',\n 'rich-black-fogra-opaque': '#0000005b',\n 'prussian-blue': '#00273A',\n 'indigo-dye': '#013C54',\n ming: '#0F6372',\n skobeloff: '#217479',\n 'dark-cyan': '#2A8784',\n 'celadon-green': '#297E74',\n turquise: '#2EB8B0',\n 'oxford-blue-700-opaque': 'rgba(0, 40, 85, .3)',\n disabled: '#dee2e6',\n error: 'tomato',\n warning: 'orange',\n success: 'lightgreen',\n info: 'lightblue',\n transparent: 'rgba(255, 255, 255, .0)',\n} as const\n\nconst COLORS = { PALETTE }\nexport default COLORS\n","/**\n * @geomak/ui — Design Tokens\n *\n * Three layers:\n *\n * 1. `palette` — raw brand colors from colors.ts (hex literals)\n * 2. `semanticTokens` — resolved hex values per light/dark mode\n * 3. `vars` — CSS custom-property references for inline styles / CSS-in-JS\n *\n * CSS custom properties are injected by importing '@geomak/ui/styles'.\n * Tailwind semantic utilities (bg-background, text-foreground, etc.) are\n * available after the consumer includes the package's tailwind preset.\n */\n\nexport { PALETTE as palette } from '../utils/colors'\n\n// ─── Resolved values ──────────────────────────────────────────────────────────\n\n/**\n * Resolved hex/rgba values for every semantic token, keyed by `light` / `dark`.\n * Use these when CSS custom properties aren't available (canvas, email, SSR snapshots).\n */\nexport const semanticTokens = {\n light: {\n // Surfaces\n background: '#DBF1FD', // ice — page-level background\n surface: '#ffffff', // white — panel / card background\n 'surface-raised': '#ffffff', // white — elevated layer (shadow differentiates)\n\n // Borders\n border: '#d0e3ed', // ice-dark — default separator\n 'border-strong': '#7D8597', // roman-silver — focus rings, strong dividers\n\n // Text\n foreground: '#001845', // oxford-blue-800 — primary body text\n 'foreground-secondary': '#33415C', // independence — labels, captions\n 'foreground-muted': '#5C677D', // black-coral — placeholders, helper text\n\n // Accent (interactive)\n accent: '#0466C8', // true-blue\n 'accent-hover': '#0353A4', // usafa-blue (darker → lower on dark scale)\n 'accent-foreground': '#ffffff', // text on accent backgrounds\n\n // Status\n error: '#e03131',\n warning: '#e67700',\n success: '#2f9e44',\n info: '#1971c2',\n },\n\n dark: {\n // Surfaces\n background: '#001233', // oxford-blue-900 — deepest app shell\n surface: '#00273A', // prussian-blue — cards / panels\n 'surface-raised': '#002855', // oxford-blue-700 — dropdowns, popovers\n\n // Borders\n border: '#33415C', // independence\n 'border-strong': '#5C677D', // black-coral\n\n // Text\n foreground: '#DBF1FD', // ice (light blue-white — avoids harsh #fff)\n 'foreground-secondary': '#979DAC', // manatee\n 'foreground-muted': '#7D8597', // roman-silver\n\n // Accent (interactive)\n accent: '#0466C8', // true-blue (same — holds contrast on dark bg)\n 'accent-hover': '#1a80e8', // lighter tint — hover goes up in brightness on dark\n 'accent-foreground': '#ffffff',\n\n // Status (lightened for dark backgrounds — sufficient contrast)\n error: '#ff6b6b',\n warning: '#ffa94d',\n success: '#69db7c',\n info: '#74c0fc',\n },\n\n // Mode-independent structure tokens\n shared: {\n 'radius-sm': '4px',\n 'radius-md': '8px',\n 'radius-lg': '12px',\n 'radius-xl': '16px',\n 'radius-2xl': '20px',\n 'radius-full': '9999px',\n },\n} as const\n\nexport type SemanticColorKey = keyof typeof semanticTokens.light\nexport type SemanticRadiusKey = keyof typeof semanticTokens.shared\n\n// ─── CSS custom-property references ──────────────────────────────────────────\n\n/**\n * CSS custom-property reference strings.\n *\n * @example\n * // Inline style — respects light/dark automatically\n * <div style={{ color: vars.color.foreground }}>...</div>\n *\n * @example\n * // CSS-in-JS (Emotion, styled-components)\n * const Card = styled.div`\n * background: ${vars.color.surface};\n * border: 1px solid ${vars.color.border};\n * `\n */\nexport const vars = {\n color: {\n background: 'var(--color-background)',\n surface: 'var(--color-surface)',\n surfaceRaised: 'var(--color-surface-raised)',\n border: 'var(--color-border)',\n borderStrong: 'var(--color-border-strong)',\n foreground: 'var(--color-foreground)',\n foregroundSecondary: 'var(--color-foreground-secondary)',\n foregroundMuted: 'var(--color-foreground-muted)',\n accent: 'var(--color-accent)',\n accentHover: 'var(--color-accent-hover)',\n accentForeground: 'var(--color-accent-foreground)',\n error: 'var(--color-error)',\n warning: 'var(--color-warning)',\n success: 'var(--color-success)',\n info: 'var(--color-info)',\n },\n radius: {\n sm: 'var(--radius-sm)',\n md: 'var(--radius-md)',\n lg: 'var(--radius-lg)',\n xl: 'var(--radius-xl)',\n '2xl': 'var(--radius-2xl)',\n full: 'var(--radius-full)',\n },\n shadow: {\n sm: 'var(--shadow-sm)',\n md: 'var(--shadow-md)',\n lg: 'var(--shadow-lg)',\n xl: 'var(--shadow-xl)',\n },\n} as const\n\nexport type VarColorKey = keyof typeof vars.color\nexport type VarRadiusKey = keyof typeof vars.radius\nexport type VarShadowKey = keyof typeof vars.shadow\n"]}
package/dist/chunk-ZS3HB5YJ.cjs DELETED
@@ -1,157 +0,0 @@
1
- 'use strict';
2
-
3
- // src/utils/colors.ts
4
- var PALETTE = {
5
- "true-blue": "#0466C8",
6
- "usafa-blue": "#0353A4",
7
- "dark-cornflower-blue": "#023E7D",
8
- "oxford-blue-700": "#002855",
9
- "oxford-blue-800": "#001845",
10
- "oxford-blue-900": "#001233",
11
- independence: "#33415C",
12
- "black-coral": "#5C677D",
13
- "roman-silver": "#7D8597",
14
- manatee: "#979DAC",
15
- white: "#fff",
16
- ice: "#DBF1FD",
17
- "ice-dark": "#d0e3ed",
18
- "midnight-green-eagle-900": "#013E53",
19
- "midnight-green-eagle-700": "#125F6C",
20
- "midnight-green-eagle-500": "#125F6C",
21
- "rich-black-fogra": "#000202",
22
- "rich-black-fogra-opaque": "#0000005b",
23
- "prussian-blue": "#00273A",
24
- "indigo-dye": "#013C54",
25
- ming: "#0F6372",
26
- skobeloff: "#217479",
27
- "dark-cyan": "#2A8784",
28
- "celadon-green": "#297E74",
29
- turquise: "#2EB8B0",
30
- "oxford-blue-700-opaque": "rgba(0, 40, 85, .3)",
31
- disabled: "#dee2e6",
32
- error: "tomato",
33
- warning: "orange",
34
- success: "lightgreen",
35
- info: "lightblue",
36
- transparent: "rgba(255, 255, 255, .0)"
37
- };
38
- var COLORS = { PALETTE };
39
- var colors_default = COLORS;
40
-
41
- // src/tokens/index.ts
42
- var semanticTokens = {
43
- light: {
44
- // Surfaces
45
- background: "#DBF1FD",
46
- // ice — page-level background
47
- surface: "#ffffff",
48
- // white — panel / card background
49
- "surface-raised": "#ffffff",
50
- // white — elevated layer (shadow differentiates)
51
- // Borders
52
- border: "#d0e3ed",
53
- // ice-dark — default separator
54
- "border-strong": "#7D8597",
55
- // roman-silver — focus rings, strong dividers
56
- // Text
57
- foreground: "#001845",
58
- // oxford-blue-800 — primary body text
59
- "foreground-secondary": "#33415C",
60
- // independence — labels, captions
61
- "foreground-muted": "#5C677D",
62
- // black-coral — placeholders, helper text
63
- // Accent (interactive)
64
- accent: "#0466C8",
65
- // true-blue
66
- "accent-hover": "#0353A4",
67
- // usafa-blue (darker → lower on dark scale)
68
- "accent-foreground": "#ffffff",
69
- // text on accent backgrounds
70
- // Status
71
- error: "#e03131",
72
- warning: "#e67700",
73
- success: "#2f9e44",
74
- info: "#1971c2"
75
- },
76
- dark: {
77
- // Surfaces
78
- background: "#001233",
79
- // oxford-blue-900 — deepest app shell
80
- surface: "#00273A",
81
- // prussian-blue — cards / panels
82
- "surface-raised": "#002855",
83
- // oxford-blue-700 — dropdowns, popovers
84
- // Borders
85
- border: "#33415C",
86
- // independence
87
- "border-strong": "#5C677D",
88
- // black-coral
89
- // Text
90
- foreground: "#DBF1FD",
91
- // ice (light blue-white — avoids harsh #fff)
92
- "foreground-secondary": "#979DAC",
93
- // manatee
94
- "foreground-muted": "#7D8597",
95
- // roman-silver
96
- // Accent (interactive)
97
- accent: "#0466C8",
98
- // true-blue (same — holds contrast on dark bg)
99
- "accent-hover": "#1a80e8",
100
- // lighter tint — hover goes up in brightness on dark
101
- "accent-foreground": "#ffffff",
102
- // Status (lightened for dark backgrounds — sufficient contrast)
103
- error: "#ff6b6b",
104
- warning: "#ffa94d",
105
- success: "#69db7c",
106
- info: "#74c0fc"
107
- },
108
- // Mode-independent structure tokens
109
- shared: {
110
- "radius-sm": "4px",
111
- "radius-md": "8px",
112
- "radius-lg": "12px",
113
- "radius-xl": "16px",
114
- "radius-2xl": "20px",
115
- "radius-full": "9999px"
116
- }
117
- };
118
- var vars = {
119
- color: {
120
- background: "var(--color-background)",
121
- surface: "var(--color-surface)",
122
- surfaceRaised: "var(--color-surface-raised)",
123
- border: "var(--color-border)",
124
- borderStrong: "var(--color-border-strong)",
125
- foreground: "var(--color-foreground)",
126
- foregroundSecondary: "var(--color-foreground-secondary)",
127
- foregroundMuted: "var(--color-foreground-muted)",
128
- accent: "var(--color-accent)",
129
- accentHover: "var(--color-accent-hover)",
130
- accentForeground: "var(--color-accent-foreground)",
131
- error: "var(--color-error)",
132
- warning: "var(--color-warning)",
133
- success: "var(--color-success)",
134
- info: "var(--color-info)"
135
- },
136
- radius: {
137
- sm: "var(--radius-sm)",
138
- md: "var(--radius-md)",
139
- lg: "var(--radius-lg)",
140
- xl: "var(--radius-xl)",
141
- "2xl": "var(--radius-2xl)",
142
- full: "var(--radius-full)"
143
- },
144
- shadow: {
145
- sm: "var(--shadow-sm)",
146
- md: "var(--shadow-md)",
147
- lg: "var(--shadow-lg)",
148
- xl: "var(--shadow-xl)"
149
- }
150
- };
151
-
152
- exports.PALETTE = PALETTE;
153
- exports.colors_default = colors_default;
154
- exports.semanticTokens = semanticTokens;
155
- exports.vars = vars;
156
- //# sourceMappingURL=chunk-ZS3HB5YJ.cjs.map
157
- //# sourceMappingURL=chunk-ZS3HB5YJ.cjs.map
package/dist/chunk-ZS3HB5YJ.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/utils/colors.ts","../src/tokens/index.ts"],"names":[],"mappings":"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","file":"chunk-ZS3HB5YJ.cjs","sourcesContent":["/**\n * Oxygen design-system colour palette.\n * Duplicated here so the published package is fully self-contained.\n */\nexport const PALETTE = {\n 'true-blue': '#0466C8',\n 'usafa-blue': '#0353A4',\n 'dark-cornflower-blue': '#023E7D',\n 'oxford-blue-700': '#002855',\n 'oxford-blue-800': '#001845',\n 'oxford-blue-900': '#001233',\n independence: '#33415C',\n 'black-coral': '#5C677D',\n 'roman-silver': '#7D8597',\n manatee: '#979DAC',\n white: '#fff',\n ice: '#DBF1FD',\n 'ice-dark': '#d0e3ed',\n 'midnight-green-eagle-900': '#013E53',\n 'midnight-green-eagle-700': '#125F6C',\n 'midnight-green-eagle-500': '#125F6C',\n 'rich-black-fogra': '#000202',\n 'rich-black-fogra-opaque': '#0000005b',\n 'prussian-blue': '#00273A',\n 'indigo-dye': '#013C54',\n ming: '#0F6372',\n skobeloff: '#217479',\n 'dark-cyan': '#2A8784',\n 'celadon-green': '#297E74',\n turquise: '#2EB8B0',\n 'oxford-blue-700-opaque': 'rgba(0, 40, 85, .3)',\n disabled: '#dee2e6',\n error: 'tomato',\n warning: 'orange',\n success: 'lightgreen',\n info: 'lightblue',\n transparent: 'rgba(255, 255, 255, .0)',\n} as const\n\nconst COLORS = { PALETTE }\nexport default COLORS\n","/**\n * @geomak/ui — Design Tokens\n *\n * Three layers:\n *\n * 1. `palette` — raw brand colors from colors.ts (hex literals)\n * 2. `semanticTokens` — resolved hex values per light/dark mode\n * 3. `vars` — CSS custom-property references for inline styles / CSS-in-JS\n *\n * CSS custom properties are injected by importing '@geomak/ui/styles'.\n * Tailwind semantic utilities (bg-background, text-foreground, etc.) are\n * available after the consumer includes the package's tailwind preset.\n */\n\nexport { PALETTE as palette } from '../utils/colors'\n\n// ─── Resolved values ──────────────────────────────────────────────────────────\n\n/**\n * Resolved hex/rgba values for every semantic token, keyed by `light` / `dark`.\n * Use these when CSS custom properties aren't available (canvas, email, SSR snapshots).\n */\nexport const semanticTokens = {\n light: {\n // Surfaces\n background: '#DBF1FD', // ice — page-level background\n surface: '#ffffff', // white — panel / card background\n 'surface-raised': '#ffffff', // white — elevated layer (shadow differentiates)\n\n // Borders\n border: '#d0e3ed', // ice-dark — default separator\n 'border-strong': '#7D8597', // roman-silver — focus rings, strong dividers\n\n // Text\n foreground: '#001845', // oxford-blue-800 — primary body text\n 'foreground-secondary': '#33415C', // independence — labels, captions\n 'foreground-muted': '#5C677D', // black-coral — placeholders, helper text\n\n // Accent (interactive)\n accent: '#0466C8', // true-blue\n 'accent-hover': '#0353A4', // usafa-blue (darker → lower on dark scale)\n 'accent-foreground': '#ffffff', // text on accent backgrounds\n\n // Status\n error: '#e03131',\n warning: '#e67700',\n success: '#2f9e44',\n info: '#1971c2',\n },\n\n dark: {\n // Surfaces\n background: '#001233', // oxford-blue-900 — deepest app shell\n surface: '#00273A', // prussian-blue — cards / panels\n 'surface-raised': '#002855', // oxford-blue-700 — dropdowns, popovers\n\n // Borders\n border: '#33415C', // independence\n 'border-strong': '#5C677D', // black-coral\n\n // Text\n foreground: '#DBF1FD', // ice (light blue-white — avoids harsh #fff)\n 'foreground-secondary': '#979DAC', // manatee\n 'foreground-muted': '#7D8597', // roman-silver\n\n // Accent (interactive)\n accent: '#0466C8', // true-blue (same — holds contrast on dark bg)\n 'accent-hover': '#1a80e8', // lighter tint — hover goes up in brightness on dark\n 'accent-foreground': '#ffffff',\n\n // Status (lightened for dark backgrounds — sufficient contrast)\n error: '#ff6b6b',\n warning: '#ffa94d',\n success: '#69db7c',\n info: '#74c0fc',\n },\n\n // Mode-independent structure tokens\n shared: {\n 'radius-sm': '4px',\n 'radius-md': '8px',\n 'radius-lg': '12px',\n 'radius-xl': '16px',\n 'radius-2xl': '20px',\n 'radius-full': '9999px',\n },\n} as const\n\nexport type SemanticColorKey = keyof typeof semanticTokens.light\nexport type SemanticRadiusKey = keyof typeof semanticTokens.shared\n\n// ─── CSS custom-property references ──────────────────────────────────────────\n\n/**\n * CSS custom-property reference strings.\n *\n * @example\n * // Inline style — respects light/dark automatically\n * <div style={{ color: vars.color.foreground }}>...</div>\n *\n * @example\n * // CSS-in-JS (Emotion, styled-components)\n * const Card = styled.div`\n * background: ${vars.color.surface};\n * border: 1px solid ${vars.color.border};\n * `\n */\nexport const vars = {\n color: {\n background: 'var(--color-background)',\n surface: 'var(--color-surface)',\n surfaceRaised: 'var(--color-surface-raised)',\n border: 'var(--color-border)',\n borderStrong: 'var(--color-border-strong)',\n foreground: 'var(--color-foreground)',\n foregroundSecondary: 'var(--color-foreground-secondary)',\n foregroundMuted: 'var(--color-foreground-muted)',\n accent: 'var(--color-accent)',\n accentHover: 'var(--color-accent-hover)',\n accentForeground: 'var(--color-accent-foreground)',\n error: 'var(--color-error)',\n warning: 'var(--color-warning)',\n success: 'var(--color-success)',\n info: 'var(--color-info)',\n },\n radius: {\n sm: 'var(--radius-sm)',\n md: 'var(--radius-md)',\n lg: 'var(--radius-lg)',\n xl: 'var(--radius-xl)',\n '2xl': 'var(--radius-2xl)',\n full: 'var(--radius-full)',\n },\n shadow: {\n sm: 'var(--shadow-sm)',\n md: 'var(--shadow-md)',\n lg: 'var(--shadow-lg)',\n xl: 'var(--shadow-xl)',\n },\n} as const\n\nexport type VarColorKey = keyof typeof vars.color\nexport type VarRadiusKey = keyof typeof vars.radius\nexport type VarShadowKey = keyof typeof vars.shadow\n"]}
package/dist/index-CPCiQllz.d.cts DELETED
@@ -1,191 +0,0 @@
1
- /**
2
- * Oxygen design-system colour palette.
3
- * Duplicated here so the published package is fully self-contained.
4
- */
5
- declare const PALETTE: {
6
- readonly 'true-blue': "#0466C8";
7
- readonly 'usafa-blue': "#0353A4";
8
- readonly 'dark-cornflower-blue': "#023E7D";
9
- readonly 'oxford-blue-700': "#002855";
10
- readonly 'oxford-blue-800': "#001845";
11
- readonly 'oxford-blue-900': "#001233";
12
- readonly independence: "#33415C";
13
- readonly 'black-coral': "#5C677D";
14
- readonly 'roman-silver': "#7D8597";
15
- readonly manatee: "#979DAC";
16
- readonly white: "#fff";
17
- readonly ice: "#DBF1FD";
18
- readonly 'ice-dark': "#d0e3ed";
19
- readonly 'midnight-green-eagle-900': "#013E53";
20
- readonly 'midnight-green-eagle-700': "#125F6C";
21
- readonly 'midnight-green-eagle-500': "#125F6C";
22
- readonly 'rich-black-fogra': "#000202";
23
- readonly 'rich-black-fogra-opaque': "#0000005b";
24
- readonly 'prussian-blue': "#00273A";
25
- readonly 'indigo-dye': "#013C54";
26
- readonly ming: "#0F6372";
27
- readonly skobeloff: "#217479";
28
- readonly 'dark-cyan': "#2A8784";
29
- readonly 'celadon-green': "#297E74";
30
- readonly turquise: "#2EB8B0";
31
- readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
32
- readonly disabled: "#dee2e6";
33
- readonly error: "tomato";
34
- readonly warning: "orange";
35
- readonly success: "lightgreen";
36
- readonly info: "lightblue";
37
- readonly transparent: "rgba(255, 255, 255, .0)";
38
- };
39
- declare const COLORS: {
40
- PALETTE: {
41
- readonly 'true-blue': "#0466C8";
42
- readonly 'usafa-blue': "#0353A4";
43
- readonly 'dark-cornflower-blue': "#023E7D";
44
- readonly 'oxford-blue-700': "#002855";
45
- readonly 'oxford-blue-800': "#001845";
46
- readonly 'oxford-blue-900': "#001233";
47
- readonly independence: "#33415C";
48
- readonly 'black-coral': "#5C677D";
49
- readonly 'roman-silver': "#7D8597";
50
- readonly manatee: "#979DAC";
51
- readonly white: "#fff";
52
- readonly ice: "#DBF1FD";
53
- readonly 'ice-dark': "#d0e3ed";
54
- readonly 'midnight-green-eagle-900': "#013E53";
55
- readonly 'midnight-green-eagle-700': "#125F6C";
56
- readonly 'midnight-green-eagle-500': "#125F6C";
57
- readonly 'rich-black-fogra': "#000202";
58
- readonly 'rich-black-fogra-opaque': "#0000005b";
59
- readonly 'prussian-blue': "#00273A";
60
- readonly 'indigo-dye': "#013C54";
61
- readonly ming: "#0F6372";
62
- readonly skobeloff: "#217479";
63
- readonly 'dark-cyan': "#2A8784";
64
- readonly 'celadon-green': "#297E74";
65
- readonly turquise: "#2EB8B0";
66
- readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
67
- readonly disabled: "#dee2e6";
68
- readonly error: "tomato";
69
- readonly warning: "orange";
70
- readonly success: "lightgreen";
71
- readonly info: "lightblue";
72
- readonly transparent: "rgba(255, 255, 255, .0)";
73
- };
74
- };
75
-
76
- /**
77
- * @geomak/ui — Design Tokens
78
- *
79
- * Three layers:
80
- *
81
- * 1. `palette` — raw brand colors from colors.ts (hex literals)
82
- * 2. `semanticTokens` — resolved hex values per light/dark mode
83
- * 3. `vars` — CSS custom-property references for inline styles / CSS-in-JS
84
- *
85
- * CSS custom properties are injected by importing '@geomak/ui/styles'.
86
- * Tailwind semantic utilities (bg-background, text-foreground, etc.) are
87
- * available after the consumer includes the package's tailwind preset.
88
- */
89
-
90
- /**
91
- * Resolved hex/rgba values for every semantic token, keyed by `light` / `dark`.
92
- * Use these when CSS custom properties aren't available (canvas, email, SSR snapshots).
93
- */
94
- declare const semanticTokens: {
95
- readonly light: {
96
- readonly background: "#DBF1FD";
97
- readonly surface: "#ffffff";
98
- readonly 'surface-raised': "#ffffff";
99
- readonly border: "#d0e3ed";
100
- readonly 'border-strong': "#7D8597";
101
- readonly foreground: "#001845";
102
- readonly 'foreground-secondary': "#33415C";
103
- readonly 'foreground-muted': "#5C677D";
104
- readonly accent: "#0466C8";
105
- readonly 'accent-hover': "#0353A4";
106
- readonly 'accent-foreground': "#ffffff";
107
- readonly error: "#e03131";
108
- readonly warning: "#e67700";
109
- readonly success: "#2f9e44";
110
- readonly info: "#1971c2";
111
- };
112
- readonly dark: {
113
- readonly background: "#001233";
114
- readonly surface: "#00273A";
115
- readonly 'surface-raised': "#002855";
116
- readonly border: "#33415C";
117
- readonly 'border-strong': "#5C677D";
118
- readonly foreground: "#DBF1FD";
119
- readonly 'foreground-secondary': "#979DAC";
120
- readonly 'foreground-muted': "#7D8597";
121
- readonly accent: "#0466C8";
122
- readonly 'accent-hover': "#1a80e8";
123
- readonly 'accent-foreground': "#ffffff";
124
- readonly error: "#ff6b6b";
125
- readonly warning: "#ffa94d";
126
- readonly success: "#69db7c";
127
- readonly info: "#74c0fc";
128
- };
129
- readonly shared: {
130
- readonly 'radius-sm': "4px";
131
- readonly 'radius-md': "8px";
132
- readonly 'radius-lg': "12px";
133
- readonly 'radius-xl': "16px";
134
- readonly 'radius-2xl': "20px";
135
- readonly 'radius-full': "9999px";
136
- };
137
- };
138
- type SemanticColorKey = keyof typeof semanticTokens.light;
139
- type SemanticRadiusKey = keyof typeof semanticTokens.shared;
140
- /**
141
- * CSS custom-property reference strings.
142
- *
143
- * @example
144
- * // Inline style — respects light/dark automatically
145
- * <div style={{ color: vars.color.foreground }}>...</div>
146
- *
147
- * @example
148
- * // CSS-in-JS (Emotion, styled-components)
149
- * const Card = styled.div`
150
- * background: ${vars.color.surface};
151
- * border: 1px solid ${vars.color.border};
152
- * `
153
- */
154
- declare const vars: {
155
- readonly color: {
156
- readonly background: "var(--color-background)";
157
- readonly surface: "var(--color-surface)";
158
- readonly surfaceRaised: "var(--color-surface-raised)";
159
- readonly border: "var(--color-border)";
160
- readonly borderStrong: "var(--color-border-strong)";
161
- readonly foreground: "var(--color-foreground)";
162
- readonly foregroundSecondary: "var(--color-foreground-secondary)";
163
- readonly foregroundMuted: "var(--color-foreground-muted)";
164
- readonly accent: "var(--color-accent)";
165
- readonly accentHover: "var(--color-accent-hover)";
166
- readonly accentForeground: "var(--color-accent-foreground)";
167
- readonly error: "var(--color-error)";
168
- readonly warning: "var(--color-warning)";
169
- readonly success: "var(--color-success)";
170
- readonly info: "var(--color-info)";
171
- };
172
- readonly radius: {
173
- readonly sm: "var(--radius-sm)";
174
- readonly md: "var(--radius-md)";
175
- readonly lg: "var(--radius-lg)";
176
- readonly xl: "var(--radius-xl)";
177
- readonly '2xl': "var(--radius-2xl)";
178
- readonly full: "var(--radius-full)";
179
- };
180
- readonly shadow: {
181
- readonly sm: "var(--shadow-sm)";
182
- readonly md: "var(--shadow-md)";
183
- readonly lg: "var(--shadow-lg)";
184
- readonly xl: "var(--shadow-xl)";
185
- };
186
- };
187
- type VarColorKey = keyof typeof vars.color;
188
- type VarRadiusKey = keyof typeof vars.radius;
189
- type VarShadowKey = keyof typeof vars.shadow;
190
-
191
- export { COLORS as C, PALETTE as P, type SemanticColorKey as S, type VarColorKey as V, type SemanticRadiusKey as a, type VarRadiusKey as b, type VarShadowKey as c, semanticTokens as s, vars as v };