Skip to content

Commit dd30279

Browse files
IamLRBAIamLRBA
authored
Merge pull request #261 from IamLRBA/themes
feat(ui): implement theme switching and responsive layout
2 parents d048671 + 633561e commit dd30279

19 files changed

Lines changed: 4906 additions & 2304 deletions

‎packages/tokens/src/tokens/base/borders.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"md": { "value": "8px" },
77
"lg": { "value": "12px" },
88
"xl": { "value": "16px" },
9+
"2xl": { "value": "20px" },
910
"full": { "value": "9999px" }
1011
},
1112
"width": {

‎packages/tokens/src/tokens/base/colors-alpha.json‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
{
2+
"color": {
3+
"brand": {
4+
"primary": {
5+
"alpha": {
6+
"3": { "value": "rgba(79, 127, 78, 0.03)" },
7+
"5": { "value": "rgba(79, 127, 78, 0.05)" },
8+
"6": { "value": "rgba(79, 127, 78, 0.06)" },
9+
"8": { "value": "rgba(79, 127, 78, 0.08)" },
10+
"13": { "value": "rgba(79, 127, 78, 0.13)" },
11+
"16": { "value": "rgba(79, 127, 78, 0.16)" },
12+
"18": { "value": "rgba(79, 127, 78, 0.18)" },
13+
"10": { "value": "rgba(79, 127, 78, 0.1)" },
14+
"15": { "value": "rgba(79, 127, 78, 0.15)" },
15+
"20": { "value": "rgba(79, 127, 78, 0.2)" },
16+
"25": { "value": "rgba(79, 127, 78, 0.25)" },
17+
"30": { "value": "rgba(79, 127, 78, 0.3)" },
18+
"35": { "value": "rgba(79, 127, 78, 0.35)" },
19+
"40": { "value": "rgba(79, 127, 78, 0.4)" },
20+
"50": { "value": "rgba(79, 127, 78, 0.5)" },
21+
"60": { "value": "rgba(79, 127, 78, 0.6)" },
22+
"70": { "value": "rgba(79, 127, 78, 0.7)" },
23+
"80": { "value": "rgba(79, 127, 78, 0.8)" }
24+
}
25+
},
26+
"secondary": {
27+
"alpha": {
28+
"20": { "value": "rgba(233, 184, 91, 0.2)" },
29+
"30": { "value": "rgba(233, 184, 91, 0.3)" },
30+
"40": { "value": "rgba(233, 184, 91, 0.4)" }
31+
}
32+
}
33+
},
34+
"neutral": {
35+
"white": {
36+
"alpha": {
37+
"2": { "value": "rgba(255, 255, 255, 0.02)" },
38+
"3": { "value": "rgba(255, 255, 255, 0.03)" },
39+
"5": { "value": "rgba(255, 255, 255, 0.05)" },
40+
"10": { "value": "rgba(255, 255, 255, 0.1)" },
41+
"15": { "value": "rgba(255, 255, 255, 0.15)" },
42+
"20": { "value": "rgba(255, 255, 255, 0.2)" },
43+
"25": { "value": "rgba(255, 255, 255, 0.25)" },
44+
"30": { "value": "rgba(255, 255, 255, 0.3)" },
45+
"40": { "value": "rgba(255, 255, 255, 0.4)" },
46+
"50": { "value": "rgba(255, 255, 255, 0.5)" },
47+
"60": { "value": "rgba(255, 255, 255, 0.6)" },
48+
"70": { "value": "rgba(255, 255, 255, 0.7)" },
49+
"80": { "value": "rgba(255, 255, 255, 0.8)" },
50+
"90": { "value": "rgba(255, 255, 255, 0.9)" }
51+
}
52+
},
53+
"black": {
54+
"alpha": {
55+
"3": { "value": "rgba(0, 0, 0, 0.03)" },
56+
"4": { "value": "rgba(0, 0, 0, 0.04)" },
57+
"5": { "value": "rgba(0, 0, 0, 0.05)" },
58+
"25": { "value": "rgba(0, 0, 0, 0.25)" },
59+
"8": { "value": "rgba(0, 0, 0, 0.08)" },
60+
"10": { "value": "rgba(0, 0, 0, 0.1)" },
61+
"12": { "value": "rgba(0, 0, 0, 0.12)" },
62+
"15": { "value": "rgba(0, 0, 0, 0.15)" },
63+
"18": { "value": "rgba(0, 0, 0, 0.18)" },
64+
"20": { "value": "rgba(0, 0, 0, 0.2)" },
65+
"25": { "value": "rgba(0, 0, 0, 0.25)" },
66+
"30": { "value": "rgba(0, 0, 0, 0.3)" },
67+
"40": { "value": "rgba(0, 0, 0, 0.4)" },
68+
"80": { "value": "rgba(0, 0, 0, 0.8)" },
69+
"95": { "value": "rgba(0, 0, 0, 0.95)" }
70+
}
71+
},
72+
"900": {
73+
"alpha": {
74+
"50": { "value": "rgba(33, 33, 33, 0.5)" },
75+
"80": { "value": "rgba(33, 33, 33, 0.8)" },
76+
"85": { "value": "rgba(33, 33, 33, 0.85)" },
77+
"95": { "value": "rgba(33, 33, 33, 0.95)" },
78+
"98": { "value": "rgba(33, 33, 33, 0.98)" }
79+
}
80+
},
81+
"50": {
82+
"alpha": {
83+
"15": { "value": "rgba(250, 250, 250, 0.15)" }
84+
}
85+
}
86+
},
87+
"semantic": {
88+
"error": {
89+
"alpha": {
90+
"15": { "value": "rgba(244, 67, 54, 0.15)" },
91+
"20": { "value": "rgba(244, 67, 54, 0.2)" },
92+
"30": { "value": "rgba(244, 67, 54, 0.3)" }
93+
}
94+
},
95+
"success": {
96+
"alpha": {
97+
"15": { "value": "rgba(52, 199, 89, 0.15)" },
98+
"20": { "value": "rgba(52, 199, 89, 0.2)" },
99+
"30": { "value": "rgba(52, 199, 89, 0.3)" }
100+
}
101+
},
102+
"info": {
103+
"alpha": {
104+
"20": { "value": "rgba(33, 150, 243, 0.2)" }
105+
}
106+
}
107+
}
108+
}
109+
}

‎packages/tokens/src/tokens/base/filter.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"filter": {
3+
"blur": {
4+
"2": { "value": "2px" },
5+
"4": { "value": "4px" },
6+
"7": { "value": "7px" },
7+
"10": { "value": "10px" },
8+
"20": { "value": "20px" },
9+
"40": { "value": "40px" },
10+
"50": { "value": "50px" },
11+
"100": { "value": "100px" },
12+
"110": { "value": "110px" }
13+
},
14+
"drop-shadow": {
15+
"glow-sm": { "value": "0 0 12px var(--color-brand-primary-alpha-40)" },
16+
"glow-md": { "value": "0 0 16px var(--color-brand-primary-alpha-60)" },
17+
"glow-lg": { "value": "0 0 20px var(--color-brand-primary-alpha-60)" },
18+
"glow-10": { "value": "0 0 10px var(--color-brand-primary-alpha-50)" },
19+
"brand-sm": { "value": "0 2px 8px var(--color-brand-primary-alpha-30)" },
20+
"brand-md": { "value": "0 4px 12px var(--color-brand-primary-alpha-30)" },
21+
"secondary-md": { "value": "0 4px 12px var(--color-brand-secondary-alpha-40)" }
22+
}
23+
}
24+
}

