@dybo-ai/design 1.1.0 → 1.3.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 (13) hide show
  1. package/CLAUDE.md +8 -5
  2. package/dist/index.cjs +216 -24
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +67 -1
  5. package/dist/index.d.ts +67 -1
  6. package/dist/index.js +210 -25
  7. package/dist/index.js.map +1 -1
  8. package/package.json +3 -1
  9. package/portal-tokens.css +182 -0
  10. package/theme.css +374 -0
  11. package/tokens.cjs +133 -8
  12. package/tokens.json +75 -2
  13. package/tokens.mjs +131 -7
package/tokens.mjs CHANGED
@@ -1,10 +1,34 @@
1
1
  // DYBO design tokens — flat, resolved values for programmatic use (JS/TS).
2
2
  // Source of truth: tokens.json. Keep in sync when tokens.json changes.
3
3
  export const color = {
4
- brand: { logo: "#1d335c", blue: "#5878a7", darkOrb: "#141927", cultured: "#f3f6fa", gainsboro: "#dbdfe5" },
5
- text: { primary: "#0a1323", secondary: "#f4f4f6", muted: "#545f74", gray: "#868686" },
6
- neutral: { black: "#000000", white: "#ffffff", grayishBlue50: "#f4f4f6", grayishBlue300: "#c2c7cf", midnightSky300: "#e6e7f7", midnightSky700: "#48495d" },
7
- surface: { page: "#e6eaf0", card: "rgba(240,241,244,0.70)", cardSolid: "rgba(240,241,244,0.90)", input: "rgba(244,244,246,0.70)" },
4
+ brand: {
5
+ logo: "#1d335c",
6
+ blue: "#5878a7",
7
+ darkOrb: "#141927",
8
+ cultured: "#f3f6fa",
9
+ gainsboro: "#dbdfe5",
10
+ dandelion: "#e9d72f",
11
+ },
12
+ text: {
13
+ primary: "#0a1323",
14
+ secondary: "#f4f4f6",
15
+ muted: "#545f74",
16
+ gray: "#868686",
17
+ },
18
+ neutral: {
19
+ black: "#000000",
20
+ white: "#ffffff",
21
+ grayishBlue50: "#f4f4f6",
22
+ grayishBlue300: "#c2c7cf",
23
+ midnightSky300: "#e6e7f7",
24
+ midnightSky700: "#48495d",
25
+ },
26
+ surface: {
27
+ page: "#e6eaf0",
28
+ card: "rgba(240,241,244,0.70)",
29
+ cardSolid: "rgba(240,241,244,0.90)",
30
+ input: "rgba(244,244,246,0.70)",
31
+ },
8
32
  line: { stroke: "#ffffff" },
9
33
  semantic: {
10
34
  success: { solid: "#20a156", bright: "#28ca6b", bg: "#eafbf1" },
@@ -19,7 +43,89 @@ export const color = {
19
43
  },
20
44
  };
21
45
 
22
- export const font = { family: "Urbanist, sans-serif", weight: { regular: 400, medium: 500, semibold: 600, bold: 700 } };
46
+ export const portal = {
47
+ surface: {
48
+ operatorPage: "#e4e4e4",
49
+ cardHighOpacity: "rgba(240,241,244,0.92)",
50
+ cardHighOpacityDark: "rgba(18,26,45,0.92)",
51
+ drawerBackdrop: "rgba(10,15,25,0.3)",
52
+ },
53
+ shadow: {
54
+ level1: "0px 4px 8px #1419271f",
55
+ level2: "0px 8px 28px #14192729",
56
+ },
57
+ feedback: {
58
+ successLight: "#90eabd",
59
+ successBackground: "#d6f0e3",
60
+ warningSolid: "#cc6600",
61
+ warningBackground: "#fff2e5",
62
+ destructiveBright: "#fa3848",
63
+ infoBackground: "#d9e3f0",
64
+ },
65
+ priority: {
66
+ urgent: {
67
+ bg: "rgba(250,56,72,0.12)",
68
+ fg: "#c81e2c",
69
+ darkBg: "rgba(230,57,57,0.22)",
70
+ darkFg: "#f9a0a0",
71
+ },
72
+ high: {
73
+ bg: "rgba(255,128,0,0.15)",
74
+ fg: "#a85400",
75
+ darkBg: "rgba(230,115,0,0.22)",
76
+ darkFg: "#ffb366",
77
+ },
78
+ medium: {
79
+ bg: "rgba(242,185,13,0.20)",
80
+ fg: "#9d6607",
81
+ darkBg: "rgba(242,185,13,0.16)",
82
+ darkFg: "#f5d56a",
83
+ },
84
+ low: {
85
+ bg: "rgba(151,163,180,0.24)",
86
+ fg: "#50627c",
87
+ darkBg: "rgba(140,155,175,0.20)",
88
+ darkFg: "#b8c4d4",
89
+ },
90
+ none: {
91
+ bg: "rgba(192,198,206,0.35)",
92
+ fg: "#677283",
93
+ darkBg: "rgba(115,125,140,0.25)",
94
+ darkFg: "#b0b8c4",
95
+ },
96
+ },
97
+ ticketStatus: {
98
+ open: {
99
+ bg: "#d9e3f2",
100
+ fg: "#2e5b9e",
101
+ darkBg: "#2a3d52",
102
+ darkFg: "#a8c4e8",
103
+ },
104
+ pending: {
105
+ bg: "#e9dff6",
106
+ fg: "#7146aa",
107
+ darkBg: "#3d2f4d",
108
+ darkFg: "#d4b8f0",
109
+ },
110
+ snoozed: {
111
+ bg: "#d7dde5",
112
+ fg: "#58687e",
113
+ darkBg: "#3a424c",
114
+ darkFg: "#b8c4d4",
115
+ },
116
+ resolved: {
117
+ bg: "#d6f0e3",
118
+ fg: "#1a6640",
119
+ darkBg: "#1f4a32",
120
+ darkFg: "#a8e0c0",
121
+ },
122
+ },
123
+ };
124
+
125
+ export const font = {
126
+ family: "Urbanist, sans-serif",
127
+ weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
128
+ };
23
129
 
24
130
  export const fontSize = { xs: 12, sm: 14, md: 16, lg: 18, xl: 24 };
25
131
 
@@ -27,14 +133,32 @@ export const space = { 0: 0, 50: 4, 100: 8, 150: 12, 200: 16, 250: 20, 400: 32 }
27
133
 
28
134
  export const radius = { small: 12, alt: 16, medium: 20, full: 999 };
29
135
 
30
- export const opacity = { light: 0.16, medium: 0.32, intense: 0.64 };
136
+ export const opacity = {
137
+ light: 0.16,
138
+ medium: 0.32,
139
+ intense: 0.64,
140
+ semiOpaque: 0.4,
141
+ semiTransparent: 0.08,
142
+ };
31
143
 
32
144
  export const shadow = {
33
145
  card: "0 8px 24px rgba(10,19,35,0.10), 0 2px 8px rgba(170,180,192,0.35)",
34
146
  drop: "0 4px 4px rgba(10,19,35,0.10)",
147
+ portalLevel1: "0px 4px 8px #1419271f",
148
+ portalLevel2: "0px 8px 28px #14192729",
35
149
  };
36
150
 
37
151
  export const effect = { glassBlur: 4 };
38
152
 
39
- export const tokens = { color, font, fontSize, space, radius, opacity, shadow, effect };
153
+ export const tokens = {
154
+ color,
155
+ portal,
156
+ font,
157
+ fontSize,
158
+ space,
159
+ radius,
160
+ opacity,
161
+ shadow,
162
+ effect,
163
+ };
40
164
  export default tokens;