@dukaandost/tokens 1.0.1 → 1.1.1

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 (11) hide show
  1. package/dist/index.cjs +1 -0
  2. package/dist/index.d.ts +3 -0
  3. package/dist/index.d.ts.map +1 -0
  4. package/dist/index.js +210 -0
  5. package/dist/tokens.css +1 -0
  6. package/dist/tokens.d.ts +493 -0
  7. package/dist/tokens.d.ts.map +1 -0
  8. package/package.json +29 -13
  9. package/src/tokens.css +58 -17
  10. package/src/index.ts +0 -2
  11. package/src/tokens.ts +0 -219
package/dist/index.cjs ADDED
@@ -0,0 +1 @@
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t={brand:{primary:"#180C44",accent:"#725CC1",accentSubtle:"#EBE9F3",accentMuted:"#A499C6",hover:"#3B2395"},semantic:{error:"#E9336C",errorStrong:"#C10000",errorLight:"#EE6691",success:"#099B30",successDark:"#04841B",successDeep:"#065B15",successMuted:"#82AE37",warning:"#FCC13E",warningText:"#E4AC32",info:"#1B4DFF",infoStrong:"#0065F7",infoDark:"#02409A",infoMuted:"#127498"},text:{primary:"#1A1A1A",secondary:"#2E2E2E",tertiary:"#545454",disabled:"#7F7F7F",inverse:"#FFFFFF"},border:{default:"#D3D3D3",subtle:"#E0E0E0",hover:"#A9A9A9"},surface:{default:"#FFFFFF",subtle:"#F5F5F5",subtleHover:"#F6F6F6",accent:"#F4F2FF"},focus:{glow:"#EE6691",border:"#E9336C"},badge:{green:{bg:"#E4FFEC",border:"#5FD87F",text:"#099B30"},darkGreen:{bg:"#B3D9BA",border:"#04841B",text:"#065B15"},blue:{bg:"#E6EFFC",border:"#0065F7",text:"#02409A"},purple:{bg:"#FFE2FF",border:"#DF00DF",text:"#9A009A"},violet:{bg:"#E8C1FF",border:"#B331FF",text:"#921EC3"},yellow:{bg:"#FFF6E2",border:"#FCC13E",text:"#E4AC32"},teal:{bg:"#E3FDFF",border:"#18CBDB",text:"#0DACBB"},pink:{bg:"#FFE7EE",border:"#EE6691",text:"#E30047"},red:{bg:"#FFE2E2",border:"#FF2929",text:"#C10000"},orange:{bg:"#FDE1D4",border:"#FF6924",text:"#F65F1A"},grey:{bg:"#E3E3E3",border:"#7F7F7F",text:"#545454"},brown:{bg:"#F4E8DC",border:"#B87333",text:"#8B5E34"}}},r={brandAlpha:"linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%)",brandBeta:"linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%)",brandGamma:"linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%)",brandDelta:"linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%)"},e={heading:"'Amsi Pro', 'Inter', system-ui, sans-serif",body:"'Nunito Sans', 'Inter', system-ui, sans-serif",code:"'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace"},i={display:{size:"40px",weight:400,lineHeight:1,letterSpacing:"0em",fontFamily:e.heading},headingXl:{size:"32px",weight:400,lineHeight:1,letterSpacing:"0em",fontFamily:e.heading},headingLg:{size:"24px",weight:400,lineHeight:1,letterSpacing:"0em",fontFamily:e.heading},headingMd:{size:"20px",weight:400,lineHeight:1,letterSpacing:"0em",fontFamily:e.heading},headingSm:{size:"18px",weight:400,lineHeight:1,letterSpacing:"0em",fontFamily:e.body},bodyLg:{size:"16px",weight:400,lineHeight:1,letterSpacing:"0em",fontFamily:e.body},bodyMd:{size:"14px",weight:400,lineHeight:1,letterSpacing:"0em",fontFamily:e.body},bodySm:{size:"12px",weight:400,lineHeight:1,letterSpacing:"0em",fontFamily:e.body},label:{size:"13px",weight:500,lineHeight:1.4,letterSpacing:"0.03em",fontFamily:e.body},labelSm:{size:"11px",weight:500,lineHeight:1.4,letterSpacing:"0.04em",fontFamily:e.body},code:{size:"13px",weight:400,lineHeight:1.5,letterSpacing:"0em",fontFamily:e.code}},n={px:"1px","0.5":"2px",1:"4px",2:"8px",3:"12px",4:"16px",5:"20px",6:"24px",8:"32px",10:"40px",12:"48px"},o={none:"0px",xs:"4px",sm:"8px",md:"12px",lg:"16px",xl:"24px",full:"9999px"},a={none:"none",xs:"0 1px 2px rgba(0, 0, 0, 0.06)",sm:"0 2px 6px rgba(0, 0, 0, 0.08)",md:"0 4px 12px rgba(0, 0, 0, 0.12)",lg:"0 8px 24px rgba(0, 0, 0, 0.16)",xl:"0 16px 40px rgba(0, 0, 0, 0.20)",glowAlpha:"0 0 20px rgba(190, 3, 164, 0.50)",glowBeta:"0 0 20px rgba(148, 170, 253, 0.50)",glowGamma:"0 0 20px rgba(130, 174, 55, 0.50)",glowDelta:"0 0 20px rgba(55, 130, 174, 0.50)",button:"0 1px 2px rgba(0, 0, 0, 0.2)",buttonHover:"0 1px 4px rgba(0, 0, 0, 0.2)",focusGlow:"0 0 4px #EE6691"},g={base:0,raised:10,dropdown:100,sticky:200,overlay:300,modal:400,popover:500,toast:600},F={colors:t,gradients:r,fontFamily:e,typography:i,spacing:n,radius:o,shadows:a,zIndex:g};exports.colors=t;exports.fontFamily=e;exports.gradients=r;exports.radius=o;exports.shadows=a;exports.spacing=n;exports.tokens=F;exports.typography=i;exports.zIndex=g;
package/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+
2
+ export * from './tokens';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,cAAc,UAAU,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,210 @@
1
+ const t = {
2
+ brand: {
3
+ primary: "#180C44",
4
+ accent: "#725CC1",
5
+ accentSubtle: "#EBE9F3",
6
+ accentMuted: "#A499C6",
7
+ hover: "#3B2395"
8
+ },
9
+ semantic: {
10
+ error: "#E9336C",
11
+ errorStrong: "#C10000",
12
+ errorLight: "#EE6691",
13
+ success: "#099B30",
14
+ successDark: "#04841B",
15
+ successDeep: "#065B15",
16
+ successMuted: "#82AE37",
17
+ warning: "#FCC13E",
18
+ warningText: "#E4AC32",
19
+ info: "#1B4DFF",
20
+ infoStrong: "#0065F7",
21
+ infoDark: "#02409A",
22
+ infoMuted: "#127498"
23
+ },
24
+ text: {
25
+ primary: "#1A1A1A",
26
+ secondary: "#2E2E2E",
27
+ tertiary: "#545454",
28
+ disabled: "#7F7F7F",
29
+ inverse: "#FFFFFF"
30
+ },
31
+ border: {
32
+ default: "#D3D3D3",
33
+ subtle: "#E0E0E0",
34
+ hover: "#A9A9A9"
35
+ },
36
+ surface: {
37
+ default: "#FFFFFF",
38
+ subtle: "#F5F5F5",
39
+ subtleHover: "#F6F6F6",
40
+ accent: "#F4F2FF"
41
+ },
42
+ focus: {
43
+ glow: "#EE6691",
44
+ border: "#E9336C"
45
+ },
46
+ badge: {
47
+ green: { bg: "#E4FFEC", border: "#5FD87F", text: "#099B30" },
48
+ darkGreen: { bg: "#B3D9BA", border: "#04841B", text: "#065B15" },
49
+ blue: { bg: "#E6EFFC", border: "#0065F7", text: "#02409A" },
50
+ purple: { bg: "#FFE2FF", border: "#DF00DF", text: "#9A009A" },
51
+ violet: { bg: "#E8C1FF", border: "#B331FF", text: "#921EC3" },
52
+ yellow: { bg: "#FFF6E2", border: "#FCC13E", text: "#E4AC32" },
53
+ teal: { bg: "#E3FDFF", border: "#18CBDB", text: "#0DACBB" },
54
+ pink: { bg: "#FFE7EE", border: "#EE6691", text: "#E30047" },
55
+ red: { bg: "#FFE2E2", border: "#FF2929", text: "#C10000" },
56
+ orange: { bg: "#FDE1D4", border: "#FF6924", text: "#F65F1A" },
57
+ grey: { bg: "#E3E3E3", border: "#7F7F7F", text: "#545454" },
58
+ brown: { bg: "#F4E8DC", border: "#B87333", text: "#8B5E34" }
59
+ }
60
+ }, r = {
61
+ brandAlpha: "linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%)",
62
+ brandBeta: "linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%)",
63
+ brandGamma: "linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%)",
64
+ brandDelta: "linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%)"
65
+ }, e = {
66
+ heading: "'Amsi Pro', 'Inter', system-ui, sans-serif",
67
+ body: "'Nunito Sans', 'Inter', system-ui, sans-serif",
68
+ code: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace"
69
+ }, i = {
70
+ display: {
71
+ size: "40px",
72
+ weight: 400,
73
+ lineHeight: 1,
74
+ letterSpacing: "0em",
75
+ fontFamily: e.heading
76
+ },
77
+ headingXl: {
78
+ size: "32px",
79
+ weight: 400,
80
+ lineHeight: 1,
81
+ letterSpacing: "0em",
82
+ fontFamily: e.heading
83
+ },
84
+ headingLg: {
85
+ size: "24px",
86
+ weight: 400,
87
+ lineHeight: 1,
88
+ letterSpacing: "0em",
89
+ fontFamily: e.heading
90
+ },
91
+ headingMd: {
92
+ size: "20px",
93
+ weight: 400,
94
+ lineHeight: 1,
95
+ letterSpacing: "0em",
96
+ fontFamily: e.heading
97
+ },
98
+ headingSm: {
99
+ size: "18px",
100
+ weight: 400,
101
+ lineHeight: 1,
102
+ letterSpacing: "0em",
103
+ fontFamily: e.body
104
+ },
105
+ bodyLg: {
106
+ size: "16px",
107
+ weight: 400,
108
+ lineHeight: 1,
109
+ letterSpacing: "0em",
110
+ fontFamily: e.body
111
+ },
112
+ bodyMd: {
113
+ size: "14px",
114
+ weight: 400,
115
+ lineHeight: 1,
116
+ letterSpacing: "0em",
117
+ fontFamily: e.body
118
+ },
119
+ bodySm: {
120
+ size: "12px",
121
+ weight: 400,
122
+ lineHeight: 1,
123
+ letterSpacing: "0em",
124
+ fontFamily: e.body
125
+ },
126
+ label: {
127
+ size: "13px",
128
+ weight: 500,
129
+ lineHeight: 1.4,
130
+ letterSpacing: "0.03em",
131
+ fontFamily: e.body
132
+ },
133
+ labelSm: {
134
+ size: "11px",
135
+ weight: 500,
136
+ lineHeight: 1.4,
137
+ letterSpacing: "0.04em",
138
+ fontFamily: e.body
139
+ },
140
+ code: {
141
+ size: "13px",
142
+ weight: 400,
143
+ lineHeight: 1.5,
144
+ letterSpacing: "0em",
145
+ fontFamily: e.code
146
+ }
147
+ }, n = {
148
+ px: "1px",
149
+ "0.5": "2px",
150
+ 1: "4px",
151
+ 2: "8px",
152
+ 3: "12px",
153
+ 4: "16px",
154
+ 5: "20px",
155
+ 6: "24px",
156
+ 8: "32px",
157
+ 10: "40px",
158
+ 12: "48px"
159
+ }, a = {
160
+ none: "0px",
161
+ xs: "4px",
162
+ sm: "8px",
163
+ md: "12px",
164
+ lg: "16px",
165
+ xl: "24px",
166
+ full: "9999px"
167
+ }, o = {
168
+ none: "none",
169
+ xs: "0 1px 2px rgba(0, 0, 0, 0.06)",
170
+ sm: "0 2px 6px rgba(0, 0, 0, 0.08)",
171
+ md: "0 4px 12px rgba(0, 0, 0, 0.12)",
172
+ lg: "0 8px 24px rgba(0, 0, 0, 0.16)",
173
+ xl: "0 16px 40px rgba(0, 0, 0, 0.20)",
174
+ glowAlpha: "0 0 20px rgba(190, 3, 164, 0.50)",
175
+ glowBeta: "0 0 20px rgba(148, 170, 253, 0.50)",
176
+ glowGamma: "0 0 20px rgba(130, 174, 55, 0.50)",
177
+ glowDelta: "0 0 20px rgba(55, 130, 174, 0.50)",
178
+ button: "0 1px 2px rgba(0, 0, 0, 0.2)",
179
+ buttonHover: "0 1px 4px rgba(0, 0, 0, 0.2)",
180
+ focusGlow: "0 0 4px #EE6691"
181
+ }, g = {
182
+ base: 0,
183
+ raised: 10,
184
+ dropdown: 100,
185
+ sticky: 200,
186
+ overlay: 300,
187
+ modal: 400,
188
+ popover: 500,
189
+ toast: 600
190
+ }, F = {
191
+ colors: t,
192
+ gradients: r,
193
+ fontFamily: e,
194
+ typography: i,
195
+ spacing: n,
196
+ radius: a,
197
+ shadows: o,
198
+ zIndex: g
199
+ };
200
+ export {
201
+ t as colors,
202
+ e as fontFamily,
203
+ r as gradients,
204
+ a as radius,
205
+ o as shadows,
206
+ n as spacing,
207
+ F as tokens,
208
+ i as typography,
209
+ g as zIndex
210
+ };
package/dist/tokens.css ADDED
@@ -0,0 +1 @@
1
+ :root{--color-brand-primary: #180C44;--color-brand-accent: #725CC1;--color-brand-accent-subtle: #EBE9F3;--color-brand-accent-muted: #A499C6;--color-brand-hover: #3B2395;--color-semantic-error: #E9336C;--color-semantic-error-strong: #C10000;--color-semantic-error-light: #EE6691;--color-semantic-success: #099B30;--color-semantic-success-dark: #04841B;--color-semantic-success-deep: #065B15;--color-semantic-success-muted: #82AE37;--color-semantic-warning: #FCC13E;--color-semantic-warning-text: #E4AC32;--color-semantic-info: #1B4DFF;--color-semantic-info-strong: #0065F7;--color-semantic-info-dark: #02409A;--color-semantic-info-muted: #127498;--color-badge-green-bg: #E4FFEC;--color-badge-green-border: #5FD87F;--color-badge-green-text: #099B30;--color-badge-dark-green-bg: #B3D9BA;--color-badge-dark-green-border: #04841B;--color-badge-dark-green-text: #065B15;--color-badge-blue-bg: #E6EFFC;--color-badge-blue-border: #0065F7;--color-badge-blue-text: #02409A;--color-badge-purple-bg: #FFE2FF;--color-badge-purple-border: #DF00DF;--color-badge-purple-text: #9A009A;--color-badge-violet-bg: #E8C1FF;--color-badge-violet-border: #B331FF;--color-badge-violet-text: #921EC3;--color-badge-yellow-bg: #FFF6E2;--color-badge-yellow-border: #FCC13E;--color-badge-yellow-text: #E4AC32;--color-badge-teal-bg: #E3FDFF;--color-badge-teal-border: #18CBDB;--color-badge-teal-text: #0DACBB;--color-badge-pink-bg: #FFE7EE;--color-badge-pink-border: #EE6691;--color-badge-pink-text: #E30047;--color-badge-red-bg: #FFE2E2;--color-badge-red-border: #FF2929;--color-badge-red-text: #C10000;--color-badge-orange-bg: #FDE1D4;--color-badge-orange-border: #FF6924;--color-badge-orange-text: #F65F1A;--color-badge-grey-bg: #E3E3E3;--color-badge-grey-border: #7F7F7F;--color-badge-grey-text: #545454;--color-badge-brown-bg: #F4E8DC;--color-badge-brown-border: #B87333;--color-badge-brown-text: #8B5E34;--color-text-primary: #1A1A1A;--color-text-secondary: #2E2E2E;--color-text-tertiary: #545454;--color-text-disabled: #7F7F7F;--color-text-inverse: #FFFFFF;--color-border-default: #D3D3D3;--color-border-subtle: #E0E0E0;--color-border-hover: #A9A9A9;--color-surface-default: #FFFFFF;--color-surface-subtle: #F5F5F5;--color-surface-subtle-hover: #F6F6F6;--color-surface-accent: #F4F2FF;--color-focus-glow: #EE6691;--color-focus-border: #E9336C;--gradient-brand-alpha: linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%);--gradient-brand-beta: linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%);--gradient-brand-gamma: linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%);--gradient-brand-delta: linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%);--font-heading: "Amsi Pro", "Inter", system-ui, sans-serif;--font-body: "Nunito Sans", "Inter", system-ui, sans-serif;--font-code: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;--text-display-size: 40px;--text-display-weight: 400;--text-display-line-height: 1;--text-display-letter-spacing: 0em;--text-heading-xl-size: 32px;--text-heading-xl-weight: 400;--text-heading-xl-line-height: 1;--text-heading-xl-letter-spacing: 0em;--text-heading-lg-size: 24px;--text-heading-lg-weight: 400;--text-heading-lg-line-height: 1;--text-heading-lg-letter-spacing: 0em;--text-heading-md-size: 20px;--text-heading-md-weight: 400;--text-heading-md-line-height: 1;--text-heading-md-letter-spacing: 0em;--text-heading-sm-size: 18px;--text-heading-sm-weight: 400;--text-heading-sm-line-height: 1;--text-heading-sm-letter-spacing: 0em;--text-body-lg-size: 16px;--text-body-lg-weight: 400;--text-body-lg-line-height: 1;--text-body-lg-letter-spacing: 0em;--text-body-md-size: 14px;--text-body-md-weight: 400;--text-body-md-line-height: 1;--text-body-md-letter-spacing: 0em;--text-body-sm-size: 12px;--text-body-sm-weight: 400;--text-body-sm-line-height: 1;--text-body-sm-letter-spacing: 0em;--text-label-size: 13px;--text-label-weight: 500;--text-label-line-height: 1.4;--text-label-letter-spacing: .03em;--text-label-sm-size: 11px;--text-label-sm-weight: 500;--text-label-sm-line-height: 1.4;--text-label-sm-letter-spacing: .04em;--text-code-size: 13px;--text-code-weight: 400;--text-code-line-height: 1.5;--text-code-letter-spacing: 0em;--space-px: 1px;--space-0-5: 2px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--radius-none: 0px;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-none: none;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);--shadow-sm: 0 2px 6px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .12);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .16);--shadow-xl: 0 16px 40px rgba(0, 0, 0, .2);--shadow-button: 0 1px 2px rgba(0, 0, 0, .2);--shadow-button-hover: 0 1px 4px rgba(0, 0, 0, .2);--shadow-button-filled-hover: 0 4px 10px var(--color-border-default);--shadow-button-glass-hover: 0 4px 10px var(--color-border-default);--shadow-focus-glow: 0 0 4px var(--color-focus-glow);--shadow-section-inset: 2px 2px 10px 1px rgba(239, 239, 239, .8) inset;--shadow-glow-alpha: 0 0 20px rgba(190, 3, 164, .5);--shadow-glow-beta: 0 0 20px rgba(148, 170, 253, .5);--shadow-glow-gamma: 0 0 20px rgba(130, 174, 55, .5);--shadow-glow-delta: 0 0 20px rgba(55, 130, 174, .5);--z-base: 0;--z-raised: 10;--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-popover: 500;--z-toast: 600;--bp-xs: 320px;--bp-sm: 480px;--bp-md: 768px;--bp-lg: 1024px}html{font-family:var(--font-body);font-size:var(--text-body-lg-size);font-weight:400;line-height:var(--text-body-lg-line-height);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:inherit;font-size:inherit;line-height:inherit}*,*:before,*:after{box-sizing:border-box;font-family:inherit}button,input,select,textarea,optgroup{font-family:var(--font-body);font-size:inherit;line-height:inherit}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:var(--radius-full)}*::-webkit-scrollbar-thumb:hover{background:var(--color-text-disabled)}*::-webkit-scrollbar-button{display:none;width:0;height:0}@supports (-moz-appearance: none){*{scrollbar-width:thin;scrollbar-color:var(--color-border-hover) transparent}}
package/dist/tokens.d.ts ADDED
@@ -0,0 +1,493 @@
1
+ export declare const colors: {
2
+ readonly brand: {
3
+ readonly primary: "#180C44";
4
+ readonly accent: "#725CC1";
5
+ readonly accentSubtle: "#EBE9F3";
6
+ readonly accentMuted: "#A499C6";
7
+ readonly hover: "#3B2395";
8
+ };
9
+ readonly semantic: {
10
+ readonly error: "#E9336C";
11
+ readonly errorStrong: "#C10000";
12
+ readonly errorLight: "#EE6691";
13
+ readonly success: "#099B30";
14
+ readonly successDark: "#04841B";
15
+ readonly successDeep: "#065B15";
16
+ readonly successMuted: "#82AE37";
17
+ readonly warning: "#FCC13E";
18
+ readonly warningText: "#E4AC32";
19
+ readonly info: "#1B4DFF";
20
+ readonly infoStrong: "#0065F7";
21
+ readonly infoDark: "#02409A";
22
+ readonly infoMuted: "#127498";
23
+ };
24
+ readonly text: {
25
+ readonly primary: "#1A1A1A";
26
+ readonly secondary: "#2E2E2E";
27
+ readonly tertiary: "#545454";
28
+ readonly disabled: "#7F7F7F";
29
+ readonly inverse: "#FFFFFF";
30
+ };
31
+ readonly border: {
32
+ readonly default: "#D3D3D3";
33
+ readonly subtle: "#E0E0E0";
34
+ readonly hover: "#A9A9A9";
35
+ };
36
+ readonly surface: {
37
+ readonly default: "#FFFFFF";
38
+ readonly subtle: "#F5F5F5";
39
+ readonly subtleHover: "#F6F6F6";
40
+ readonly accent: "#F4F2FF";
41
+ };
42
+ readonly focus: {
43
+ readonly glow: "#EE6691";
44
+ readonly border: "#E9336C";
45
+ };
46
+ readonly badge: {
47
+ readonly green: {
48
+ readonly bg: "#E4FFEC";
49
+ readonly border: "#5FD87F";
50
+ readonly text: "#099B30";
51
+ };
52
+ readonly darkGreen: {
53
+ readonly bg: "#B3D9BA";
54
+ readonly border: "#04841B";
55
+ readonly text: "#065B15";
56
+ };
57
+ readonly blue: {
58
+ readonly bg: "#E6EFFC";
59
+ readonly border: "#0065F7";
60
+ readonly text: "#02409A";
61
+ };
62
+ readonly purple: {
63
+ readonly bg: "#FFE2FF";
64
+ readonly border: "#DF00DF";
65
+ readonly text: "#9A009A";
66
+ };
67
+ readonly violet: {
68
+ readonly bg: "#E8C1FF";
69
+ readonly border: "#B331FF";
70
+ readonly text: "#921EC3";
71
+ };
72
+ readonly yellow: {
73
+ readonly bg: "#FFF6E2";
74
+ readonly border: "#FCC13E";
75
+ readonly text: "#E4AC32";
76
+ };
77
+ readonly teal: {
78
+ readonly bg: "#E3FDFF";
79
+ readonly border: "#18CBDB";
80
+ readonly text: "#0DACBB";
81
+ };
82
+ readonly pink: {
83
+ readonly bg: "#FFE7EE";
84
+ readonly border: "#EE6691";
85
+ readonly text: "#E30047";
86
+ };
87
+ readonly red: {
88
+ readonly bg: "#FFE2E2";
89
+ readonly border: "#FF2929";
90
+ readonly text: "#C10000";
91
+ };
92
+ readonly orange: {
93
+ readonly bg: "#FDE1D4";
94
+ readonly border: "#FF6924";
95
+ readonly text: "#F65F1A";
96
+ };
97
+ readonly grey: {
98
+ readonly bg: "#E3E3E3";
99
+ readonly border: "#7F7F7F";
100
+ readonly text: "#545454";
101
+ };
102
+ readonly brown: {
103
+ readonly bg: "#F4E8DC";
104
+ readonly border: "#B87333";
105
+ readonly text: "#8B5E34";
106
+ };
107
+ };
108
+ };
109
+ export declare const gradients: {
110
+ readonly brandAlpha: "linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%)";
111
+ readonly brandBeta: "linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%)";
112
+ readonly brandGamma: "linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%)";
113
+ readonly brandDelta: "linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%)";
114
+ };
115
+ export declare const fontFamily: {
116
+ readonly heading: "'Amsi Pro', 'Inter', system-ui, sans-serif";
117
+ readonly body: "'Nunito Sans', 'Inter', system-ui, sans-serif";
118
+ readonly code: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace";
119
+ };
120
+ export declare const typography: {
121
+ readonly display: {
122
+ readonly size: "40px";
123
+ readonly weight: 400;
124
+ readonly lineHeight: 1;
125
+ readonly letterSpacing: "0em";
126
+ readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
127
+ };
128
+ readonly headingXl: {
129
+ readonly size: "32px";
130
+ readonly weight: 400;
131
+ readonly lineHeight: 1;
132
+ readonly letterSpacing: "0em";
133
+ readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
134
+ };
135
+ readonly headingLg: {
136
+ readonly size: "24px";
137
+ readonly weight: 400;
138
+ readonly lineHeight: 1;
139
+ readonly letterSpacing: "0em";
140
+ readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
141
+ };
142
+ readonly headingMd: {
143
+ readonly size: "20px";
144
+ readonly weight: 400;
145
+ readonly lineHeight: 1;
146
+ readonly letterSpacing: "0em";
147
+ readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
148
+ };
149
+ readonly headingSm: {
150
+ readonly size: "18px";
151
+ readonly weight: 400;
152
+ readonly lineHeight: 1;
153
+ readonly letterSpacing: "0em";
154
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
155
+ };
156
+ readonly bodyLg: {
157
+ readonly size: "16px";
158
+ readonly weight: 400;
159
+ readonly lineHeight: 1;
160
+ readonly letterSpacing: "0em";
161
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
162
+ };
163
+ readonly bodyMd: {
164
+ readonly size: "14px";
165
+ readonly weight: 400;
166
+ readonly lineHeight: 1;
167
+ readonly letterSpacing: "0em";
168
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
169
+ };
170
+ readonly bodySm: {
171
+ readonly size: "12px";
172
+ readonly weight: 400;
173
+ readonly lineHeight: 1;
174
+ readonly letterSpacing: "0em";
175
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
176
+ };
177
+ readonly label: {
178
+ readonly size: "13px";
179
+ readonly weight: 500;
180
+ readonly lineHeight: 1.4;
181
+ readonly letterSpacing: "0.03em";
182
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
183
+ };
184
+ readonly labelSm: {
185
+ readonly size: "11px";
186
+ readonly weight: 500;
187
+ readonly lineHeight: 1.4;
188
+ readonly letterSpacing: "0.04em";
189
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
190
+ };
191
+ readonly code: {
192
+ readonly size: "13px";
193
+ readonly weight: 400;
194
+ readonly lineHeight: 1.5;
195
+ readonly letterSpacing: "0em";
196
+ readonly fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace";
197
+ };
198
+ };
199
+ export declare const spacing: {
200
+ readonly px: "1px";
201
+ readonly '0.5': "2px";
202
+ readonly '1': "4px";
203
+ readonly '2': "8px";
204
+ readonly '3': "12px";
205
+ readonly '4': "16px";
206
+ readonly '5': "20px";
207
+ readonly '6': "24px";
208
+ readonly '8': "32px";
209
+ readonly '10': "40px";
210
+ readonly '12': "48px";
211
+ };
212
+ export declare const radius: {
213
+ readonly none: "0px";
214
+ readonly xs: "4px";
215
+ readonly sm: "8px";
216
+ readonly md: "12px";
217
+ readonly lg: "16px";
218
+ readonly xl: "24px";
219
+ readonly full: "9999px";
220
+ };
221
+ export declare const shadows: {
222
+ readonly none: "none";
223
+ readonly xs: "0 1px 2px rgba(0, 0, 0, 0.06)";
224
+ readonly sm: "0 2px 6px rgba(0, 0, 0, 0.08)";
225
+ readonly md: "0 4px 12px rgba(0, 0, 0, 0.12)";
226
+ readonly lg: "0 8px 24px rgba(0, 0, 0, 0.16)";
227
+ readonly xl: "0 16px 40px rgba(0, 0, 0, 0.20)";
228
+ readonly glowAlpha: "0 0 20px rgba(190, 3, 164, 0.50)";
229
+ readonly glowBeta: "0 0 20px rgba(148, 170, 253, 0.50)";
230
+ readonly glowGamma: "0 0 20px rgba(130, 174, 55, 0.50)";
231
+ readonly glowDelta: "0 0 20px rgba(55, 130, 174, 0.50)";
232
+ readonly button: "0 1px 2px rgba(0, 0, 0, 0.2)";
233
+ readonly buttonHover: "0 1px 4px rgba(0, 0, 0, 0.2)";
234
+ readonly focusGlow: "0 0 4px #EE6691";
235
+ };
236
+ export declare const zIndex: {
237
+ readonly base: 0;
238
+ readonly raised: 10;
239
+ readonly dropdown: 100;
240
+ readonly sticky: 200;
241
+ readonly overlay: 300;
242
+ readonly modal: 400;
243
+ readonly popover: 500;
244
+ readonly toast: 600;
245
+ };
246
+ export declare const tokens: {
247
+ readonly colors: {
248
+ readonly brand: {
249
+ readonly primary: "#180C44";
250
+ readonly accent: "#725CC1";
251
+ readonly accentSubtle: "#EBE9F3";
252
+ readonly accentMuted: "#A499C6";
253
+ readonly hover: "#3B2395";
254
+ };
255
+ readonly semantic: {
256
+ readonly error: "#E9336C";
257
+ readonly errorStrong: "#C10000";
258
+ readonly errorLight: "#EE6691";
259
+ readonly success: "#099B30";
260
+ readonly successDark: "#04841B";
261
+ readonly successDeep: "#065B15";
262
+ readonly successMuted: "#82AE37";
263
+ readonly warning: "#FCC13E";
264
+ readonly warningText: "#E4AC32";
265
+ readonly info: "#1B4DFF";
266
+ readonly infoStrong: "#0065F7";
267
+ readonly infoDark: "#02409A";
268
+ readonly infoMuted: "#127498";
269
+ };
270
+ readonly text: {
271
+ readonly primary: "#1A1A1A";
272
+ readonly secondary: "#2E2E2E";
273
+ readonly tertiary: "#545454";
274
+ readonly disabled: "#7F7F7F";
275
+ readonly inverse: "#FFFFFF";
276
+ };
277
+ readonly border: {
278
+ readonly default: "#D3D3D3";
279
+ readonly subtle: "#E0E0E0";
280
+ readonly hover: "#A9A9A9";
281
+ };
282
+ readonly surface: {
283
+ readonly default: "#FFFFFF";
284
+ readonly subtle: "#F5F5F5";
285
+ readonly subtleHover: "#F6F6F6";
286
+ readonly accent: "#F4F2FF";
287
+ };
288
+ readonly focus: {
289
+ readonly glow: "#EE6691";
290
+ readonly border: "#E9336C";
291
+ };
292
+ readonly badge: {
293
+ readonly green: {
294
+ readonly bg: "#E4FFEC";
295
+ readonly border: "#5FD87F";
296
+ readonly text: "#099B30";
297
+ };
298
+ readonly darkGreen: {
299
+ readonly bg: "#B3D9BA";
300
+ readonly border: "#04841B";
301
+ readonly text: "#065B15";
302
+ };
303
+ readonly blue: {
304
+ readonly bg: "#E6EFFC";
305
+ readonly border: "#0065F7";
306
+ readonly text: "#02409A";
307
+ };
308
+ readonly purple: {
309
+ readonly bg: "#FFE2FF";
310
+ readonly border: "#DF00DF";
311
+ readonly text: "#9A009A";
312
+ };
313
+ readonly violet: {
314
+ readonly bg: "#E8C1FF";
315
+ readonly border: "#B331FF";
316
+ readonly text: "#921EC3";
317
+ };
318
+ readonly yellow: {
319
+ readonly bg: "#FFF6E2";
320
+ readonly border: "#FCC13E";
321
+ readonly text: "#E4AC32";
322
+ };
323
+ readonly teal: {
324
+ readonly bg: "#E3FDFF";
325
+ readonly border: "#18CBDB";
326
+ readonly text: "#0DACBB";
327
+ };
328
+ readonly pink: {
329
+ readonly bg: "#FFE7EE";
330
+ readonly border: "#EE6691";
331
+ readonly text: "#E30047";
332
+ };
333
+ readonly red: {
334
+ readonly bg: "#FFE2E2";
335
+ readonly border: "#FF2929";
336
+ readonly text: "#C10000";
337
+ };
338
+ readonly orange: {
339
+ readonly bg: "#FDE1D4";
340
+ readonly border: "#FF6924";
341
+ readonly text: "#F65F1A";
342
+ };
343
+ readonly grey: {
344
+ readonly bg: "#E3E3E3";
345
+ readonly border: "#7F7F7F";
346
+ readonly text: "#545454";
347
+ };
348
+ readonly brown: {
349
+ readonly bg: "#F4E8DC";
350
+ readonly border: "#B87333";
351
+ readonly text: "#8B5E34";
352
+ };
353
+ };
354
+ };
355
+ readonly gradients: {
356
+ readonly brandAlpha: "linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%)";
357
+ readonly brandBeta: "linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%)";
358
+ readonly brandGamma: "linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%)";
359
+ readonly brandDelta: "linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%)";
360
+ };
361
+ readonly fontFamily: {
362
+ readonly heading: "'Amsi Pro', 'Inter', system-ui, sans-serif";
363
+ readonly body: "'Nunito Sans', 'Inter', system-ui, sans-serif";
364
+ readonly code: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace";
365
+ };
366
+ readonly typography: {
367
+ readonly display: {
368
+ readonly size: "40px";
369
+ readonly weight: 400;
370
+ readonly lineHeight: 1;
371
+ readonly letterSpacing: "0em";
372
+ readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
373
+ };
374
+ readonly headingXl: {
375
+ readonly size: "32px";
376
+ readonly weight: 400;
377
+ readonly lineHeight: 1;
378
+ readonly letterSpacing: "0em";
379
+ readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
380
+ };
381
+ readonly headingLg: {
382
+ readonly size: "24px";
383
+ readonly weight: 400;
384
+ readonly lineHeight: 1;
385
+ readonly letterSpacing: "0em";
386
+ readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
387
+ };
388
+ readonly headingMd: {
389
+ readonly size: "20px";
390
+ readonly weight: 400;
391
+ readonly lineHeight: 1;
392
+ readonly letterSpacing: "0em";
393
+ readonly fontFamily: "'Amsi Pro', 'Inter', system-ui, sans-serif";
394
+ };
395
+ readonly headingSm: {
396
+ readonly size: "18px";
397
+ readonly weight: 400;
398
+ readonly lineHeight: 1;
399
+ readonly letterSpacing: "0em";
400
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
401
+ };
402
+ readonly bodyLg: {
403
+ readonly size: "16px";
404
+ readonly weight: 400;
405
+ readonly lineHeight: 1;
406
+ readonly letterSpacing: "0em";
407
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
408
+ };
409
+ readonly bodyMd: {
410
+ readonly size: "14px";
411
+ readonly weight: 400;
412
+ readonly lineHeight: 1;
413
+ readonly letterSpacing: "0em";
414
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
415
+ };
416
+ readonly bodySm: {
417
+ readonly size: "12px";
418
+ readonly weight: 400;
419
+ readonly lineHeight: 1;
420
+ readonly letterSpacing: "0em";
421
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
422
+ };
423
+ readonly label: {
424
+ readonly size: "13px";
425
+ readonly weight: 500;
426
+ readonly lineHeight: 1.4;
427
+ readonly letterSpacing: "0.03em";
428
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
429
+ };
430
+ readonly labelSm: {
431
+ readonly size: "11px";
432
+ readonly weight: 500;
433
+ readonly lineHeight: 1.4;
434
+ readonly letterSpacing: "0.04em";
435
+ readonly fontFamily: "'Nunito Sans', 'Inter', system-ui, sans-serif";
436
+ };
437
+ readonly code: {
438
+ readonly size: "13px";
439
+ readonly weight: 400;
440
+ readonly lineHeight: 1.5;
441
+ readonly letterSpacing: "0em";
442
+ readonly fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace";
443
+ };
444
+ };
445
+ readonly spacing: {
446
+ readonly px: "1px";
447
+ readonly '0.5': "2px";
448
+ readonly '1': "4px";
449
+ readonly '2': "8px";
450
+ readonly '3': "12px";
451
+ readonly '4': "16px";
452
+ readonly '5': "20px";
453
+ readonly '6': "24px";
454
+ readonly '8': "32px";
455
+ readonly '10': "40px";
456
+ readonly '12': "48px";
457
+ };
458
+ readonly radius: {
459
+ readonly none: "0px";
460
+ readonly xs: "4px";
461
+ readonly sm: "8px";
462
+ readonly md: "12px";
463
+ readonly lg: "16px";
464
+ readonly xl: "24px";
465
+ readonly full: "9999px";
466
+ };
467
+ readonly shadows: {
468
+ readonly none: "none";
469
+ readonly xs: "0 1px 2px rgba(0, 0, 0, 0.06)";
470
+ readonly sm: "0 2px 6px rgba(0, 0, 0, 0.08)";
471
+ readonly md: "0 4px 12px rgba(0, 0, 0, 0.12)";
472
+ readonly lg: "0 8px 24px rgba(0, 0, 0, 0.16)";
473
+ readonly xl: "0 16px 40px rgba(0, 0, 0, 0.20)";
474
+ readonly glowAlpha: "0 0 20px rgba(190, 3, 164, 0.50)";
475
+ readonly glowBeta: "0 0 20px rgba(148, 170, 253, 0.50)";
476
+ readonly glowGamma: "0 0 20px rgba(130, 174, 55, 0.50)";
477
+ readonly glowDelta: "0 0 20px rgba(55, 130, 174, 0.50)";
478
+ readonly button: "0 1px 2px rgba(0, 0, 0, 0.2)";
479
+ readonly buttonHover: "0 1px 4px rgba(0, 0, 0, 0.2)";
480
+ readonly focusGlow: "0 0 4px #EE6691";
481
+ };
482
+ readonly zIndex: {
483
+ readonly base: 0;
484
+ readonly raised: 10;
485
+ readonly dropdown: 100;
486
+ readonly sticky: 200;
487
+ readonly overlay: 300;
488
+ readonly modal: 400;
489
+ readonly popover: 500;
490
+ readonly toast: 600;
491
+ };
492
+ };
493
+ //# sourceMappingURL=tokens.d.ts.map
package/dist/tokens.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DT,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;CAKZ,CAAC;AAEX,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAaX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Eb,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYV,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;CAcV,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAST,CAAC"}
package/package.json CHANGED
@@ -1,13 +1,29 @@
1
- {
2
- "name": "@dukaandost/tokens",
3
- "version": "1.0.1",
4
- "main": "src/index.ts",
5
- "types": "src/index.ts",
6
- "files": ["src"],
7
- "publishConfig": {
8
- "access": "public"
9
- },
10
- "scripts": {
11
- "build": "echo 'Tokens are consumed as source'"
12
- }
13
- }
1
+ {
2
+ "name": "@dukaandost/tokens",
3
+ "version": "1.1.1",
4
+ "type": "module",
5
+ "main": "dist/index.cjs",
6
+ "module": "dist/index.js",
7
+ "types": "dist/index.d.ts",
8
+ "files": ["dist", "src/tokens.css"],
9
+ "publishConfig": {
10
+ "access": "public"
11
+ },
12
+ "exports": {
13
+ ".": {
14
+ "types": "./dist/index.d.ts",
15
+ "import": "./dist/index.js",
16
+ "require": "./dist/index.cjs"
17
+ },
18
+ "./tokens.css": "./dist/tokens.css",
19
+ "./src/tokens.css": "./src/tokens.css"
20
+ },
21
+ "scripts": {
22
+ "build": "tsc --noEmit && vite build"
23
+ },
24
+ "devDependencies": {
25
+ "typescript": "^5.4.0",
26
+ "vite": "^5.4.0",
27
+ "vite-plugin-dts": "^3.9.0"
28
+ }
29
+ }
package/src/tokens.css CHANGED
@@ -1,7 +1,7 @@
1
1
  :root {
2
2
  /* Brand */
3
3
  --color-brand-primary: #180C44;
4
- --color-brand-accent: #8A38F5;
4
+ --color-brand-accent: #725CC1;
5
5
  --color-brand-accent-subtle: #EBE9F3;
6
6
  --color-brand-accent-muted: #A499C6;
7
7
  --color-brand-hover: #3B2395;
@@ -92,52 +92,56 @@
92
92
  --font-body: 'Nunito Sans', 'Inter', system-ui, sans-serif;
93
93
  --font-code: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
94
94
 
95
- /* Typography — Figma: H1 (Amsi Pro 40px) */
95
+ /* Figma text styles — all line-height 100%, letter-spacing 0.
96
+ Bold companions exist (H1 Black/H2 Bold/H3-H5 SemiBold/Base+Mobile+
97
+ SubText SemiBold) — express via Typography `weight` prop. */
98
+
99
+ /* Figma: H1 (Amsi Pro Regular 40/100/0) | Bold = weight 900 (Black) */
96
100
  --text-display-size: 40px;
97
101
  --text-display-weight: 400;
98
- --text-display-line-height: 1.37;
102
+ --text-display-line-height: 1;
99
103
  --text-display-letter-spacing: 0em;
100
104
 
101
- /* Figma: H2 (Amsi Pro 32px) */
105
+ /* Figma: H2 (Amsi Pro Regular 32/100/0) | Bold = weight 700 */
102
106
  --text-heading-xl-size: 32px;
103
107
  --text-heading-xl-weight: 400;
104
- --text-heading-xl-line-height: 1.37;
108
+ --text-heading-xl-line-height: 1;
105
109
  --text-heading-xl-letter-spacing: 0em;
106
110
 
107
- /* Figma: H3 (Amsi Pro 24px) */
111
+ /* Figma: H3 (Amsi Pro Regular 24/100/0) | Bold = weight 600 (SemiBold) */
108
112
  --text-heading-lg-size: 24px;
109
113
  --text-heading-lg-weight: 400;
110
- --text-heading-lg-line-height: 1.37;
114
+ --text-heading-lg-line-height: 1;
111
115
  --text-heading-lg-letter-spacing: 0em;
112
116
 
113
- /* Figma: H4 (Amsi Pro 20px) */
117
+ /* Figma: H4 (Amsi Pro Regular 20/100/0) | Bold = weight 600 (SemiBold) */
114
118
  --text-heading-md-size: 20px;
115
119
  --text-heading-md-weight: 400;
116
- --text-heading-md-line-height: 1.37;
120
+ --text-heading-md-line-height: 1;
117
121
  --text-heading-md-letter-spacing: 0em;
118
122
 
119
- /* Figma: H5 (Nunito Sans 18px) */
123
+ /* Figma: H5 (Nunito Sans Regular 18/100/0) | Bold = weight 600 (SemiBold) */
120
124
  --text-heading-sm-size: 18px;
121
125
  --text-heading-sm-weight: 400;
122
- --text-heading-sm-line-height: 1.36;
126
+ --text-heading-sm-line-height: 1;
123
127
  --text-heading-sm-letter-spacing: 0em;
124
128
 
125
- /* Figma: Base Text (Nunito Sans 16px) */
129
+ /* Figma: Base Text (Nunito Sans 16/100/0) */
126
130
  --text-body-lg-size: 16px;
127
131
  --text-body-lg-weight: 400;
128
- --text-body-lg-line-height: 1.36;
132
+ --text-body-lg-line-height: 1;
129
133
  --text-body-lg-letter-spacing: 0em;
130
134
 
131
- /* Figma: Mobile Base Text (Nunito Sans 14px) */
135
+ /* Figma: Mobile Base Text (Nunito Sans 14/100/0) */
132
136
  --text-body-md-size: 14px;
133
137
  --text-body-md-weight: 400;
134
- --text-body-md-line-height: 1.36;
138
+ --text-body-md-line-height: 1;
135
139
  --text-body-md-letter-spacing: 0em;
136
140
 
137
- /* Figma: SubText (Nunito Sans 12px) */
141
+ /* Figma: SubText (Nunito Sans Regular 12/100/0) */
138
142
  --text-body-sm-size: 12px;
139
143
  --text-body-sm-weight: 400;
140
- --text-body-sm-line-height: 1.36;
144
+ --text-body-sm-line-height: 1;
141
145
  --text-body-sm-letter-spacing: 0em;
142
146
 
143
147
  /* Label (Nunito Sans 13px) */
@@ -261,3 +265,40 @@ optgroup {
261
265
  font-size: inherit;
262
266
  line-height: inherit;
263
267
  }
268
+
269
+ /* =============================================
270
+ Scrollbars — thin, grey, always visible. App-wide.
271
+ -------------------------------------------------
272
+ WebKit (Chrome/Edge/Safari) is styled via the pseudo-elements below.
273
+ Firefox's standard properties are scoped inside @supports so they do NOT
274
+ also apply in Chrome — Chrome 121+ silently ignores ::-webkit-scrollbar on
275
+ any element that has scrollbar-width/scrollbar-color set, which would defeat
276
+ the custom styling. Components must not set scrollbar-width locally for the
277
+ same reason.
278
+ ============================================= */
279
+ *::-webkit-scrollbar {
280
+ width: 6px;
281
+ height: 6px;
282
+ }
283
+ *::-webkit-scrollbar-track {
284
+ background: transparent;
285
+ }
286
+ *::-webkit-scrollbar-thumb {
287
+ background: var(--color-border-hover);
288
+ border-radius: var(--radius-full);
289
+ }
290
+ *::-webkit-scrollbar-thumb:hover {
291
+ background: var(--color-text-disabled);
292
+ }
293
+ *::-webkit-scrollbar-button {
294
+ display: none;
295
+ width: 0;
296
+ height: 0;
297
+ }
298
+
299
+ @supports (-moz-appearance: none) {
300
+ * {
301
+ scrollbar-width: thin;
302
+ scrollbar-color: var(--color-border-hover) transparent;
303
+ }
304
+ }
package/src/index.ts DELETED
@@ -1,2 +0,0 @@
1
- import './tokens.css';
2
- export * from './tokens';
package/src/tokens.ts DELETED
@@ -1,219 +0,0 @@
1
- // ---------------------------------------------------------------------------
2
- // Design Tokens – TypeScript constants
3
- // ---------------------------------------------------------------------------
4
-
5
- export const colors = {
6
- brand: {
7
- primary: '#180C44',
8
- accent: '#8A38F5',
9
- accentSubtle: '#EBE9F3',
10
- accentMuted: '#A499C6',
11
- hover: '#3B2395',
12
- },
13
- semantic: {
14
- error: '#E9336C',
15
- errorStrong: '#C10000',
16
- errorLight: '#EE6691',
17
- success: '#099B30',
18
- successDark: '#04841B',
19
- successDeep: '#065B15',
20
- successMuted: '#82AE37',
21
- warning: '#FCC13E',
22
- warningText: '#E4AC32',
23
- info: '#1B4DFF',
24
- infoStrong: '#0065F7',
25
- infoDark: '#02409A',
26
- infoMuted: '#127498',
27
- },
28
- text: {
29
- primary: '#1A1A1A',
30
- secondary: '#2E2E2E',
31
- tertiary: '#545454',
32
- disabled: '#7F7F7F',
33
- inverse: '#FFFFFF',
34
- },
35
- border: {
36
- default: '#D3D3D3',
37
- subtle: '#E0E0E0',
38
- hover: '#A9A9A9',
39
- },
40
- surface: {
41
- default: '#FFFFFF',
42
- subtle: '#F5F5F5',
43
- subtleHover: '#F6F6F6',
44
- accent: '#F4F2FF',
45
- },
46
- focus: {
47
- glow: '#EE6691',
48
- border: '#E9336C',
49
- },
50
- badge: {
51
- green: { bg: '#E4FFEC', border: '#5FD87F', text: '#099B30' },
52
- darkGreen: { bg: '#B3D9BA', border: '#04841B', text: '#065B15' },
53
- blue: { bg: '#E6EFFC', border: '#0065F7', text: '#02409A' },
54
- purple: { bg: '#FFE2FF', border: '#DF00DF', text: '#9A009A' },
55
- violet: { bg: '#E8C1FF', border: '#B331FF', text: '#921EC3' },
56
- yellow: { bg: '#FFF6E2', border: '#FCC13E', text: '#E4AC32' },
57
- teal: { bg: '#E3FDFF', border: '#18CBDB', text: '#0DACBB' },
58
- pink: { bg: '#FFE7EE', border: '#EE6691', text: '#E30047' },
59
- red: { bg: '#FFE2E2', border: '#FF2929', text: '#C10000' },
60
- orange: { bg: '#FDE1D4', border: '#FF6924', text: '#F65F1A' },
61
- grey: { bg: '#E3E3E3', border: '#7F7F7F', text: '#545454' },
62
- brown: { bg: '#F4E8DC', border: '#B87333', text: '#8B5E34' },
63
- },
64
- } as const;
65
-
66
- export const gradients = {
67
- brandAlpha: 'linear-gradient(90deg, #FF51E3 0%, #8048BE 50%, #02409A 100%)',
68
- brandBeta: 'linear-gradient(90deg, #02409A 0%, #066E65 25%, #099B30 50%)',
69
- brandGamma: 'linear-gradient(90deg, #099B30 0%, #82AE37 50%, #FCC13E 100%)',
70
- brandDelta: 'linear-gradient(90deg, #099B30 0%, #127498 50%, #1B4DFF 100%)',
71
- } as const;
72
-
73
- export const fontFamily = {
74
- heading: "'Amsi Pro', 'Inter', system-ui, sans-serif",
75
- body: "'Nunito Sans', 'Inter', system-ui, sans-serif",
76
- code: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace",
77
- } as const;
78
-
79
- export const typography = {
80
- display: {
81
- size: '40px',
82
- weight: 400,
83
- lineHeight: 1.37,
84
- letterSpacing: '0em',
85
- fontFamily: fontFamily.heading,
86
- },
87
- headingXl: {
88
- size: '32px',
89
- weight: 400,
90
- lineHeight: 1.37,
91
- letterSpacing: '0em',
92
- fontFamily: fontFamily.heading,
93
- },
94
- headingLg: {
95
- size: '24px',
96
- weight: 400,
97
- lineHeight: 1.37,
98
- letterSpacing: '0em',
99
- fontFamily: fontFamily.heading,
100
- },
101
- headingMd: {
102
- size: '20px',
103
- weight: 400,
104
- lineHeight: 1.37,
105
- letterSpacing: '0em',
106
- fontFamily: fontFamily.heading,
107
- },
108
- headingSm: {
109
- size: '18px',
110
- weight: 400,
111
- lineHeight: 1.36,
112
- letterSpacing: '0em',
113
- fontFamily: fontFamily.body,
114
- },
115
- bodyLg: {
116
- size: '16px',
117
- weight: 400,
118
- lineHeight: 1.36,
119
- letterSpacing: '0em',
120
- fontFamily: fontFamily.body,
121
- },
122
- bodyMd: {
123
- size: '14px',
124
- weight: 400,
125
- lineHeight: 1.36,
126
- letterSpacing: '0em',
127
- fontFamily: fontFamily.body,
128
- },
129
- bodySm: {
130
- size: '12px',
131
- weight: 400,
132
- lineHeight: 1.36,
133
- letterSpacing: '0em',
134
- fontFamily: fontFamily.body,
135
- },
136
- label: {
137
- size: '13px',
138
- weight: 500,
139
- lineHeight: 1.4,
140
- letterSpacing: '0.03em',
141
- fontFamily: fontFamily.body,
142
- },
143
- labelSm: {
144
- size: '11px',
145
- weight: 500,
146
- lineHeight: 1.4,
147
- letterSpacing: '0.04em',
148
- fontFamily: fontFamily.body,
149
- },
150
- code: {
151
- size: '13px',
152
- weight: 400,
153
- lineHeight: 1.5,
154
- letterSpacing: '0em',
155
- fontFamily: fontFamily.code,
156
- },
157
- } as const;
158
-
159
- export const spacing = {
160
- px: '1px',
161
- '0.5': '2px',
162
- '1': '4px',
163
- '2': '8px',
164
- '3': '12px',
165
- '4': '16px',
166
- '5': '20px',
167
- '6': '24px',
168
- '8': '32px',
169
- '10': '40px',
170
- '12': '48px',
171
- } as const;
172
-
173
- export const radius = {
174
- none: '0px',
175
- xs: '4px',
176
- sm: '8px',
177
- md: '12px',
178
- lg: '16px',
179
- xl: '24px',
180
- full: '9999px',
181
- } as const;
182
-
183
- export const shadows = {
184
- none: 'none',
185
- xs: '0 1px 2px rgba(0, 0, 0, 0.06)',
186
- sm: '0 2px 6px rgba(0, 0, 0, 0.08)',
187
- md: '0 4px 12px rgba(0, 0, 0, 0.12)',
188
- lg: '0 8px 24px rgba(0, 0, 0, 0.16)',
189
- xl: '0 16px 40px rgba(0, 0, 0, 0.20)',
190
- glowAlpha: '0 0 20px rgba(190, 3, 164, 0.50)',
191
- glowBeta: '0 0 20px rgba(148, 170, 253, 0.50)',
192
- glowGamma: '0 0 20px rgba(130, 174, 55, 0.50)',
193
- glowDelta: '0 0 20px rgba(55, 130, 174, 0.50)',
194
- button: '0 1px 2px rgba(0, 0, 0, 0.2)',
195
- buttonHover: '0 1px 4px rgba(0, 0, 0, 0.2)',
196
- focusGlow: '0 0 4px #EE6691',
197
- } as const;
198
-
199
- export const zIndex = {
200
- base: 0,
201
- raised: 10,
202
- dropdown: 100,
203
- sticky: 200,
204
- overlay: 300,
205
- modal: 400,
206
- popover: 500,
207
- toast: 600,
208
- } as const;
209
-
210
- export const tokens = {
211
- colors,
212
- gradients,
213
- fontFamily,
214
- typography,
215
- spacing,
216
- radius,
217
- shadows,
218
- zIndex,
219
- } as const;