‎packages/tokens/src/tokens/base/opacity.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
{
22
"opacity": {
33
"0": { "value": "0" },
4+
"2": { "value": "0.02" },
5+
"3": { "value": "0.03" },
6+
"5": { "value": "0.05" },
7+
"6": { "value": "0.06" },
8+
"8": { "value": "0.08" },
49
"10": { "value": "0.1" },
10+
"15": { "value": "0.15" },
511
"20": { "value": "0.2" },
12+
"25": { "value": "0.25" },
613
"30": { "value": "0.3" },
14+
"35": { "value": "0.35" },
715
"40": { "value": "0.4" },
816
"50": { "value": "0.5" },
917
"60": { "value": "0.6" },
1018
"70": { "value": "0.7" },
1119
"80": { "value": "0.8" },
1220
"90": { "value": "0.9" },
21+
"95": { "value": "0.95" },
22+
"98": { "value": "0.98" },
1323
"100": { "value": "1" }
1424
}
1525
}

‎packages/tokens/src/tokens/base/shadows.json‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,25 @@
66
"md": { "value": "0 4px 6px -1px rgba(0,0,0,0.1)" },
77
"lg": { "value": "0 10px 15px -3px rgba(0,0,0,0.1)" },
88
"xl": { "value": "0 20px 25px -5px rgba(0,0,0,0.1)" },
9-
"2xl": { "value": "0 25px 50px -12px rgba(0,0,0,0.25)" }
9+
"2xl": { "value": "0 25px 50px -12px rgba(0,0,0,0.25)" },
10+
"portal": {
11+
"sm": { "value": "0 2px 8px rgba(0,0,0,0.2)" },
12+
"md": { "value": "0 4px 16px rgba(0,0,0,0.3)" },
13+
"lg": { "value": "0 8px 32px rgba(0,0,0,0.4)" },
14+
"xs": { "value": "0 2px 8px var(--color-neutral-black-alpha-20)" },
15+
"focus-ring": { "value": "0 0 0 3px var(--color-brand-primary-alpha-20)" },
16+
"header-scrolled": { "value": "0 4px 24px var(--color-neutral-black-alpha-15), inset 0 1px 0 var(--color-neutral-black-alpha-5)" },
17+
"card": { "value": "0 8px 32px var(--color-neutral-black-alpha-40), inset 0 1px 0 var(--color-neutral-white-alpha-5)" },
18+
"card-light": { "value": "0 8px 32px var(--color-neutral-black-alpha-10), inset 0 1px 0 var(--color-neutral-white-alpha-5)" },
19+
"lg-light": { "value": "0 8px 32px var(--color-neutral-black-alpha-10)" },
20+
"modal": { "value": "0 12px 40px var(--color-neutral-black-alpha-40), 0 0 0 1px var(--color-brand-primary-alpha-30), inset 0 1px 0 var(--color-neutral-white-alpha-10)" },
21+
"modal-light": { "value": "0 12px 40px var(--color-neutral-black-alpha-20), 0 0 0 1px var(--color-brand-primary-alpha-50), inset 0 1px 0 var(--color-neutral-black-alpha-5)" },
22+
"dropdown": { "value": "0 2px 8px var(--color-neutral-black-alpha-8)" },
23+
"dropdown-light": { "value": "0 2px 8px var(--color-neutral-black-alpha-8), inset 0 1px 0 var(--color-neutral-black-alpha-3)" },
24+
"role-error": { "value": "0 2px 12px var(--color-semantic-error-alpha-30)" },
25+
"role-success": { "value": "0 2px 12px var(--color-semantic-success-alpha-30)" },
26+
"role-info": { "value": "0 2px 12px var(--color-semantic-info-alpha-20)" }
27+
}
1028
}
1129
}
1230

