spoko-design-system 1.24.3 → 1.25.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 (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/MIGRATION-COLORS.md +110 -0
  3. package/package.json +1 -1
  4. package/src/components/FaqItem.astro +3 -3
  5. package/src/components/Headline.vue +4 -4
  6. package/src/styles/base/base.css +11 -40
  7. package/uno-config/theme/colors.ts +38 -35
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ ## [1.25.0](https://github.com/polo-blue/sds/compare/v1.24.3...v1.25.0) (2026-01-18)
2
+
3
+ ### ⚠ BREAKING CHANGES
4
+
5
+ * **colors:** Color values changed from HEX to OKLCH format. Projects using
6
+ raw color values from theme may need to update. CSS variable --clr-* removed.
7
+
8
+ 🤖 Generated with [Claude Code](https://claude.com/claude-code)
9
+
10
+ Co-Authored-By: Claude <noreply@anthropic.com>
11
+
12
+ ### Features
13
+
14
+ * **colors:** migrate color system from HEX to OKLCH ([d95551a](https://github.com/polo-blue/sds/commit/d95551a4f9124bace33885dbd7aef5cd82235111))
15
+
1
16
  ## [1.24.3](https://github.com/polo-blue/sds/compare/v1.24.2...v1.24.3) (2026-01-18)
2
17
 
3
18
  ### Bug Fixes
package/MIGRATION-COLORS.md ADDED
@@ -0,0 +1,110 @@
1
+ # Plan migracji kolorów z base.css do UnoCSS
2
+
3
+ ## Analiza obecnego stanu
4
+
5
+ ### Kolory w base.css (hex)
6
+ | Zmienna CSS | Wartość HEX | Status |
7
+ |-------------|-------------|--------|
8
+ | `--clr-primary-300` | `#3572e3` | NIEUŻYWANA |
9
+ | `--clr-primary-400` | `#009adb` | używana (scrollbar, swiper, Headline) |
10
+ | `--clr-primary-500` | `#0f3170` | używana (.bg-primary) |
11
+ | `--clr-secondary-300` | `#8936e2` | NIEUŻYWANA |
12
+ | `--clr-secondary-400` | `#6319b3` | NIEUŻYWANA |
13
+ | `--clr-secondary-500` | `#3e1070` | NIEUŻYWANA |
14
+ | `--clr-accent-200` | `#f7a1a4` | NIEUŻYWANA |
15
+ | `--clr-accent-300` | `#e6656a` | NIEUŻYWANA |
16
+ | `--clr-accent-400` | `#db242a` | NIEUŻYWANA |
17
+ | `--clr-accent-500` | `#9a191d` | NIEUŻYWANA |
18
+
19
+ ### Kolory w UnoCSS (uno-config/theme/colors.ts)
20
+ | Klucz | Wartość HEX |
21
+ |-------|-------------|
22
+ | `accent.light` | `#0099da` |
23
+ | `accent.default` | `#0087c1` |
24
+ | `blue.lightest` | `#3b82f6` |
25
+ | `blue.medium` | `#02307d` |
26
+ | `blue.darker` | `#001e50` |
27
+
28
+ ## Mapowanie kolorów
29
+
30
+ | base.css | → | UnoCSS | Różnica |
31
+ |----------|---|--------|---------|
32
+ | `--clr-primary-400` (#009adb) | → | `accent.light` (#0099da) | ~1% |
33
+ | `--clr-primary-500` (#0f3170) | → | `blue.medium` (#02307d) | ~10% |
34
+ | `--clr-primary-300` (#3572e3) | → | `blue.lightest` (#3b82f6) | ~5% |
35
+
36
+ **Wniosek:** `accent.light` jest prawie identyczny z `--clr-primary-400` - można użyć bez zmian wizualnych.
37
+
38
+ ## Błędy do naprawienia
39
+
40
+ `FaqItem.astro` używa niezdefiniowanych zmiennych:
41
+ - `--clr-primary-450` - nie istnieje!
42
+ - `--clr-primary-700` - nie istnieje!
43
+
44
+ ## Plan migracji
45
+
46
+ ### Krok 1: Naprawić FaqItem.astro
47
+ Zamienić niezdefiniowane zmienne na klasy UnoCSS:
48
+ - `color: var(--clr-primary-450)` → `class="text-accent-light"`
49
+ - `color: var(--clr-primary-700)` → `class="text-blue-medium"`
50
+
51
+ ### Krok 2: Zrefaktorować Headline.vue
52
+ Zamienić:
53
+ ```css
54
+ background-color: var(--headline-underline-accent, var(--clr-primary-400));
55
+ ```
56
+ Na CSS variable z UnoCSS lub klasę.
57
+
58
+ ### Krok 3: Przenieść style scrollbara do shortcuts
59
+ Stworzyć shortcut w UnoCSS zamiast CSS w base.css:
60
+ ```typescript
61
+ // uno-config/theme/shortcuts/base.ts
62
+ 'scrollbar-accent': 'scrollbar-thumb-accent-light scrollbar-track-black/10',
63
+ ```
64
+
65
+ ### Krok 4: Przenieść .bg-spoko, .bg-vw, .bg-primary do shortcuts
66
+ ```typescript
67
+ // uno-config/theme/shortcuts/layout.ts
68
+ 'bg-spoko': 'bg-gradient-radial from-accent-darker to-blue-darker text-white w-full',
69
+ 'bg-vw': 'bg-gradient-radial from-accent-darker to-blue-darker text-white',
70
+ 'bg-primary': 'bg-blue-medium',
71
+ ```
72
+
73
+ ### Krok 5: Wyczyścić base.css
74
+ Usunąć:
75
+ - Wszystkie `--clr-*` zmienne
76
+ - Wszystkie `--fs-*` zmienne (UnoCSS ma swoje)
77
+ - Klasy `.bg-spoko`, `.bg-vw`, `.bg-primary` (przeniesione do shortcuts)
78
+
79
+ Zostawić:
80
+ - Scrollbar styling (ale z klasami UnoCSS)
81
+ - Swiper variables
82
+ - Animacje `.fade-*`
83
+ - Font smoothing
84
+ - Print styles
85
+ - `.comma`, `.items` helper classes
86
+
87
+ ### Krok 6: Zaktualizować dokumentację
88
+ Poinformować użytkowników, że:
89
+ - Kolory są teraz w UnoCSS theme
90
+ - Można je nadpisać przez `createSdsConfig({ theme: { colors: {...} } })`
91
+ - `base.css` jest opcjonalny dla projektów nie używających scrollbara/swipera
92
+
93
+ ## Wynik końcowy
94
+
95
+ **Przed:**
96
+ - `base.css`: ~180 linii (z nieużywanymi kolorami)
97
+ - Konsumenci ładują wszystkie CSS variables
98
+
99
+ **Po:**
100
+ - `base.css`: ~60 linii (tylko niezbędne style)
101
+ - Konsumenci dostają tylko kolory których używają (tree-shaking UnoCSS)
102
+ - Możliwość łatwego nadpisania kolorów w `createSdsConfig()`
103
+
104
+ ## Zmiany w plikach
105
+
106
+ 1. `src/styles/base/base.css` - wyczyścić
107
+ 2. `src/components/FaqItem.astro` - użyć klas UnoCSS
108
+ 3. `src/components/Headline.vue` - użyć klas UnoCSS
109
+ 4. `uno-config/theme/shortcuts/layout.ts` - dodać bg-spoko, bg-vw
110
+ 5. `uno-config/theme/colors.ts` - bez zmian (kolory już są)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spoko-design-system",
3
- "version": "1.24.3",
3
+ "version": "1.25.0",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "main": "./index.ts",
package/src/components/FaqItem.astro CHANGED
@@ -37,7 +37,7 @@ const { data } = Astro.props;
37
37
  <style is:global>
38
38
  .faq-details {
39
39
  &[open] h2 {
40
- color: var(--clr-primary-450);
40
+ @apply text-accent-light;
41
41
  }
42
42
 
43
43
  ul,
@@ -58,10 +58,10 @@ const { data } = Astro.props;
58
58
  }
59
59
 
60
60
  h2 {
61
- color: var(--clr-primary-700);
61
+ @apply text-blue-medium;
62
62
 
63
63
  &:hover {
64
- color: var(--clr-primary-450);
64
+ @apply text-accent-light;
65
65
  }
66
66
  }
67
67
 
package/src/components/Headline.vue CHANGED
@@ -97,14 +97,14 @@ const computedClasses = computed(() => {
97
97
  @apply content-empty absolute left-0 bottom-0;
98
98
  height: 3px;
99
99
  width: 55px;
100
- background-color: var(--headline-underline-accent, var(--clr-primary-400));
100
+ background-color: var(--headline-underline-accent, oklch(65% 0.143 238));
101
101
  }
102
102
 
103
103
  &:before {
104
104
  @apply content-empty absolute left-0 bottom-px h-px;
105
105
  width: 95%;
106
106
  max-width: 255px;
107
- background-color: var(--headline-underline-base, #64748b);
107
+ background-color: var(--headline-underline-base, oklch(55% 0.041 257));
108
108
  }
109
109
  }
110
110
 
@@ -115,7 +115,7 @@ const computedClasses = computed(() => {
115
115
  @apply content-empty absolute left-1/2 bottom-px h-px;
116
116
  width: 95%;
117
117
  max-width: 255px;
118
- background-color: var(--headline-underline-base, #64748b);
118
+ background-color: var(--headline-underline-base, oklch(55% 0.041 257));
119
119
  transform: translateX(-50%);
120
120
  }
121
121
 
@@ -123,7 +123,7 @@ const computedClasses = computed(() => {
123
123
  @apply content-empty absolute bottom-0;
124
124
  height: 3px;
125
125
  width: 55px;
126
- background-color: var(--headline-underline-accent, var(--clr-primary-400));
126
+ background-color: var(--headline-underline-accent, oklch(65% 0.143 238));
127
127
  left: calc(50% - min(47.5%, 127.5px));
128
128
  }
129
129
  }
package/src/styles/base/base.css CHANGED
@@ -1,39 +1,10 @@
1
1
  :root {
2
2
  --color-scheme: light;
3
3
 
4
- --clr-primary-400: hsl(198, 100%, 43%); /* {$blue}; */
5
- --secondary: #64748b;
6
- --tertiary: #001e50;
7
-
8
4
  --font-family: 'vw_textregular', 'system-ui', 'ui-sans-serif', sans-serif;
9
5
 
10
- /* variables for future changes: */
11
-
12
- /* font sies */
13
- --fs-300: clamp(0.94rem, calc(0.92rem + 0.08vw), 0.98rem);
14
- --fs-400: clamp(1.13rem, calc(1.06rem + 0.33vw), 1.31rem);
15
- --fs-500: clamp(1.35rem, calc(1.21rem + 0.69vw), 1.75rem);
16
- --fs-600: clamp(1.62rem, calc(1.37rem + 1.24vw), 2.33rem);
17
- --fs-700: clamp(1.94rem, calc(1.54rem + 2.03vw), 3.11rem);
18
- --fs-800: clamp(2.33rem, calc(1.7rem + 3.15vw), 4.14rem);
19
- --fs-900: clamp(2.8rem, calc(1.85rem + 4.74vw), 5.52rem);
20
-
21
- /* colors */
22
- --clr-primary-300: rgb(53, 114, 227);
23
- --clr-primary-400: hsl(198, 100%, 43%);
24
- --clr-primary-500: hsl(219, 76%, 25%);
25
- --clr-secondary-300: hsl(269, 75%, 55%);
26
- --clr-secondary-400: hsl(269, 75%, 40%);
27
- --clr-secondary-500: hsl(269, 75%, 25%);
28
- --clr-accent-200: hsl(358, 85%, 80%);
29
- --clr-accent-300: hsl(358, 72%, 65%);
30
- --clr-accent-400: hsl(358, 72%, 50%);
31
- --clr-accent-500: hsl(358, 72%, 35%);
32
-
33
6
  /* Swiper styles */
34
- /* // --swiper-navigation-color: #0099da; */
35
7
  --swiper-navigation-size: 22px;
36
- --swiper-scrollbar-drag-bg-color: var(--clr-primary-400);
37
8
  --swiper-scrollbar-size: 1px;
38
9
  --swiper-scrollbar-bottom: 0px;
39
10
  }
@@ -49,8 +20,8 @@ body {
49
20
  overflow-x: hidden;
50
21
  }
51
22
 
52
- /*
53
- Chrome 121 added support for scrollbar-width and scrollbar-color.
23
+ /*
24
+ Chrome 121 added support for scrollbar-width and scrollbar-color.
54
25
  If you have scrollbar-width it will disable the --webkit-scrollbar pseudo elements.
55
26
  https://developer.chrome.com/blog/new-in-chrome-121
56
27
  https://developer.chrome.com/docs/css-ui/scrollbar-styling
@@ -62,20 +33,20 @@ body {
62
33
  }
63
34
 
64
35
  ::-webkit-scrollbar-track {
65
- background: rgba(0, 0, 0, 0.1);
36
+ @apply bg-black/10;
66
37
  border-radius: 0;
67
38
  }
68
39
 
69
40
  ::-webkit-scrollbar-thumb {
70
41
  border-radius: 0;
71
- background-color: var(--clr-primary-400);
42
+ @apply bg-accent-light;
72
43
  }
73
44
 
74
45
  /* Fallback to browsers without webkit-scrollbar support */
75
46
  @supports not selector(::-webkit-scrollbar) {
76
47
  * {
77
48
  scrollbar-width: thin;
78
- scrollbar-color: var(--clr-primary-400) rgba(0, 0, 0, 0.1);
49
+ scrollbar-color: oklch(65% 0.143 238) oklch(0% 0 0 / 0.1);
79
50
  }
80
51
  }
81
52
 
@@ -83,19 +54,19 @@ body {
83
54
  outline: none !important;
84
55
  }
85
56
 
57
+ /* Background gradients - keep in CSS (radial-gradient not supported in UnoCSS shortcuts) */
86
58
  .bg-spoko {
87
- background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
88
- color: #fff;
89
- width: 100%;
59
+ background: radial-gradient(circle at 50% 85%, oklch(38% 0.111 251) 0%, oklch(25% 0.099 259) 100%);
60
+ @apply text-white w-full;
90
61
  }
91
62
 
92
63
  .bg-vw {
93
- background: radial-gradient(circle at 50% 85%, #00437a 0%, #001e50 100%);
94
- color: #fff;
64
+ background: radial-gradient(circle at 50% 85%, oklch(38% 0.111 251) 0%, oklch(25% 0.099 259) 100%);
65
+ @apply text-white;
95
66
  }
96
67
 
97
68
  .bg-primary {
98
- background: var(--clr-primary-500);
69
+ @apply bg-blue-medium;
99
70
  }
100
71
 
101
72
  .display-3 {
package/uno-config/theme/colors.ts CHANGED
@@ -1,66 +1,69 @@
1
1
  // theme/colors.ts
2
+ // OKLCH color format for perceptual uniformity and better palette generation
3
+ // L = Lightness (0-100%), C = Chroma (0-0.4), H = Hue (0-360)
4
+
2
5
  export const colors = {
3
6
  // Brand colors - core identity colors
4
7
  brand: {
5
- primary: '#0040c5', // Main brand color
6
- secondary: '#00b0f0', // Supporting brand color
8
+ primary: 'oklch(44% 0.213 263)', // #0040c5 - Main brand color
9
+ secondary: 'oklch(71% 0.149 234)', // #00b0f0 - Supporting brand color
7
10
  },
8
11
 
9
12
  // Primary blues - main blue palette
10
13
  blue: {
11
- ultralight: '#dbeafe',
12
- lightest: '#3b82f6', // Lightest shade
13
- light: '#0069ff',
14
- default: '#005ad7', // Default/base blue
15
- medium: '#02307d',
16
- darker: '#001e50',
17
- darkest: '#000f28', // Darkest shade
18
- wrc: '#0000c8', // Special WRC color
14
+ ultralight: 'oklch(93% 0.032 256)', // #dbeafe
15
+ lightest: 'oklch(62% 0.188 260)', // #3b82f6
16
+ light: 'oklch(57% 0.237 260)', // #0069ff
17
+ default: 'oklch(51% 0.206 260)', // #005ad7
18
+ medium: 'oklch(34% 0.139 261)', // #02307d
19
+ darker: 'oklch(25% 0.099 259)', // #001e50
20
+ darkest: 'oklch(17% 0.058 256)', // #000f28
21
+ wrc: 'oklch(38% 0.261 264)', // #0000c8 - Special WRC color
19
22
  },
20
23
 
21
- // Secondary colors - accent palette
24
+ // Secondary colors - accent palette (cyan-blue tones)
22
25
  accent: {
23
- light: '#0099da',
24
- medium: '#0082d6', // Medium accent blue
25
- default: '#0087c1', // Default accent
26
- dark: '#006ea6',
27
- darker: '#00437a',
28
- deepBlue: '#0c1a32',
26
+ light: 'oklch(65% 0.143 238)', // #0099da
27
+ medium: 'oklch(59% 0.158 248)', // #0082d6
28
+ default: 'oklch(59% 0.130 238)', // #0087c1
29
+ dark: 'oklch(51% 0.121 241)', // #006ea6
30
+ darker: 'oklch(38% 0.111 251)', // #00437a
31
+ deepBlue: 'oklch(22% 0.051 261)', // #0c1a32
29
32
  },
30
33
 
31
34
  // Neutral colors - grayscale
32
35
  neutral: {
33
- lightest: '#f3f4f6', // Lightest gray
34
- lighter: '#e5e7eb',
35
- light: '#b5bbc5',
36
- default: '#9ca3af', // Base gray
37
- dark: '#6a767d',
38
- darker: '#4b5563',
36
+ lightest: 'oklch(97% 0.003 265)', // #f3f4f6
37
+ lighter: 'oklch(93% 0.006 265)', // #e5e7eb
38
+ light: 'oklch(79% 0.016 261)', // #b5bbc5
39
+ default: 'oklch(71% 0.019 261)', // #9ca3af
40
+ dark: 'oklch(56% 0.018 233)', // #6a767d
41
+ darker: 'oklch(45% 0.026 257)', // #4b5563
39
42
  },
40
-
43
+
41
44
  // Slate colors - gray-blue palette
42
45
  slate: {
43
- light: '#64748B',
44
- default: '#475569',
45
- dark: '#334155',
46
- darkest: '#1e293b',
46
+ light: 'oklch(55% 0.041 257)', // #64748B
47
+ default: 'oklch(45% 0.037 257)', // #475569
48
+ dark: 'oklch(37% 0.039 257)', // #334155
49
+ darkest: 'oklch(28% 0.037 260)', // #1e293b
47
50
  },
48
51
 
49
52
  // System colors - functional colors
50
53
  system: {
51
- success: '#10B981', // Green - success state
52
- warning: '#FBBF24', // Yellow - warning state
53
- error: '#EF4444', // Red - error state
54
- info: '#3B82F6', // Blue - information state
54
+ success: 'oklch(70% 0.149 163)', // #10B981 - Green
55
+ warning: 'oklch(84% 0.164 84)', // #FBBF24 - Yellow
56
+ error: 'oklch(64% 0.208 25)', // #EF4444 - Red
57
+ info: 'oklch(62% 0.188 260)', // #3B82F6 - Blue
55
58
  },
56
59
 
57
60
  // States - interaction states
58
61
  state: {
59
- overlay: 'rgb(0 0 0 / 0.06)', // Overlay & Hover state
60
- disabled: 'rgb(0 0 0 / 0.12)', // Disabled state
62
+ overlay: 'oklch(0% 0 0 / 0.06)', // Overlay & Hover state
63
+ disabled: 'oklch(0% 0 0 / 0.12)', // Disabled state
61
64
  }
62
65
  };
63
66
 
64
67
  // Export types for TypeScript
65
68
  export type Colors = typeof colors;
66
- export type ColorShade = keyof typeof colors;
69
+ export type ColorShade = keyof typeof colors;