spoko-design-system 1.5.2 → 1.6.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [1.6.0](https://github.com/polo-blue/sds/compare/v1.5.3...v1.6.0) (2025-10-28)
+
+### Features
+
+* add accent.medium color ([#0082d6](https://github.com/polo-blue/sds/issues/0082d6)) to theme palette ([0cb1f3b](https://github.com/polo-blue/sds/commit/0cb1f3b095a745a4991e5062af5ee5d5679297c7)), closes [#0099da](https://github.com/polo-blue/sds/issues/0099da) [#0087c1](https://github.com/polo-blue/sds/issues/0087c1)
+
+## [1.5.3](https://github.com/polo-blue/sds/compare/v1.5.2...v1.5.3) (2025-10-28)
+
+### Bug Fixes
+
+* remove brackets from combined PR code display ([aabb786](https://github.com/polo-blue/sds/commit/aabb78618f994dadac50605b708455ffbb5f21e5))
+
 ## [1.5.2](https://github.com/polo-blue/sds/compare/v1.5.1...v1.5.2) (2025-10-28)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/ProductCodes.vue

@@ -69,20 +69,16 @@ const getVariantCategory = (code: string, fallback?: string): string | undefined
       />
       <span v-else class="inline-flex items-center gap-1">
         <template v-for="(code, idx) in prcode.code.split('+')" :key="idx">
-          <span v-if="idx > 0" class="text-sm opacity-75 font-bold">+</span>
-          <span class="inline-flex items-center">
-            <span class="opacity-75">[</span>
-            <PrCode
-              :prcode="{
-                code: code.trim(),
-                group: prcode.group,
-                description: null,
-                variant_category: getVariantCategory(code.trim(), prcode.variant_category)
-              }"
-              :isPdp="isPdp"
-            />
-            <span class="opacity-75">]</span>
-          </span>
+          <span v-if="idx > 0" class="text-sm opacity-75">+</span>
+          <PrCode
+            :prcode="{
+              code: code.trim(),
+              group: prcode.group,
+              description: null,
+              variant_category: getVariantCategory(code.trim(), prcode.variant_category)
+            }"
+            :isPdp="isPdp"
+          />
         </template>
       </span>
     </template>

package/src/pages/components/pr-code.mdx

@@ -198,7 +198,7 @@ When using data from the API, pass the `pr_codes` array directly:
 - ✅ **Dark Mode**: Supports dark mode with appropriate color adjustments
 - ✅ **Accessible**: Uses semantic HTML and proper ARIA attributes
 - ✅ **Search Friendly**: Includes `data-pagefind-filter` for search indexing
-- ✅ **Combination Support**: Handles combined PR codes like "1AT+1ZR" with format `[1AT]+[1ZR]`
+- ✅ **Combination Support**: Handles combined PR codes like "1AT+1ZR"
 - ✅ **Individual Colors**: Each code in a combination gets its own color based on variant category
 - ✅ **Defensive**: Gracefully handles invalid or malformed data
 
@@ -206,7 +206,7 @@ When using data from the API, pass the `pr_codes` array directly:
 
 - Hover over any PR code to see its full description
 - Colors are based on semantic variant categories, not hardcoded per code
-- Combined codes are displayed as `[CODE]+[CODE]` with each code colored independently
+- Combined codes are displayed as `CODE+CODE` with each code colored independently
 - The component uses a static mapping for variant categories to ensure consistent coloring
 - The tooltip design matches the ProductEngine component style
 - All 14,000+ PR codes in the database have English descriptions

package/uno-config/theme/colors.ts

@@ -21,6 +21,7 @@ export const colors = {
     // Secondary colors - accent palette
     accent: {
         light: '#0099da',
+        medium: '#0082d6',     // Medium accent blue
         default: '#0087c1',    // Default accent
         dark: '#006ea6',
         darker: '#00437a',