@baloise/ds-tokens 20.0.0-next.10 → 20.0.0-next.11

package/dist/css/base.override.css

@@ -1351,6 +1351,8 @@
   --ds-button-size-lg-padding-x: var(--ds-alias-space-padding-md);
   --ds-body-color: var(--ds-alias-text-color-primary);
   --ds-body-surface: var(--ds-alias-surface-white);
+  --ds-body-selection-color: var(--ds-alias-text-color-primary);
+  --ds-body-selection-surface: var(--ds-alias-surface-selected);
   --ds-card-shadow-flat: var(--ds-alias-shadow-box-none);
   --ds-card-shadow-base: var(--ds-alias-shadow-box-base);
   --ds-card-shadow-hover: var(--ds-alias-shadow-box-elevated);

package/dist/css/base.tokens.css

@@ -1352,6 +1352,8 @@
   --ds-button-size-lg-padding-x: var(--ds-alias-space-padding-md);
   --ds-body-color: var(--ds-alias-text-color-primary);
   --ds-body-surface: var(--ds-alias-surface-white);
+  --ds-body-selection-color: var(--ds-alias-text-color-primary);
+  --ds-body-selection-surface: var(--ds-alias-surface-selected);
   --ds-card-shadow-flat: var(--ds-alias-shadow-box-none);
   --ds-card-shadow-base: var(--ds-alias-shadow-box-base);
   --ds-card-shadow-hover: var(--ds-alias-shadow-box-elevated);

package/dist/css/{erv.override.css → orange-vacations.override.css}