‎packages/tokens/src/tokens/base/spacing.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"2": { "value": "8px" },
66
"3": { "value": "12px" },
77
"4": { "value": "16px" },
8+
"5": { "value": "20px" },
89
"6": { "value": "24px" },
910
"8": { "value": "32px" },
1011
"10": { "value": "40px" },

‎packages/tokens/src/tokens/semantic/colors.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,43 @@
2020
"50": { "value": "#EFF6FF" },
2121
"500": { "value": "#2196F3" },
2222
"600": { "value": "#2563EB" }
23+
},
24+
"theme": {
25+
"background": {
26+
"base": { "value": "#212121" },
27+
"elevated": { "value": "#2A2A2A" },
28+
"overlay": { "value": "#1A1A1A" },
29+
"card": { "value": "rgba(255, 255, 255, 0.05)" }
30+
},
31+
"text": {
32+
"primary": { "value": "rgba(255, 255, 255, 0.9)" },
33+
"secondary": { "value": "rgba(255, 255, 255, 0.6)" },
34+
"tertiary": { "value": "rgba(255, 255, 255, 0.4)" },
35+
"disabled": { "value": "rgba(255, 255, 255, 0.3)" }
36+
},
37+
"border": {
38+
"default": { "value": "rgba(255, 255, 255, 0.1)" },
39+
"hover": { "value": "rgba(255, 255, 255, 0.2)" },
40+
"focus": { "value": "#4F7F4E" }
41+
}
42+
},
43+
"theme-light": {
44+
"background": {
45+
"base": { "value": "#FAFAFA" },
46+
"elevated": { "value": "#FFFFFF" },
47+
"overlay": { "value": "#F5F5F5" },
48+
"card": { "value": "rgba(0, 0, 0, 0.02)" }
49+
},
50+
"text": {
51+
"primary": { "value": "rgba(33, 33, 33, 0.9)" },
52+
"secondary": { "value": "rgba(33, 33, 33, 0.6)" },
53+
"tertiary": { "value": "rgba(33, 33, 33, 0.4)" },
54+
"disabled": { "value": "rgba(33, 33, 33, 0.3)" }
55+
},
56+
"border": {
57+
"default": { "value": "rgba(0, 0, 0, 0.08)" },
58+
"hover": { "value": "rgba(0, 0, 0, 0.12)" }
59+
}
2360
}
2461
}
2562
}

