@dybo-ai/design 1.3.0 → 2.0.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.
- package/CLAUDE.md +35 -28
- package/README.md +59 -31
- package/dist/index.cjs +1340 -67
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +383 -3
- package/dist/index.d.ts +383 -3
- package/dist/index.js +1306 -68
- package/dist/index.js.map +1 -1
- package/legacy-theme.css +1112 -0
- package/package.json +3 -1
- package/portal-tokens.css +8 -182
- package/theme.css +1572 -418
- package/tokens.cjs +219 -125
- package/tokens.json +223 -163
- package/tokens.mjs +199 -125
package/tokens.json
CHANGED
|
@@ -1,70 +1,92 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$meta": {
|
|
3
3
|
"name": "DYBO Design System",
|
|
4
|
-
"source": "
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"notes": "Values are real Figma variables with original names retained. Figma uses parallel naming for spacing/radius (t-shirt + numeric); normalized values below are authoritative. NOTE: Figma's 'Feedback Colors/Error' is an orange (#cc6600); the true red danger color is 'Brand/Danger/700' (#a21a17). Recommended semantic mapping is under color.semantic.",
|
|
9
|
-
"style": "Glassmorphism — translucent surfaces, backdrop blur, soft blue-gray shadows"
|
|
4
|
+
"source": "fig-teste/designSystem/tokens.css + handoff-prompt-for-mussoi.md — the real, actively-maintained reference DYBO's product screens are designed against",
|
|
5
|
+
"status": "Default as of 2.0.0. Full light + dark support. Values are HSL-channel triplets ('H S% L%', no hsl() wrapper) so Tailwind's <alpha-value> mechanism and hsl(var(--x) / 0.N) both work.",
|
|
6
|
+
"style": "Glassmorphism — translucent surfaces, backdrop-blur-sm, white stroke in light mode / border-border in dark mode",
|
|
7
|
+
"migration": "Through 1.x, the default system here was built independently of the real DYBO product (see legacy.$meta). It was promoted from a side 'portal' namespace, which is now a deprecated alias — see 'portal' below."
|
|
10
8
|
},
|
|
11
9
|
|
|
12
10
|
"color": {
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
11
|
+
"light": {
|
|
12
|
+
"background": "216 25% 92%",
|
|
13
|
+
"foreground": "218 56% 9%",
|
|
14
|
+
"card": "214 41% 97%",
|
|
15
|
+
"cardForeground": "218 56% 9%",
|
|
16
|
+
"popover": "0 0% 100%",
|
|
17
|
+
"popoverForeground": "218 56% 9%",
|
|
18
|
+
"primary": "218 56% 9%",
|
|
19
|
+
"primaryForeground": "0 0% 100%",
|
|
20
|
+
"secondary": "0 0% 100%",
|
|
21
|
+
"secondaryForeground": "218 56% 9%",
|
|
22
|
+
"muted": "216 16% 88%",
|
|
23
|
+
"mutedForeground": "216 31% 50%",
|
|
24
|
+
"accent": "219 52% 24%",
|
|
25
|
+
"accentForeground": "214 41% 97%",
|
|
26
|
+
"destructive": "355 95% 60%",
|
|
27
|
+
"destructiveForeground": "0 0% 100%",
|
|
28
|
+
"border": "0 0% 100%",
|
|
29
|
+
"input": "240 14% 96%",
|
|
30
|
+
"ring": "219 52% 24%",
|
|
31
|
+
"success": "150 68% 74%",
|
|
32
|
+
"successForeground": "218 56% 9%",
|
|
33
|
+
"successBackground": "151 45% 89%",
|
|
34
|
+
"warning": "30 100% 40%",
|
|
35
|
+
"warningForeground": "218 56% 9%",
|
|
36
|
+
"warningBackground": "30 100% 95%",
|
|
37
|
+
"error": "30 100% 40%",
|
|
38
|
+
"errorForeground": "0 0% 100%",
|
|
39
|
+
"errorBackground": "30 100% 95%",
|
|
40
|
+
"info": "216 31% 50%",
|
|
41
|
+
"infoForeground": "218 56% 9%",
|
|
42
|
+
"infoBackground": "216 31% 89%",
|
|
43
|
+
"tagAmberBackground": "35 100% 95%",
|
|
44
|
+
"tagAmberForeground": "30 100% 24%",
|
|
45
|
+
"tagPurpleBackground": "269 100% 95%",
|
|
46
|
+
"tagPurpleForeground": "273 67% 39%",
|
|
47
|
+
"tagRedBackground": "355 100% 95%",
|
|
48
|
+
"tagRedForeground": "353 78% 32%",
|
|
49
|
+
"overlayScrim": "224 32% 12%",
|
|
50
|
+
"brandDarkOrb": "224 32% 12%",
|
|
51
|
+
"brandIndigo": "219 52% 24%",
|
|
52
|
+
"brandBlueYonder": "216 31% 50%",
|
|
53
|
+
"brandGainsboro": "216 16% 88%",
|
|
54
|
+
"brandCultured": "214 41% 97%",
|
|
55
|
+
"brandDandelion": "54 81% 55%",
|
|
56
|
+
"brandBlack": "0 0% 0%",
|
|
57
|
+
"brandWhite": "0 0% 100%",
|
|
58
|
+
"operatorBackground": "0 0% 89.4%"
|
|
20
59
|
},
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"input":
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"
|
|
51
|
-
"success": { "solid": "#20a156", "bright": "#28ca6b", "bg": "#eafbf1", "figmaName": "Brand/Success/700 · Cool Green/500 · Cool Green/50" },
|
|
52
|
-
"warning": { "solid": "#f16c24", "alt": "#cc6600", "bg": "#ffe5d8", "figmaName": "Medium Priority · Feedback Colors/Error · Medium Priority Background" },
|
|
53
|
-
"danger": { "solid": "#a21a17", "bg": "#fffbfb", "figmaName": "Brand/Danger/700 · Bright Red/50" },
|
|
54
|
-
"feedback": {
|
|
55
|
-
"successText": { "value": "#91eabe", "figmaName": "Feedback Colors/Success Text" },
|
|
56
|
-
"successBg": { "value": "#d7f0e4", "figmaName": "Feedback Colors/Success Background" },
|
|
57
|
-
"errorOrange": { "value": "#cc6600", "figmaName": "Feedback Colors/Error (note: orange, not red)" },
|
|
58
|
-
"errorOrangeBg": { "value": "#fff2e5", "figmaName": "Feedback Colors/Error Background" }
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
"status": {
|
|
63
|
-
"$note": "DYBO domain status/priority colors (foreground + background pairs), from the Tags component.",
|
|
64
|
-
"resolved": { "fg": "#0399ae", "bg": "#d3f7fc", "figmaName": "Resolved · Resolved Background" },
|
|
65
|
-
"highPriority": { "fg": "#682a5d", "bg": "#eee0ec", "figmaName": "High Priority · High Priority Background" },
|
|
66
|
-
"mediumPriority": { "fg": "#f16c24", "bg": "#ffe5d8", "figmaName": "Medium Priority · Medium Priority Background" },
|
|
67
|
-
"brand": { "fg": "#0a1323", "bg": "#d0d3fe", "figmaName": "Brand - DYBO · DYBO Brand Background" }
|
|
60
|
+
"dark": {
|
|
61
|
+
"background": "218 56% 9%",
|
|
62
|
+
"foreground": "244 20% 96%",
|
|
63
|
+
"card": "218 35% 13%",
|
|
64
|
+
"cardForeground": "244 20% 96%",
|
|
65
|
+
"popover": "218 15% 12%",
|
|
66
|
+
"popoverForeground": "244 20% 96%",
|
|
67
|
+
"primary": "244 20% 96%",
|
|
68
|
+
"primaryForeground": "218 56% 9%",
|
|
69
|
+
"secondary": "218 35% 13%",
|
|
70
|
+
"secondaryForeground": "244 20% 96%",
|
|
71
|
+
"muted": "210 15% 30%",
|
|
72
|
+
"mutedForeground": "244 20% 80%",
|
|
73
|
+
"accent": "216 31% 50%",
|
|
74
|
+
"accentForeground": "244 20% 96%",
|
|
75
|
+
"destructive": "0 78% 55%",
|
|
76
|
+
"destructiveForeground": "244 20% 96%",
|
|
77
|
+
"border": "210 15% 30%",
|
|
78
|
+
"input": "218 35% 13%",
|
|
79
|
+
"ring": "244 20% 96%",
|
|
80
|
+
"successBackground": "150 68% 26%",
|
|
81
|
+
"warningBackground": "30 100% 22%",
|
|
82
|
+
"errorBackground": "30 100% 22%",
|
|
83
|
+
"infoBackground": "216 31% 28%",
|
|
84
|
+
"tagAmberBackground": "37 64% 18%",
|
|
85
|
+
"tagAmberForeground": "34 100% 83%",
|
|
86
|
+
"tagPurpleBackground": "274 53% 22%",
|
|
87
|
+
"tagPurpleForeground": "269 100% 92%",
|
|
88
|
+
"tagRedBackground": "352 63% 18%",
|
|
89
|
+
"tagRedForeground": "354 100% 88%"
|
|
68
90
|
}
|
|
69
91
|
},
|
|
70
92
|
|
|
@@ -73,24 +95,10 @@
|
|
|
73
95
|
"weight": { "regular": 400, "medium": 500, "semibold": 600, "bold": 700 }
|
|
74
96
|
},
|
|
75
97
|
|
|
76
|
-
"typography": {
|
|
77
|
-
"mediumTitle": { "family": "Urbanist", "weight": 400, "size": 24, "lineHeight": 1.35, "letterSpacing": 1, "figmaName": "Medium Title" },
|
|
78
|
-
"subtitle": { "family": "Urbanist", "weight": 400, "size": 18, "lineHeight": 1.35, "letterSpacing": 1, "figmaName": "Subtitle" },
|
|
79
|
-
"bodyText": { "family": "Urbanist", "weight": 500, "size": 16, "lineHeight": 1.5, "letterSpacing": 0, "figmaName": "Body Text" },
|
|
80
|
-
"link": { "family": "Urbanist", "weight": 500, "size": 16, "lineHeight": 1.5, "letterSpacing": 1, "figmaName": "Link" },
|
|
81
|
-
"smallBodyText": { "family": "Urbanist", "weight": 500, "size": 14, "lineHeight": 1.15, "letterSpacing": 0, "figmaName": "Small Body Text" },
|
|
82
|
-
"smallLink": { "family": "Urbanist", "weight": 700, "size": 14, "lineHeight": 1.5, "letterSpacing": 0, "figmaName": "Small Link Stylized" },
|
|
83
|
-
"headingH6Semibold": { "family": "Urbanist", "weight": 600, "size": 14, "lineHeight": 1.5, "letterSpacing": 1, "figmaName": "Urbanist/Heading/H6/Semibold" },
|
|
84
|
-
"headingH6Regular": { "family": "Urbanist", "weight": 400, "size": 14, "lineHeight": 1.5, "letterSpacing": 1, "figmaName": "Urbanist/Heading/H6/Regular" },
|
|
85
|
-
"placeholder": { "family": "Urbanist", "weight": 400, "size": 14, "lineHeight": 1.7, "letterSpacing": 1, "figmaName": "Placeholder" },
|
|
86
|
-
"tinySemibold": { "family": "Urbanist", "weight": 600, "size": 12, "lineHeight": 1.5, "letterSpacing": 1, "figmaName": "Urbanist/Body/Tiny/Semibold" },
|
|
87
|
-
"uppercase": { "family": "Urbanist", "weight": 500, "size": 12, "lineHeight": 1.35, "letterSpacing": 1, "textTransform": "uppercase", "figmaName": "Uppercase Text" }
|
|
88
|
-
},
|
|
89
|
-
|
|
90
98
|
"space": {
|
|
91
|
-
"000": { "value": 0,
|
|
92
|
-
"050": { "value": 4,
|
|
93
|
-
"100": { "value": 8,
|
|
99
|
+
"000": { "value": 0, "figmaName": "spacing-0" },
|
|
100
|
+
"050": { "value": 4, "figmaName": "Spacing/Quarck · spacing-050" },
|
|
101
|
+
"100": { "value": 8, "figmaName": "Spacing/Nano · spacing-100" },
|
|
94
102
|
"150": { "value": 12, "figmaName": "Spacing/4XS · spacing-150" },
|
|
95
103
|
"200": { "value": 16, "figmaName": "Spacing/XXXS · spacing-200" },
|
|
96
104
|
"250": { "value": 20, "figmaName": "Spacing/XXS" },
|
|
@@ -98,88 +106,63 @@
|
|
|
98
106
|
},
|
|
99
107
|
|
|
100
108
|
"radius": {
|
|
101
|
-
"
|
|
102
|
-
"
|
|
103
|
-
"
|
|
104
|
-
"
|
|
109
|
+
"none": { "value": 0 },
|
|
110
|
+
"small": { "value": 12, "desc": "inputs, selects, cards" },
|
|
111
|
+
"alt": { "value": 16 },
|
|
112
|
+
"medium": { "value": 20, "desc": "default card radius, dropdown panels, pill buttons" },
|
|
113
|
+
"full": { "value": 999, "desc": "pills / circular" }
|
|
105
114
|
},
|
|
106
115
|
|
|
107
116
|
"opacity": {
|
|
108
|
-
"light":
|
|
109
|
-
"medium":
|
|
110
|
-
"intense": { "value": 0.64, "
|
|
111
|
-
"semiOpaque":
|
|
112
|
-
"semiTransparent": { "value": 0.08
|
|
117
|
+
"light": { "value": 0.16 },
|
|
118
|
+
"medium": { "value": 0.32, "desc": "coming-soon / unavailable elements" },
|
|
119
|
+
"intense": { "value": 0.64, "desc": "secondary text (principle: opacity, never a second color)" },
|
|
120
|
+
"semiOpaque": { "value": 0.40, "desc": "disabled controls" },
|
|
121
|
+
"semiTransparent": { "value": 0.08 }
|
|
122
|
+
},
|
|
123
|
+
|
|
124
|
+
"shadow": {
|
|
125
|
+
"level1": { "value": "0px 4px 8px #1419271f", "desc": "cards, sidebar pill" },
|
|
126
|
+
"level2": { "value": "0px 8px 28px #14192729", "desc": "modals, drawers" }
|
|
127
|
+
},
|
|
128
|
+
|
|
129
|
+
"priority": {
|
|
130
|
+
"$note": "Traffic-light family — hot, urgent-first. Never mixed with ticketStatus on the same pill.",
|
|
131
|
+
"urgent": { "bg": "355 95% 60% / 0.12", "fg": "355 74% 45%", "darkBg": "0 78% 55% / 0.22", "darkFg": "0 90% 78%" },
|
|
132
|
+
"high": { "bg": "30 100% 50% / 0.15", "fg": "30 100% 33%", "darkBg": "30 100% 45% / 0.22", "darkFg": "30 100% 72%" },
|
|
133
|
+
"medium": { "bg": "45 90% 50% / 0.20", "fg": "38 92% 32%", "darkBg": "45 90% 50% / 0.16", "darkFg": "45 92% 70%" },
|
|
134
|
+
"low": { "bg": "216 16% 65% / 0.24", "fg": "216 22% 40%", "darkBg": "216 20% 60% / 0.20", "darkFg": "216 25% 82%" },
|
|
135
|
+
"none": { "bg": "216 12% 78% / 0.35", "fg": "216 12% 46%", "darkBg": "216 12% 50% / 0.25", "darkFg": "216 15% 75%" }
|
|
136
|
+
},
|
|
137
|
+
|
|
138
|
+
"ticketStatus": {
|
|
139
|
+
"$note": "ChatWoot lifecycle naming — Open · Pending · Snoozed · Resolved. Cool/neutral family, separate from priority's warm family.",
|
|
140
|
+
"open": { "bg": "216 48% 90%", "fg": "216 55% 40%", "darkBg": "216 40% 26%", "darkFg": "216 60% 82%" },
|
|
141
|
+
"pending": { "bg": "266 55% 92%", "fg": "266 42% 47%", "darkBg": "266 32% 30%", "darkFg": "266 60% 85%" },
|
|
142
|
+
"snoozed": { "bg": "215 22% 87%", "fg": "215 18% 42%", "darkBg": "215 18% 30%", "darkFg": "215 25% 80%" },
|
|
143
|
+
"resolved": { "bg": "151 45% 89%", "fg": "150 60% 25%", "darkBg": "150 45% 22%", "darkFg": "150 60% 80%" }
|
|
144
|
+
},
|
|
145
|
+
|
|
146
|
+
"surface": {
|
|
147
|
+
"operatorPage": { "value": "0 0% 89.4%", "desc": "Operator screens background override (light only)" },
|
|
148
|
+
"cardHighOpacity": { "value": "rgba(240,241,244,0.92)", "desc": "Upload zones, dense panels" },
|
|
149
|
+
"cardHighOpacityDark": { "value": "rgba(18,26,45,0.92)", "desc": "Dark mode dense panel" },
|
|
150
|
+
"drawerBackdrop": { "value": "224 32% 12% / 0.3", "desc": "Drawer/sheet scrim, sourced from overlayScrim" }
|
|
151
|
+
},
|
|
152
|
+
|
|
153
|
+
"feedback": {
|
|
154
|
+
"$note": "Superseded in most cases by color.light/dark's success/warning/error/info — kept for anything still reading the old flat feedback.* shape.",
|
|
155
|
+
"successBackground": { "value": "151 45% 89%" },
|
|
156
|
+
"warningBackground": { "value": "30 100% 95%" },
|
|
157
|
+
"infoBackground": { "value": "216 31% 89%" }
|
|
113
158
|
},
|
|
114
159
|
|
|
115
160
|
"portal": {
|
|
116
|
-
"$
|
|
117
|
-
"surface": {
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
"drawerBackdrop": { "value": "rgba(10,15,25,0.3)", "desc": "Drawer/sheet scrim — ticket-management Debbie panel" }
|
|
122
|
-
},
|
|
123
|
-
"shadow": {
|
|
124
|
-
"level1": { "value": "0px 4px 8px #1419271f", "desc": "Cards, sidebar pill" },
|
|
125
|
-
"level2": { "value": "0px 8px 28px #14192729", "desc": "Modals, toasts" }
|
|
126
|
-
},
|
|
127
|
-
"feedback": {
|
|
128
|
-
"successLight": { "value": "#90eabd", "desc": "Portal success tint (lighter than semantic.success)" },
|
|
129
|
-
"successBackground": { "value": "#d6f0e3", "desc": "hsl(151 45% 89%)" },
|
|
130
|
-
"warningSolid": { "value": "#cc6600", "desc": "Portal warning/error — Figma Feedback/Error orange" },
|
|
131
|
-
"warningBackground": { "value": "#fff2e5", "desc": "hsl(30 100% 95%)" },
|
|
132
|
-
"destructiveBright": { "value": "#fa3848", "desc": "Portal destructive — bright red for UI actions" },
|
|
133
|
-
"infoBackground": { "value": "#d9e3f0", "desc": "hsl(216 31% 89%)" }
|
|
134
|
-
},
|
|
135
|
-
"priority": {
|
|
136
|
-
"urgent": { "bg": "rgba(250,56,72,0.12)", "fg": "#c81e2c", "darkBg": "rgba(230,57,57,0.22)", "darkFg": "#f9a0a0" },
|
|
137
|
-
"high": { "bg": "rgba(255,128,0,0.15)", "fg": "#a85400", "darkBg": "rgba(230,115,0,0.22)", "darkFg": "#ffb366" },
|
|
138
|
-
"medium": { "bg": "rgba(242,185,13,0.20)", "fg": "#9d6607", "darkBg": "rgba(242,185,13,0.16)", "darkFg": "#f5d56a" },
|
|
139
|
-
"low": { "bg": "rgba(151,163,180,0.24)","fg": "#50627c", "darkBg": "rgba(140,155,175,0.20)","darkFg": "#b8c4d4" },
|
|
140
|
-
"none": { "bg": "rgba(192,198,206,0.35)","fg": "#677283", "darkBg": "rgba(115,125,140,0.25)","darkFg": "#b0b8c4" }
|
|
141
|
-
},
|
|
142
|
-
"ticketStatus": {
|
|
143
|
-
"open": { "bg": "#d9e3f2", "fg": "#2e5b9e", "darkBg": "#2a3d52", "darkFg": "#a8c4e8" },
|
|
144
|
-
"pending": { "bg": "#e9dff6", "fg": "#7146aa", "darkBg": "#3d2f4d", "darkFg": "#d4b8f0" },
|
|
145
|
-
"snoozed": { "bg": "#d7dde5", "fg": "#58687e", "darkBg": "#3a424c", "darkFg": "#b8c4d4" },
|
|
146
|
-
"resolved": { "bg": "#d6f0e3", "fg": "#1a6640", "darkBg": "#1f4a32", "darkFg": "#a8e0c0" }
|
|
147
|
-
},
|
|
148
|
-
"hsl": {
|
|
149
|
-
"$note": "Shadcn-style HSL components for portal-tokens.css drop-in. Format: 'H S% L%' (no hsl() wrapper).",
|
|
150
|
-
"light": {
|
|
151
|
-
"background": "216 25% 92%", "foreground": "218 56% 9%",
|
|
152
|
-
"card": "214 41% 97%", "cardForeground": "218 56% 9%",
|
|
153
|
-
"popover": "0 0% 100%", "popoverForeground": "218 56% 9%",
|
|
154
|
-
"primary": "218 56% 9%", "primaryForeground": "0 0% 100%",
|
|
155
|
-
"secondary": "0 0% 100%", "secondaryForeground": "218 56% 9%",
|
|
156
|
-
"muted": "216 16% 88%", "mutedForeground": "216 31% 50%",
|
|
157
|
-
"accent": "219 52% 24%", "accentForeground": "214 41% 97%",
|
|
158
|
-
"destructive": "355 95% 60%", "destructiveForeground": "0 0% 100%",
|
|
159
|
-
"border": "0 0% 100%", "input": "240 14% 96%", "ring": "219 52% 24%",
|
|
160
|
-
"success": "150 68% 74%", "successForeground": "218 56% 9%", "successBackground": "151 45% 89%",
|
|
161
|
-
"warning": "30 100% 40%", "warningForeground": "218 56% 9%", "warningBackground": "30 100% 95%",
|
|
162
|
-
"error": "30 100% 40%", "errorForeground": "0 0% 100%", "errorBackground": "30 100% 95%",
|
|
163
|
-
"info": "216 31% 50%", "infoForeground": "218 56% 9%", "infoBackground": "216 31% 89%",
|
|
164
|
-
"brandDarkOrb": "224 32% 12%", "brandIndigo": "219 52% 24%", "brandBlueYonder": "216 31% 50%",
|
|
165
|
-
"brandGainsboro": "216 16% 88%", "brandCultured": "214 41% 97%", "brandDandelion": "54 81% 55%",
|
|
166
|
-
"brandBlack": "0 0% 0%", "brandWhite": "0 0% 100%",
|
|
167
|
-
"operatorBackground": "0 0% 89.4%"
|
|
168
|
-
},
|
|
169
|
-
"dark": {
|
|
170
|
-
"background": "218 56% 9%", "foreground": "244 20% 96%",
|
|
171
|
-
"card": "218 35% 13%", "cardForeground": "244 20% 96%",
|
|
172
|
-
"popover": "218 15% 12%", "popoverForeground": "244 20% 96%",
|
|
173
|
-
"primary": "244 20% 96%", "primaryForeground": "218 56% 9%",
|
|
174
|
-
"secondary": "218 35% 13%", "secondaryForeground": "244 20% 96%",
|
|
175
|
-
"muted": "210 15% 30%", "mutedForeground": "244 20% 80%",
|
|
176
|
-
"accent": "216 31% 50%", "accentForeground": "244 20% 96%",
|
|
177
|
-
"destructive": "0 78% 55%", "destructiveForeground": "244 20% 96%",
|
|
178
|
-
"border": "210 15% 30%", "input": "218 35% 13%", "ring": "244 20% 96%",
|
|
179
|
-
"successBackground": "150 68% 26%", "warningBackground": "30 100% 22%",
|
|
180
|
-
"errorBackground": "30 100% 22%", "infoBackground": "216 31% 28%"
|
|
181
|
-
}
|
|
182
|
-
}
|
|
161
|
+
"$deprecated": "Promoted to the package default in 2.0.0 — this whole namespace is now a compatibility alias of surface/shadow/feedback/priority/ticketStatus above. Will be removed in 3.0.",
|
|
162
|
+
"surface": { "operatorPage": { "value": "0 0% 89.4%" }, "cardHighOpacity": { "value": "rgba(240,241,244,0.92)" }, "cardHighOpacityDark": { "value": "rgba(18,26,45,0.92)" }, "drawerBackdrop": { "value": "224 32% 12% / 0.3" } },
|
|
163
|
+
"shadow": { "level1": { "value": "0px 4px 8px #1419271f" }, "level2": { "value": "0px 8px 28px #14192729" } },
|
|
164
|
+
"priority": { "urgent": { "bg": "355 95% 60% / 0.12", "fg": "355 74% 45%" }, "high": { "bg": "30 100% 50% / 0.15", "fg": "30 100% 33%" }, "medium": { "bg": "45 90% 50% / 0.20", "fg": "38 92% 32%" }, "low": { "bg": "216 16% 65% / 0.24", "fg": "216 22% 40%" }, "none": { "bg": "216 12% 78% / 0.35", "fg": "216 12% 46%" } },
|
|
165
|
+
"ticketStatus": { "open": { "bg": "216 48% 90%", "fg": "216 55% 40%" }, "pending": { "bg": "266 55% 92%", "fg": "266 42% 47%" }, "snoozed": { "bg": "215 22% 87%", "fg": "215 18% 42%" }, "resolved": { "bg": "151 45% 89%", "fg": "150 60% 25%" } }
|
|
183
166
|
},
|
|
184
167
|
|
|
185
168
|
"border": {
|
|
@@ -187,19 +170,96 @@
|
|
|
187
170
|
},
|
|
188
171
|
|
|
189
172
|
"effect": {
|
|
190
|
-
"glassBlur":
|
|
191
|
-
"dropShadow": { "value": "0 4px 4px rgba(10,19,35,0.10)", "figmaName": "Drop shadow", "desc": "offset (0,4), radius 4, color Shadow Effect" }
|
|
173
|
+
"glassBlur": { "value": 4, "figmaName": "Glass", "desc": "backdrop-filter blur radius (px)" }
|
|
192
174
|
},
|
|
193
175
|
|
|
194
|
-
"
|
|
195
|
-
"
|
|
196
|
-
"
|
|
197
|
-
"
|
|
176
|
+
"legacy": {
|
|
177
|
+
"$meta": {
|
|
178
|
+
"name": "DYBO Design System (legacy, pre-2.0)",
|
|
179
|
+
"source": "Figma — DYBO (file ZHtkvTEeTYlNVbSncLyI1a)",
|
|
180
|
+
"extractedFrom": "Operator screen + Local Components page (buttons, inputs, alert, tags)",
|
|
181
|
+
"extractedOn": "2026-07-23",
|
|
182
|
+
"status": "Frozen as of 2.0.0 — superseded by the root tokens above. Kept for anything still importing the old visual system via legacy-theme.css.",
|
|
183
|
+
"notes": "Values are real Figma variables with original names retained. Figma uses parallel naming for spacing/radius (t-shirt + numeric); normalized values below are authoritative. NOTE: Figma's 'Feedback Colors/Error' is an orange (#cc6600); the true red danger color is 'Brand/Danger/700' (#a21a17).",
|
|
184
|
+
"style": "Glassmorphism — translucent surfaces, backdrop blur, soft blue-gray shadows"
|
|
185
|
+
},
|
|
186
|
+
"color": {
|
|
187
|
+
"brand": {
|
|
188
|
+
"logo": { "value": "#1d335c", "figmaName": "Brand Colors/Logo" },
|
|
189
|
+
"blueYonder": { "value": "#5878a7", "figmaName": "Brand Colors/Blue Yonder" },
|
|
190
|
+
"darkOrb": { "value": "#141927", "figmaName": "Brand Colors/Dark Orb" },
|
|
191
|
+
"cultured": { "value": "#f3f6fa", "figmaName": "Brand Colors/Cultured" },
|
|
192
|
+
"gainsboro": { "value": "#dbdfe5", "figmaName": "Brand Colors/Gainsboro" },
|
|
193
|
+
"dandelion": { "value": "#e9d72f", "figmaName": "Brand Colors/Dandelion (portal)" }
|
|
194
|
+
},
|
|
195
|
+
"text": {
|
|
196
|
+
"primary": { "value": "#0a1323", "figmaName": "Primary Color / Title / Brand - DYBO" },
|
|
197
|
+
"secondary": { "value": "#f4f4f6", "figmaName": "Secondary Color" },
|
|
198
|
+
"muted": { "value": "#545f74", "figmaName": "Side bar Menu Unselected options" },
|
|
199
|
+
"gray": { "value": "#868686", "figmaName": "Brand/Primary/500" }
|
|
200
|
+
},
|
|
201
|
+
"neutral": {
|
|
202
|
+
"black": { "value": "#000000" },
|
|
203
|
+
"white": { "value": "#ffffff" },
|
|
204
|
+
"grayishBlue50": { "value": "#f4f4f6" },
|
|
205
|
+
"grayishBlue300": { "value": "#c2c7cf" },
|
|
206
|
+
"midnightSky300": { "value": "#e6e7f7" },
|
|
207
|
+
"midnightSky700": { "value": "#48495d" }
|
|
208
|
+
},
|
|
209
|
+
"surface": {
|
|
210
|
+
"page": { "value": "#e6eaf0" },
|
|
211
|
+
"card": { "value": "#f0f1f4b2", "rgba": "rgba(240,241,244,0.70)" },
|
|
212
|
+
"cardSolid": { "value": "#f0f1f4e5", "rgba": "rgba(240,241,244,0.90)" },
|
|
213
|
+
"input": { "value": "#f4f4f6b2", "rgba": "rgba(244,244,246,0.70)" }
|
|
214
|
+
},
|
|
215
|
+
"line": { "stroke": { "value": "#ffffff" } },
|
|
216
|
+
"shadow": {
|
|
217
|
+
"effect": { "value": "#0a13231a", "rgba": "rgba(10,19,35,0.10)" },
|
|
218
|
+
"ambient": { "value": "#aab4c0ba", "rgba": "rgba(170,180,192,0.73)" }
|
|
219
|
+
},
|
|
220
|
+
"semantic": {
|
|
221
|
+
"success": { "solid": "#20a156", "bright": "#28ca6b", "bg": "#eafbf1" },
|
|
222
|
+
"warning": { "solid": "#f16c24", "alt": "#cc6600", "bg": "#ffe5d8" },
|
|
223
|
+
"danger": { "solid": "#a21a17", "bg": "#fffbfb" },
|
|
224
|
+
"feedback": {
|
|
225
|
+
"successText": { "value": "#91eabe" },
|
|
226
|
+
"successBg": { "value": "#d7f0e4" },
|
|
227
|
+
"errorOrange": { "value": "#cc6600" },
|
|
228
|
+
"errorOrangeBg": { "value": "#fff2e5" }
|
|
229
|
+
}
|
|
230
|
+
},
|
|
231
|
+
"status": {
|
|
232
|
+
"resolved": { "fg": "#0399ae", "bg": "#d3f7fc" },
|
|
233
|
+
"highPriority": { "fg": "#682a5d", "bg": "#eee0ec" },
|
|
234
|
+
"mediumPriority": { "fg": "#f16c24", "bg": "#ffe5d8" },
|
|
235
|
+
"brand": { "fg": "#0a1323", "bg": "#d0d3fe" }
|
|
236
|
+
}
|
|
237
|
+
},
|
|
238
|
+
"typography": {
|
|
239
|
+
"mediumTitle": { "family": "Urbanist", "weight": 400, "size": 24, "lineHeight": 1.35, "letterSpacing": 1 },
|
|
240
|
+
"subtitle": { "family": "Urbanist", "weight": 400, "size": 18, "lineHeight": 1.35, "letterSpacing": 1 },
|
|
241
|
+
"bodyText": { "family": "Urbanist", "weight": 500, "size": 16, "lineHeight": 1.5, "letterSpacing": 0 },
|
|
242
|
+
"link": { "family": "Urbanist", "weight": 500, "size": 16, "lineHeight": 1.5, "letterSpacing": 1 },
|
|
243
|
+
"smallBodyText": { "family": "Urbanist", "weight": 500, "size": 14, "lineHeight": 1.15, "letterSpacing": 0 },
|
|
244
|
+
"smallLink": { "family": "Urbanist", "weight": 700, "size": 14, "lineHeight": 1.5, "letterSpacing": 0 },
|
|
245
|
+
"headingH6Semibold": { "family": "Urbanist", "weight": 600, "size": 14, "lineHeight": 1.5, "letterSpacing": 1 },
|
|
246
|
+
"headingH6Regular": { "family": "Urbanist", "weight": 400, "size": 14, "lineHeight": 1.5, "letterSpacing": 1 },
|
|
247
|
+
"placeholder": { "family": "Urbanist", "weight": 400, "size": 14, "lineHeight": 1.7, "letterSpacing": 1 },
|
|
248
|
+
"tinySemibold": { "family": "Urbanist", "weight": 600, "size": 12, "lineHeight": 1.5, "letterSpacing": 1 },
|
|
249
|
+
"uppercase": { "family": "Urbanist", "weight": 500, "size": 12, "lineHeight": 1.35, "letterSpacing": 1, "textTransform": "uppercase" }
|
|
250
|
+
},
|
|
251
|
+
"effect": {
|
|
252
|
+
"dropShadow": { "value": "0 4px 4px rgba(10,19,35,0.10)", "desc": "offset (0,4), radius 4, color Shadow Effect" }
|
|
198
253
|
},
|
|
199
|
-
"
|
|
200
|
-
"
|
|
201
|
-
|
|
202
|
-
|
|
254
|
+
"component": {
|
|
255
|
+
"button": {
|
|
256
|
+
"primary": { "bg": "#0a1323", "text": "#ffffff", "radius": 12, "paddingY": 12, "paddingX": 32 },
|
|
257
|
+
"secondary": { "bg": "#f4f4f6", "text": "#0a1323", "radius": 12, "paddingY": 12, "paddingX": 32 }
|
|
258
|
+
},
|
|
259
|
+
"input": {
|
|
260
|
+
"bg": "rgba(244,244,246,0.70)", "border": "1px solid #ffffff", "radius": 12,
|
|
261
|
+
"shadow": "0 4px 4px rgba(10,19,35,0.10)", "text": "#0a1323"
|
|
262
|
+
}
|
|
203
263
|
}
|
|
204
264
|
}
|
|
205
265
|
}
|