@@ -2,7 +2,7 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-[data-theme="erv"], :host([data-theme="erv"]) {
+[data-theme="orange-vacations"], :host([data-theme="orange-vacations"]) {
   /* Global tokens */
   --ds-global-dimension-border-0: 0rem;
   --ds-global-dimension-border-1: 0.125rem;
@@ -1351,6 +1351,8 @@
   --ds-button-size-lg-padding-x: var(--ds-alias-space-padding-md);
   --ds-body-color: var(--ds-alias-text-color-primary);
   --ds-body-surface: var(--ds-alias-surface-white);
+  --ds-body-selection-color: var(--ds-alias-text-color-primary);
+  --ds-body-selection-surface: var(--ds-alias-surface-selected);
   --ds-card-shadow-flat: var(--ds-alias-shadow-box-none);
   --ds-card-shadow-base: var(--ds-alias-shadow-box-base);
   --ds-card-shadow-hover: var(--ds-alias-shadow-box-elevated);
@@ -2266,7 +2268,7 @@
 /* Device tokens: Tablet */
 
 @media (min-width: 769px) {
-[data-theme="erv"], :host([data-theme="erv"]) {
+[data-theme="orange-vacations"], :host([data-theme="orange-vacations"]) {
   /* Alias tokens */
   --ds-alias-breakpoint: var(--ds-global-dimension-breakpoint-1);
 
@@ -2309,7 +2311,7 @@
 /* Device tokens: Desktop */
 
 @media (min-width: 1024px) {
-[data-theme="erv"], :host([data-theme="erv"]) {
+[data-theme="orange-vacations"], :host([data-theme="orange-vacations"]) {
   /* Alias tokens */
   --ds-alias-breakpoint: var(--ds-global-dimension-breakpoint-2);
 

package/dist/css/{erv.tokens.css → orange-vacations.tokens.css}

@@ -1351,6 +1351,8 @@
   --ds-button-size-lg-padding-x: var(--ds-alias-space-padding-md);
   --ds-body-color: var(--ds-alias-text-color-primary);
   --ds-body-surface: var(--ds-alias-surface-white);
+  --ds-body-selection-color: var(--ds-alias-text-color-primary);
+  --ds-body-selection-surface: var(--ds-alias-surface-selected);
   --ds-card-shadow-flat: var(--ds-alias-shadow-box-none);
   --ds-card-shadow-base: var(--ds-alias-shadow-box-base);
   --ds-card-shadow-hover: var(--ds-alias-shadow-box-elevated);

package/dist/docs/base.tokens.json

@@ -32109,6 +32109,58 @@
           "Body",
           "Font"
         ]
+      },
+      "Selection": {
+        "Color": {
+          "key": "{🧩 Component.Body.Selection.Color}",
+          "$type": "color",
+          "$value": "#000d6e",
+          "filePath": "tokens/Base.tokens.json",
+          "isSource": true,
+          "original": {
+            "$type": "color",
+            "$value": "{🔗 Alias.🔤 Text.Color.Primary}",
+            "key": "{🧩 Component.Body.Selection.Color}"
+          },
+          "name": "ds-body-selection-color",
+          "attributes": {
+            "category": "🧩 Component",
+            "type": "Body",
+            "item": "Selection",
+            "subitem": "Color"
+          },
+          "path": [
+            "🧩 Component",
+            "Body",
+            "Selection",
+            "Color"
+          ]
+        },
+        "Surface": {
+          "key": "{🧩 Component.Body.Selection.Surface}",
+          "$type": "color",
+          "$value": "#cccfe2",
+          "filePath": "tokens/Base.tokens.json",
+          "isSource": true,
+          "original": {
+            "$type": "color",
+            "$value": "{🔗 Alias.🎨 Surface.Selected}",
+            "key": "{🧩 Component.Body.Selection.Surface}"
+          },
+          "name": "ds-body-selection-surface",
+          "attributes": {
+            "category": "🧩 Component",
+            "type": "Body",
+            "item": "Selection",
+            "subitem": "Surface"
+          },
+          "path": [
+            "🧩 Component",
+            "Body",
+            "Selection",
+            "Surface"
+          ]
+        }
       }
     },
     "Card": {

package/dist/js/base.tokens.js

@@ -822,6 +822,8 @@ export const DsComponentButtonSizeLgPaddingX = "1.5rem";
 export const DsComponentBodyColor = "#000d6e";
 export const DsComponentBodySurface = "#ffffff";
 export const DsComponentBodyFont = {"fontFamily":"\"BaloiseCreateText, Arial, sans-serif\"","fontSize":"1rem","fontWeight":"400","lineHeight":"1.5"};
+export const DsComponentBodySelectionColor = "#000d6e";
+export const DsComponentBodySelectionSurface = "#cccfe2";
 export const DsComponentCardShadowFlat = null;
 export const DsComponentCardShadowBase = null;
 export const DsComponentCardShadowHover = null;

package/dist/out-tsc/config.brand.js

@@ -45,8 +45,10 @@ export function mergeTokenTree(base, brand) {
  * was written to disk so Style Dictionary can read it as `source`.
  */
 export function createBrandConfig(mode) {
-    const brandLower = mode.toLowerCase();
-    const tmpFile = `tokens/.${brandLower}-full.tmp.json`;
+    // PascalCase brand name → kebab-case (e.g. "OrangeVacations" → "orange-vacations") for CSS
+    // output, export paths, and the `data-theme` attribute value.
+    const brandSlug = mode.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    const tmpFile = `tokens/.${brandSlug}-full.tmp.json`;
     const baseJson = JSON.parse(readFileSync(`tokens/Base.tokens.json`, 'utf8'));
     const brandJson = JSON.parse(readFileSync(`tokens/${mode}.tokens.json`, 'utf8'));
     const mergedTokens = mergeTokenTree(baseJson, brandJson);
@@ -62,7 +64,7 @@ export function createBrandConfig(mode) {
                 files: [
                     {
                         format: 'ds/css/variables-brand',
-                        destination: `css/${brandLower}.tokens.css`,
+                        destination: `css/${brandSlug}.tokens.css`,
                         options: {
                             selector: ':host, :root',
                             outputReferences: true,
@@ -70,9 +72,9 @@ export function createBrandConfig(mode) {
                     },
                     {
                         format: 'ds/css/variables-brand',
-                        destination: `css/${brandLower}.override.css`,
+                        destination: `css/${brandSlug}.override.css`,
                         options: {
-                            selector: `[data-theme="${brandLower}"], :host([data-theme="${brandLower}"])`,
+                            selector: `[data-theme="${brandSlug}"], :host([data-theme="${brandSlug}"])`,
                             outputReferences: true,
                         },
                     },

package/dist/out-tsc/index.js

@@ -17,7 +17,7 @@ import { createBrandConfig } from './config.brand.js';
 const StyleDictionaryBase = new StyleDictionary(ConfigBase);
 StyleDictionaryBase.buildAllPlatforms();
 // Brand builds — add new brand names here (must match tokens/<Name>.tokens.json)
-const brands = ['Tcs', 'ERV'];
+const brands = ['OrangeVacations'];
 for (const brand of brands) {
     const { config, cleanup } = createBrandConfig(brand);
     try {

package/dist/web/base.tokens.json

@@ -819,6 +819,8 @@
   "ds-body-color": "#000d6e",
   "ds-body-surface": "#ffffff",
   "ds-body-font": {"fontFamily":"\"BaloiseCreateText, Arial, sans-serif\"","fontSize":"1rem","fontWeight":"400","lineHeight":"1.5"},
+  "ds-body-selection-color": "#000d6e",
+  "ds-body-selection-surface": "#cccfe2",
   "ds-card-shadow-flat": null,
   "ds-card-shadow-base": null,
   "ds-card-shadow-hover": null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baloise/ds-tokens",
-  "version": "20.0.0-next.10",
+  "version": "20.0.0-next.11",
   "description": "The Helvetia Design System is an open source project for styling awesome web applications that follow the Helvetia corporate styling guidelines.",
   "repository": {
     "type": "git",
@@ -19,10 +19,8 @@
     "./dist/docs/base.tokens.json": "./dist/docs/base.tokens.json",
     "./css/base": "./dist/css/base.tokens.css",
     "./css/base-override": "./dist/css/base.override.css",
-    "./css/erv": "./dist/css/erv.tokens.css",
-    "./css/erv-override": "./dist/css/erv.override.css",
-    "./css/tcs": "./dist/css/tcs.tokens.css",
-    "./css/tcs-override": "./dist/css/tcs.override.css"
+    "./css/orange-vacations": "./dist/css/orange-vacations.tokens.css",
+    "./css/orange-vacations-override": "./dist/css/orange-vacations.override.css"
   },
   "devDependencies": {
     "eslint": "10.10.0",