‎packages/tokens/src/tokens/semantic/ui.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"color": {
3+
"semantic": {
4+
"ui": {
5+
"scrollbar": {
6+
"track": { "value": "rgba(79, 127, 78, 0.1)" },
7+
"thumb": { "value": "rgba(79, 127, 78, 0.3)" },
8+
"thumb-hover": { "value": "rgba(79, 127, 78, 0.5)" }
9+
},
10+
"overlay": {
11+
"dark": { "value": "rgba(33, 33, 33, 0.5)" },
12+
"light": { "value": "rgba(250, 250, 250, 0.15)" }
13+
},
14+
"input": {
15+
"fill-dark": { "value": "rgba(21, 21, 21, 0.85)" }
16+
},
17+
"surface": {
18+
"dropdown-dark": { "value": "rgba(33, 33, 33, 0.95)" },
19+
"dropdown-light": { "value": "rgba(255, 255, 255, 0.95)" },
20+
"modal-dark": { "value": "rgba(33, 33, 33, 0.98)" }
21+
},
22+
"focus": {
23+
"ring-glow": { "value": "rgba(79, 127, 78, 0.2)" }
24+
}
25+
}
26+
}
27+
}
28+
}

‎packages/tokens/style-dictionary.config.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
const StyleDictionary = require('style-dictionary');
22

3-
// Custom header function - must return array of strings
4-
const customHeader = () => {
3+
// Custom header function - returns content lines only (format adds /** prefix footer */)
4+
const customHeader = (defaultMessages) => {
55
return [
6-
'/**',
7-
' * ODE Design Tokens',
8-
' *',
9-
' * This file is auto-generated by Style Dictionary.',
10-
' * Do not edit directly. Edit source files in src/tokens/ instead.',
11-
' *',
12-
` * Generated: ${new Date().toISOString()}`,
13-
' */',
14-
''
6+
'ODE Design Tokens',
7+
'',
8+
'This file is auto-generated by Style Dictionary.',
9+
'Do not edit directly. Edit source files in src/tokens/ instead.',
10+
'',
11+
`Generated: ${new Date().toISOString()}`
1512
];
1613
};
1714

‎synkronus-portal/src/App.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import { AuthProvider } from './contexts/AuthContext'
2+
import { ThemeProvider } from './contexts/ThemeContext'
23
import { ProtectedRoute } from './components/ProtectedRoute'
34
import { Dashboard } from './pages/Dashboard'
45
import './App.css'
56

67
function App() {
78
return (
8-
<AuthProvider>
9-
<ProtectedRoute>
10-
<Dashboard />
11-
</ProtectedRoute>
12-
</AuthProvider>
9+
<ThemeProvider>
10+
<AuthProvider>
11+
<ProtectedRoute>
12+
<Dashboard />
13+
</ProtectedRoute>
14+
</AuthProvider>
15+
</ThemeProvider>
1316
)
1417
}
1518

0 commit comments

Comments
 (0)