@cds/core 6.0.0-next.1 → 6.0.0-next.2

package/tokens/tokens.ios.swift

@@ -1,17 +1,23 @@
 // This token format is currently experimental and may change in the future
-let globalLayoutSpaceXxs = CGFloat(2.00);
-let globalLayoutSpaceXs = CGFloat(4.00);
-let globalLayoutSpaceSm = CGFloat(6.00);
-let globalLayoutSpaceMd = CGFloat(12.00);
-let globalLayoutSpaceLg = CGFloat(24.00);
-let globalLayoutSpaceXl = CGFloat(48.00);
-let globalLayoutSpaceXxl = CGFloat(96.00);
+let globalBase = CGFloat(20.00);
+let globalScaleSpace = CGFloat(1.00);
+let globalScaleLayoutSpace = CGFloat(1.00);
+let globalScaleTypography = CGFloat(1.00);
 let globalLayoutGridCols = CGFloat(12.00);
 let globalLayoutWidthXs = "576px";
 let globalLayoutWidthSm = "768px";
 let globalLayoutWidthMd = "992px";
 let globalLayoutWidthLg = "1200px";
 let globalLayoutWidthXl = "1440px";
+let globalLayoutSpaceXxxs = CGFloat(2.00);
+let globalLayoutSpaceXxs = CGFloat(4.00);
+let globalLayoutSpaceXs = CGFloat(8.00);
+let globalLayoutSpaceSm = CGFloat(12.00);
+let globalLayoutSpaceMd = CGFloat(16.00);
+let globalLayoutSpaceLg = CGFloat(24.00);
+let globalLayoutSpaceXl = CGFloat(32.00);
+let globalLayoutSpaceXxl = CGFloat(48.00);
+let globalLayoutSpaceXxxl = CGFloat(64.00);
 let globalSpace0 = CGFloat(0.00);
 let globalSpace1 = CGFloat(1.00);
 let globalSpace2 = CGFloat(2.00);
@@ -25,7 +31,9 @@ let globalSpace9 = CGFloat(24.00);
 let globalSpace10 = CGFloat(32.00);
 let globalSpace11 = CGFloat(36.00);
 let globalSpace12 = CGFloat(48.00);
-let globalSpace13 = CGFloat(72.00);
+let globalSpace13 = CGFloat(64.00);
+let globalSpace14 = CGFloat(72.00);
+let globalSpace15 = CGFloat(96.00);
 let globalColorBlack = UIColor(red: 0, green: 0, blue: 0, alpha: 1.0);
 let globalColorWhite = UIColor(red: 255, green: 255, blue: 255, alpha: 1.0);
 let globalColorGreen50 = UIColor(red: 238, green: 252, blue: 227, alpha: 1.0);
@@ -138,6 +146,17 @@ let globalColorYellow700 = UIColor(red: 179, green: 119, blue: 0, alpha: 1.0);
 let globalColorYellow800 = UIColor(red: 133, green: 88, blue: 0, alpha: 1.0);
 let globalColorYellow900 = UIColor(red: 92, green: 61, blue: 0, alpha: 1.0);
 let globalColorYellow1000 = UIColor(red: 66, green: 44, blue: 0, alpha: 1.0);
+let globalColorLime50 = UIColor(red: 252, green: 255, blue: 224, alpha: 1.0);
+let globalColorLime100 = UIColor(red: 245, green: 253, blue: 170, alpha: 1.0);
+let globalColorLime200 = UIColor(red: 231, green: 244, blue: 113, alpha: 1.0);
+let globalColorLime300 = UIColor(red: 216, green: 234, blue: 62, alpha: 1.0);
+let globalColorLime400 = UIColor(red: 201, green: 220, blue: 24, alpha: 1.0);
+let globalColorLime500 = UIColor(red: 180, green: 199, blue: 10, alpha: 1.0);
+let globalColorLime600 = UIColor(red: 158, green: 174, blue: 9, alpha: 1.0);
+let globalColorLime700 = UIColor(red: 129, green: 143, blue: 0, alpha: 1.0);
+let globalColorLime800 = UIColor(red: 101, green: 112, blue: 0, alpha: 1.0);
+let globalColorLime900 = UIColor(red: 55, green: 61, blue: 0, alpha: 1.0);
+let globalColorLime1000 = UIColor(red: 32, green: 36, blue: 0, alpha: 1.0);
 let globalColorTangerine50 = UIColor(red: 255, green: 240, blue: 229, alpha: 1.0);
 let globalColorTangerine100 = UIColor(red: 255, green: 219, blue: 194, alpha: 1.0);
 let globalColorTangerine200 = UIColor(red: 252, green: 190, blue: 146, alpha: 1.0);
@@ -270,8 +289,6 @@ let globalTypographyFontSize6 = CGFloat(20.00);
 let globalTypographyFontSize7 = CGFloat(24.00);
 let globalTypographyFontSize8 = CGFloat(32.00);
 let globalTypographyFontSize9 = CGFloat(40.00);
-let globalTypographyBaseFontSize = "125%";
-let globalTypographyBaseFontSizePx = CGFloat(20.00);
 let globalTypographyFontFamily = "'Clarity City', 'Avenir Next', sans-serif";
 let globalTypographyHeaderFontFamily = "'Clarity City', 'Avenir Next', sans-serif";
 let globalTypographyMonospaceFontFamily = "ui-monospace, Consolas, Menlo, Monaco, monospace";
@@ -334,7 +351,6 @@ let globalAnimationDurationSlowest = "0.8s";
 let globalAnimationEasingPrimary = "cubic-bezier(0,.99,0,.99)";
 let globalAnimationEasingSecondary = "cubic-bezier(0, 1.5, 0.5, 1)";
 let globalAnimationEasingLoop = "cubic-bezier(0.17, 0.4, 0.8, 0.79)";
-let globalBase = CGFloat(20.00);
 let aliasObjectBorderRadius100 = CGFloat(4.00);
 let aliasObjectBorderRadius200 = CGFloat(12.00);
 let aliasObjectBorderRadius300 = "50%";
@@ -397,4 +413,7 @@ let aliasStatusDisabledTint = UIColor(red: 203, green: 212, blue: 216, alpha: 1.
 let aliasStatusDisabledShade = UIColor(red: 133, green: 147, blue: 153, alpha: 1.0);
 let aliasStatusAlt = UIColor(red: 124, green: 18, blue: 165, alpha: 1.0);
 let aliasStatusAltTint = UIColor(red: 155, green: 50, blue: 200, alpha: 1.0);
-let aliasStatusAltShade = UIColor(red: 68, green: 0, blue: 97, alpha: 1.0);
+let aliasStatusAltShade = UIColor(red: 68, green: 0, blue: 97, alpha: 1.0);
+let internalScale1 = "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space))";
+let internalScale2 = "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space))";
+let internalScale3 = "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography))";

package/tokens/tokens.js

@@ -1,4 +1,15 @@
 // This token format is currently experimental and may change in the future
+export const globalBase = 'var(--cds-global-base)';
+export const globalScaleSpace = 'var(--cds-global-scale-space)';
+export const globalScaleLayoutSpace = 'var(--cds-global-scale-layout-space)';
+export const globalScaleTypography = 'var(--cds-global-scale-typography)';
+export const globalLayoutGridCols = 'var(--cds-global-layout-grid-cols)';
+export const globalLayoutWidthXs = 'var(--cds-global-layout-width-xs)';
+export const globalLayoutWidthSm = 'var(--cds-global-layout-width-sm)';
+export const globalLayoutWidthMd = 'var(--cds-global-layout-width-md)';
+export const globalLayoutWidthLg = 'var(--cds-global-layout-width-lg)';
+export const globalLayoutWidthXl = 'var(--cds-global-layout-width-xl)';
+export const globalLayoutSpaceXxxs = 'var(--cds-global-layout-space-xxxs)';
 export const globalLayoutSpaceXxs = 'var(--cds-global-layout-space-xxs)';
 export const globalLayoutSpaceXs = 'var(--cds-global-layout-space-xs)';
 export const globalLayoutSpaceSm = 'var(--cds-global-layout-space-sm)';
@@ -6,12 +17,7 @@ export const globalLayoutSpaceMd = 'var(--cds-global-layout-space-md)';
 export const globalLayoutSpaceLg = 'var(--cds-global-layout-space-lg)';
 export const globalLayoutSpaceXl = 'var(--cds-global-layout-space-xl)';
 export const globalLayoutSpaceXxl = 'var(--cds-global-layout-space-xxl)';
-export const globalLayoutGridCols = 'var(--cds-global-layout-grid-cols)';
-export const globalLayoutWidthXs = 'var(--cds-global-layout-width-xs)';
-export const globalLayoutWidthSm = 'var(--cds-global-layout-width-sm)';
-export const globalLayoutWidthMd = 'var(--cds-global-layout-width-md)';
-export const globalLayoutWidthLg = 'var(--cds-global-layout-width-lg)';
-export const globalLayoutWidthXl = 'var(--cds-global-layout-width-xl)';
+export const globalLayoutSpaceXxxl = 'var(--cds-global-layout-space-xxxl)';
 export const globalSpace0 = 'var(--cds-global-space-0)';
 export const globalSpace1 = 'var(--cds-global-space-1)';
 export const globalSpace2 = 'var(--cds-global-space-2)';
@@ -26,6 +32,8 @@ export const globalSpace10 = 'var(--cds-global-space-10)';
 export const globalSpace11 = 'var(--cds-global-space-11)';
 export const globalSpace12 = 'var(--cds-global-space-12)';
 export const globalSpace13 = 'var(--cds-global-space-13)';
+export const globalSpace14 = 'var(--cds-global-space-14)';
+export const globalSpace15 = 'var(--cds-global-space-15)';
 export const globalColorBlack = 'var(--cds-global-color-black)';
 export const globalColorWhite = 'var(--cds-global-color-white)';
 export const globalColorGreen50 = 'var(--cds-global-color-green-50)';
@@ -138,6 +146,17 @@ export const globalColorYellow700 = 'var(--cds-global-color-yellow-700)';
 export const globalColorYellow800 = 'var(--cds-global-color-yellow-800)';
 export const globalColorYellow900 = 'var(--cds-global-color-yellow-900)';
 export const globalColorYellow1000 = 'var(--cds-global-color-yellow-1000)';
+export const globalColorLime50 = 'var(--cds-global-color-lime-50)';
+export const globalColorLime100 = 'var(--cds-global-color-lime-100)';
+export const globalColorLime200 = 'var(--cds-global-color-lime-200)';
+export const globalColorLime300 = 'var(--cds-global-color-lime-300)';
+export const globalColorLime400 = 'var(--cds-global-color-lime-400)';
+export const globalColorLime500 = 'var(--cds-global-color-lime-500)';
+export const globalColorLime600 = 'var(--cds-global-color-lime-600)';
+export const globalColorLime700 = 'var(--cds-global-color-lime-700)';
+export const globalColorLime800 = 'var(--cds-global-color-lime-800)';
+export const globalColorLime900 = 'var(--cds-global-color-lime-900)';
+export const globalColorLime1000 = 'var(--cds-global-color-lime-1000)';
 export const globalColorTangerine50 = 'var(--cds-global-color-tangerine-50)';
 export const globalColorTangerine100 = 'var(--cds-global-color-tangerine-100)';
 export const globalColorTangerine200 = 'var(--cds-global-color-tangerine-200)';
@@ -270,8 +289,6 @@ export const globalTypographyFontSize6 = 'var(--cds-global-typography-font-size-
 export const globalTypographyFontSize7 = 'var(--cds-global-typography-font-size-7)';
 export const globalTypographyFontSize8 = 'var(--cds-global-typography-font-size-8)';
 export const globalTypographyFontSize9 = 'var(--cds-global-typography-font-size-9)';
-export const globalTypographyBaseFontSize = 'var(--cds-global-typography-base-font-size)';
-export const globalTypographyBaseFontSizePx = 'var(--cds-global-typography-base-font-size-px)';
 export const globalTypographyFontFamily = 'var(--cds-global-typography-font-family)';
 export const globalTypographyHeaderFontFamily = 'var(--cds-global-typography-header-font-family)';
 export const globalTypographyMonospaceFontFamily = 'var(--cds-global-typography-monospace-font-family)';
@@ -334,7 +351,6 @@ export const globalAnimationDurationSlowest = 'var(--cds-global-animation-durati
 export const globalAnimationEasingPrimary = 'var(--cds-global-animation-easing-primary)';
 export const globalAnimationEasingSecondary = 'var(--cds-global-animation-easing-secondary)';
 export const globalAnimationEasingLoop = 'var(--cds-global-animation-easing-loop)';
-export const globalBase = 'var(--cds-global-base)';
 export const aliasObjectBorderRadius100 = 'var(--cds-alias-object-border-radius-100)';
 export const aliasObjectBorderRadius200 = 'var(--cds-alias-object-border-radius-200)';
 export const aliasObjectBorderRadius300 = 'var(--cds-alias-object-border-radius-300)';
@@ -397,4 +413,7 @@ export const aliasStatusDisabledTint = 'var(--cds-alias-status-disabled-tint)';
 export const aliasStatusDisabledShade = 'var(--cds-alias-status-disabled-shade)';
 export const aliasStatusAlt = 'var(--cds-alias-status-alt)';
 export const aliasStatusAltTint = 'var(--cds-alias-status-alt-tint)';
-export const aliasStatusAltShade = 'var(--cds-alias-status-alt-shade)';
+export const aliasStatusAltShade = 'var(--cds-alias-status-alt-shade)';
+export const internalScale1 = 'var(--cds-internal-scale-1)';
+export const internalScale2 = 'var(--cds-internal-scale-2)';
+export const internalScale3 = 'var(--cds-internal-scale-3)';

package/tokens/tokens.json

@@ -1,24 +1,15 @@
 {
-  "globalLayoutSpaceXxs": {
-    "value": 2
-  },
-  "globalLayoutSpaceXs": {
-    "value": 4
-  },
-  "globalLayoutSpaceSm": {
-    "value": 6
-  },
-  "globalLayoutSpaceMd": {
-    "value": 12
+  "globalBase": {
+    "value": 20
   },
-  "globalLayoutSpaceLg": {
-    "value": 24
+  "globalScaleSpace": {
+    "value": 1
   },
-  "globalLayoutSpaceXl": {
-    "value": 48
+  "globalScaleLayoutSpace": {
+    "value": 1
   },
-  "globalLayoutSpaceXxl": {
-    "value": 96
+  "globalScaleTypography": {
+    "value": 1
   },
   "globalLayoutGridCols": {
     "value": 12
@@ -38,6 +29,33 @@
   "globalLayoutWidthXl": {
     "value": "1440px"
   },
+  "globalLayoutSpaceXxxs": {
+    "value": 2
+  },
+  "globalLayoutSpaceXxs": {
+    "value": 4
+  },
+  "globalLayoutSpaceXs": {
+    "value": 8
+  },
+  "globalLayoutSpaceSm": {
+    "value": 12
+  },
+  "globalLayoutSpaceMd": {
+    "value": 16
+  },
+  "globalLayoutSpaceLg": {
+    "value": 24
+  },
+  "globalLayoutSpaceXl": {
+    "value": 32
+  },
+  "globalLayoutSpaceXxl": {
+    "value": 48
+  },
+  "globalLayoutSpaceXxxl": {
+    "value": 64
+  },
   "globalSpace0": {
     "value": 0
   },
@@ -78,8 +96,14 @@
     "value": 48
   },
   "globalSpace13": {
+    "value": 64
+  },
+  "globalSpace14": {
     "value": 72
   },
+  "globalSpace15": {
+    "value": 96
+  },
   "globalColorBlack": {
     "value": [
       0,
@@ -864,6 +888,83 @@
       13
     ]
   },
+  "globalColorLime50": {
+    "value": [
+      66,
+      100,
+      94
+    ]
+  },
+  "globalColorLime100": {
+    "value": [
+      66,
+      95,
+      83
+    ]
+  },
+  "globalColorLime200": {
+    "value": [
+      66,
+      85,
+      70
+    ]
+  },
+  "globalColorLime300": {
+    "value": [
+      66,
+      80,
+      58
+    ]
+  },
+  "globalColorLime400": {
+    "value": [
+      66,
+      80,
+      48
+    ]
+  },
+  "globalColorLime500": {
+    "value": [
+      66,
+      90,
+      41
+    ]
+  },
+  "globalColorLime600": {
+    "value": [
+      66,
+      90,
+      36
+    ]
+  },
+  "globalColorLime700": {
+    "value": [
+      66,
+      100,
+      28
+    ]
+  },
+  "globalColorLime800": {
+    "value": [
+      66,
+      100,
+      22
+    ]
+  },
+  "globalColorLime900": {
+    "value": [
+      66,
+      100,
+      12
+    ]
+  },
+  "globalColorLime1000": {
+    "value": [
+      66,
+      100,
+      7
+    ]
+  },
   "globalColorTangerine50": {
     "value": [
       25,
@@ -1729,12 +1830,6 @@
   "globalTypographyFontSize9": {
     "value": 40
   },
-  "globalTypographyBaseFontSize": {
-    "value": "125%"
-  },
-  "globalTypographyBaseFontSizePx": {
-    "value": 20
-  },
   "globalTypographyFontFamily": {
     "value": "'Clarity City', 'Avenir Next', sans-serif"
   },
@@ -1941,9 +2036,6 @@
   "globalAnimationEasingLoop": {
     "value": "cubic-bezier(0.17, 0.4, 0.8, 0.79)"
   },
-  "globalBase": {
-    "value": 20
-  },
   "aliasObjectBorderRadius100": {
     "value": 4
   },
@@ -2352,5 +2444,14 @@
       19
     ],
     "alias": "globalColorViolet900"
+  },
+  "internalScale1": {
+    "value": "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space))"
+  },
+  "internalScale2": {
+    "value": "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space))"
+  },
+  "internalScale3": {
+    "value": "calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography))"
   }
 }

package/tokens/tokens.scss

@@ -1,11 +1,12 @@
 // This token format is currently experimental and may change in the future
-$cds-global-layout-space-xxs: var(--cds-global-layout-space-xxs) !default;
-$cds-global-layout-space-xs: var(--cds-global-layout-space-xs) !default;
-$cds-global-layout-space-sm: var(--cds-global-layout-space-sm) !default;
-$cds-global-layout-space-md: var(--cds-global-layout-space-md) !default;
-$cds-global-layout-space-lg: var(--cds-global-layout-space-lg) !default;
-$cds-global-layout-space-xl: var(--cds-global-layout-space-xl) !default;
-$cds-global-layout-space-xxl: var(--cds-global-layout-space-xxl) !default;
+$cds-global-base: var(--cds-global-base) !default;
+$cds-global-base-static: 20 !default;
+$cds-global-scale-space: var(--cds-global-scale-space) !default;
+$cds-global-scale-space-static: 1 !default;
+$cds-global-scale-layout-space: var(--cds-global-scale-layout-space) !default;
+$cds-global-scale-layout-space-static: 1 !default;
+$cds-global-scale-typography: var(--cds-global-scale-typography) !default;
+$cds-global-scale-typography-static: 1 !default;
 $cds-global-layout-grid-cols: var(--cds-global-layout-grid-cols) !default;
 $cds-global-layout-grid-cols-static: 12 !default;
 $cds-global-layout-width-xs: var(--cds-global-layout-width-xs) !default;
@@ -18,20 +19,56 @@ $cds-global-layout-width-lg: var(--cds-global-layout-width-lg) !default;
 $cds-global-layout-width-lg-static: 1200px !default;
 $cds-global-layout-width-xl: var(--cds-global-layout-width-xl) !default;
 $cds-global-layout-width-xl-static: 1440px !default;
+$cds-global-layout-space-xxxs: var(--cds-global-layout-space-xxxs) !default;
+$cds-global-layout-space-xxxs-static: 2 !default;
+$cds-global-layout-space-xxs: var(--cds-global-layout-space-xxs) !default;
+$cds-global-layout-space-xxs-static: 4 !default;
+$cds-global-layout-space-xs: var(--cds-global-layout-space-xs) !default;
+$cds-global-layout-space-xs-static: 8 !default;
+$cds-global-layout-space-sm: var(--cds-global-layout-space-sm) !default;
+$cds-global-layout-space-sm-static: 12 !default;
+$cds-global-layout-space-md: var(--cds-global-layout-space-md) !default;
+$cds-global-layout-space-md-static: 16 !default;
+$cds-global-layout-space-lg: var(--cds-global-layout-space-lg) !default;
+$cds-global-layout-space-lg-static: 24 !default;
+$cds-global-layout-space-xl: var(--cds-global-layout-space-xl) !default;
+$cds-global-layout-space-xl-static: 32 !default;
+$cds-global-layout-space-xxl: var(--cds-global-layout-space-xxl) !default;
+$cds-global-layout-space-xxl-static: 48 !default;
+$cds-global-layout-space-xxxl: var(--cds-global-layout-space-xxxl) !default;
+$cds-global-layout-space-xxxl-static: 64 !default;
 $cds-global-space-0: var(--cds-global-space-0) !default;
+$cds-global-space-0-static: 0 !default;
 $cds-global-space-1: var(--cds-global-space-1) !default;
+$cds-global-space-1-static: 1 !default;
 $cds-global-space-2: var(--cds-global-space-2) !default;
+$cds-global-space-2-static: 2 !default;
 $cds-global-space-3: var(--cds-global-space-3) !default;
+$cds-global-space-3-static: 4 !default;
 $cds-global-space-4: var(--cds-global-space-4) !default;
+$cds-global-space-4-static: 6 !default;
 $cds-global-space-5: var(--cds-global-space-5) !default;
+$cds-global-space-5-static: 8 !default;
 $cds-global-space-6: var(--cds-global-space-6) !default;
+$cds-global-space-6-static: 12 !default;
 $cds-global-space-7: var(--cds-global-space-7) !default;
+$cds-global-space-7-static: 16 !default;
 $cds-global-space-8: var(--cds-global-space-8) !default;
+$cds-global-space-8-static: 18 !default;
 $cds-global-space-9: var(--cds-global-space-9) !default;
+$cds-global-space-9-static: 24 !default;
 $cds-global-space-10: var(--cds-global-space-10) !default;
+$cds-global-space-10-static: 32 !default;
 $cds-global-space-11: var(--cds-global-space-11) !default;
+$cds-global-space-11-static: 36 !default;
 $cds-global-space-12: var(--cds-global-space-12) !default;
+$cds-global-space-12-static: 48 !default;
 $cds-global-space-13: var(--cds-global-space-13) !default;
+$cds-global-space-13-static: 64 !default;
+$cds-global-space-14: var(--cds-global-space-14) !default;
+$cds-global-space-14-static: 72 !default;
+$cds-global-space-15: var(--cds-global-space-15) !default;
+$cds-global-space-15-static: 96 !default;
 $cds-global-color-black: var(--cds-global-color-black) !default;
 $cds-global-color-white: var(--cds-global-color-white) !default;
 $cds-global-color-green-50: var(--cds-global-color-green-50) !default;
@@ -144,6 +181,17 @@ $cds-global-color-yellow-700: var(--cds-global-color-yellow-700) !default;
 $cds-global-color-yellow-800: var(--cds-global-color-yellow-800) !default;
 $cds-global-color-yellow-900: var(--cds-global-color-yellow-900) !default;
 $cds-global-color-yellow-1000: var(--cds-global-color-yellow-1000) !default;
+$cds-global-color-lime-50: var(--cds-global-color-lime-50) !default;
+$cds-global-color-lime-100: var(--cds-global-color-lime-100) !default;
+$cds-global-color-lime-200: var(--cds-global-color-lime-200) !default;
+$cds-global-color-lime-300: var(--cds-global-color-lime-300) !default;
+$cds-global-color-lime-400: var(--cds-global-color-lime-400) !default;
+$cds-global-color-lime-500: var(--cds-global-color-lime-500) !default;
+$cds-global-color-lime-600: var(--cds-global-color-lime-600) !default;
+$cds-global-color-lime-700: var(--cds-global-color-lime-700) !default;
+$cds-global-color-lime-800: var(--cds-global-color-lime-800) !default;
+$cds-global-color-lime-900: var(--cds-global-color-lime-900) !default;
+$cds-global-color-lime-1000: var(--cds-global-color-lime-1000) !default;
 $cds-global-color-tangerine-50: var(--cds-global-color-tangerine-50) !default;
 $cds-global-color-tangerine-100: var(--cds-global-color-tangerine-100) !default;
 $cds-global-color-tangerine-200: var(--cds-global-color-tangerine-200) !default;
@@ -267,17 +315,25 @@ $cds-global-typography-font-weight-semibold: var(--cds-global-typography-font-we
 $cds-global-typography-font-weight-bold: var(--cds-global-typography-font-weight-bold) !default;
 $cds-global-typography-font-weight-extrabold: var(--cds-global-typography-font-weight-extrabold) !default;
 $cds-global-typography-font-size-0: var(--cds-global-typography-font-size-0) !default;
+$cds-global-typography-font-size-0-static: 10 !default;
 $cds-global-typography-font-size-1: var(--cds-global-typography-font-size-1) !default;
+$cds-global-typography-font-size-1-static: 11 !default;
 $cds-global-typography-font-size-2: var(--cds-global-typography-font-size-2) !default;
+$cds-global-typography-font-size-2-static: 12 !default;
 $cds-global-typography-font-size-3: var(--cds-global-typography-font-size-3) !default;
+$cds-global-typography-font-size-3-static: 13 !default;
 $cds-global-typography-font-size-4: var(--cds-global-typography-font-size-4) !default;
+$cds-global-typography-font-size-4-static: 14 !default;
 $cds-global-typography-font-size-5: var(--cds-global-typography-font-size-5) !default;
+$cds-global-typography-font-size-5-static: 16 !default;
 $cds-global-typography-font-size-6: var(--cds-global-typography-font-size-6) !default;
+$cds-global-typography-font-size-6-static: 20 !default;
 $cds-global-typography-font-size-7: var(--cds-global-typography-font-size-7) !default;
+$cds-global-typography-font-size-7-static: 24 !default;
 $cds-global-typography-font-size-8: var(--cds-global-typography-font-size-8) !default;
+$cds-global-typography-font-size-8-static: 32 !default;
 $cds-global-typography-font-size-9: var(--cds-global-typography-font-size-9) !default;
-$cds-global-typography-base-font-size: var(--cds-global-typography-base-font-size) !default;
-$cds-global-typography-base-font-size-px: var(--cds-global-typography-base-font-size-px) !default;
+$cds-global-typography-font-size-9-static: 40 !default;
 $cds-global-typography-font-family: var(--cds-global-typography-font-family) !default;
 $cds-global-typography-header-font-family: var(--cds-global-typography-header-font-family) !default;
 $cds-global-typography-monospace-font-family: var(--cds-global-typography-monospace-font-family) !default;
@@ -289,51 +345,62 @@ $cds-global-typography-link-color-hover: var(--cds-global-typography-link-color-
 $cds-global-typography-link-color-visited: var(--cds-global-typography-link-color-visited) !default;
 $cds-global-typography-link-color-visited-hover: var(--cds-global-typography-link-color-visited-hover) !default;
 $cds-global-typography-body-font-size: var(--cds-global-typography-body-font-size) !default;
+$cds-global-typography-body-font-size-static: 14 !default;
 $cds-global-typography-body-line-height: var(--cds-global-typography-body-line-height) !default;
 $cds-global-typography-body-line-height-static: 1.42857em !default;
 $cds-global-typography-body-letter-spacing: var(--cds-global-typography-body-letter-spacing) !default;
 $cds-global-typography-body-font-weight: var(--cds-global-typography-body-font-weight) !default;
 $cds-global-typography-display-font-size: var(--cds-global-typography-display-font-size) !default;
+$cds-global-typography-display-font-size-static: 40 !default;
 $cds-global-typography-display-line-height: var(--cds-global-typography-display-line-height) !default;
 $cds-global-typography-display-line-height-static: 1.1em !default;
 $cds-global-typography-display-letter-spacing: var(--cds-global-typography-display-letter-spacing) !default;
 $cds-global-typography-display-font-weight: var(--cds-global-typography-display-font-weight) !default;
 $cds-global-typography-heading-font-size: var(--cds-global-typography-heading-font-size) !default;
+$cds-global-typography-heading-font-size-static: 32 !default;
 $cds-global-typography-heading-line-height: var(--cds-global-typography-heading-line-height) !default;
 $cds-global-typography-heading-line-height-static: 1.125em !default;
 $cds-global-typography-heading-letter-spacing: var(--cds-global-typography-heading-letter-spacing) !default;
 $cds-global-typography-heading-font-weight: var(--cds-global-typography-heading-font-weight) !default;
 $cds-global-typography-title-font-size: var(--cds-global-typography-title-font-size) !default;
+$cds-global-typography-title-font-size-static: 24 !default;
 $cds-global-typography-title-line-height: var(--cds-global-typography-title-line-height) !default;
 $cds-global-typography-title-line-height-static: 1.16667em !default;
 $cds-global-typography-title-letter-spacing: var(--cds-global-typography-title-letter-spacing) !default;
 $cds-global-typography-title-font-weight: var(--cds-global-typography-title-font-weight) !default;
 $cds-global-typography-section-font-size: var(--cds-global-typography-section-font-size) !default;
+$cds-global-typography-section-font-size-static: 20 !default;
 $cds-global-typography-section-line-height: var(--cds-global-typography-section-line-height) !default;
 $cds-global-typography-section-line-height-static: 1.2em !default;
 $cds-global-typography-section-letter-spacing: var(--cds-global-typography-section-letter-spacing) !default;
 $cds-global-typography-section-font-weight: var(--cds-global-typography-section-font-weight) !default;
 $cds-global-typography-subsection-font-size: var(--cds-global-typography-subsection-font-size) !default;
+$cds-global-typography-subsection-font-size-static: 16 !default;
 $cds-global-typography-subsection-line-height: var(--cds-global-typography-subsection-line-height) !default;
 $cds-global-typography-subsection-line-height-static: 1.25em !default;
 $cds-global-typography-subsection-letter-spacing: var(--cds-global-typography-subsection-letter-spacing) !default;
 $cds-global-typography-subsection-font-weight: var(--cds-global-typography-subsection-font-weight) !default;
 $cds-global-typography-message-font-size: var(--cds-global-typography-message-font-size) !default;
+$cds-global-typography-message-font-size-static: 16 !default;
 $cds-global-typography-message-line-height: var(--cds-global-typography-message-line-height) !default;
 $cds-global-typography-message-line-height-static: 1.25em !default;
 $cds-global-typography-message-letter-spacing: var(--cds-global-typography-message-letter-spacing) !default;
 $cds-global-typography-message-font-weight: var(--cds-global-typography-message-font-weight) !default;
+$cds-global-typography-message-font-weight-static: 400 !default;
 $cds-global-typography-secondary-font-size: var(--cds-global-typography-secondary-font-size) !default;
+$cds-global-typography-secondary-font-size-static: 13 !default;
 $cds-global-typography-secondary-line-height: var(--cds-global-typography-secondary-line-height) !default;
 $cds-global-typography-secondary-line-height-static: 1.23077em !default;
 $cds-global-typography-secondary-letter-spacing: var(--cds-global-typography-secondary-letter-spacing) !default;
 $cds-global-typography-secondary-font-weight: var(--cds-global-typography-secondary-font-weight) !default;
 $cds-global-typography-caption-font-size: var(--cds-global-typography-caption-font-size) !default;
+$cds-global-typography-caption-font-size-static: 11 !default;
 $cds-global-typography-caption-line-height: var(--cds-global-typography-caption-line-height) !default;
 $cds-global-typography-caption-line-height-static: 1.454545em !default;
 $cds-global-typography-caption-letter-spacing: var(--cds-global-typography-caption-letter-spacing) !default;
 $cds-global-typography-caption-font-weight: var(--cds-global-typography-caption-font-weight) !default;
 $cds-global-typography-smallcaption-font-size: var(--cds-global-typography-smallcaption-font-size) !default;
+$cds-global-typography-smallcaption-font-size-static: 10 !default;
 $cds-global-typography-smallcaption-line-height: var(--cds-global-typography-smallcaption-line-height) !default;
 $cds-global-typography-smallcaption-line-height-static: 1.2em !default;
 $cds-global-typography-smallcaption-letter-spacing: var(--cds-global-typography-smallcaption-letter-spacing) !default;
@@ -350,15 +417,19 @@ $cds-global-animation-duration-slowest: var(--cds-global-animation-duration-slow
 $cds-global-animation-easing-primary: var(--cds-global-animation-easing-primary) !default;
 $cds-global-animation-easing-secondary: var(--cds-global-animation-easing-secondary) !default;
 $cds-global-animation-easing-loop: var(--cds-global-animation-easing-loop) !default;
-$cds-global-base: var(--cds-global-base) !default;
-$cds-global-base-static: 20 !default;
 $cds-alias-object-border-radius-100: var(--cds-alias-object-border-radius-100) !default;
+$cds-alias-object-border-radius-100-static: 4 !default;
 $cds-alias-object-border-radius-200: var(--cds-alias-object-border-radius-200) !default;
+$cds-alias-object-border-radius-200-static: 12 !default;
 $cds-alias-object-border-radius-300: var(--cds-alias-object-border-radius-300) !default;
 $cds-alias-object-border-width-100: var(--cds-alias-object-border-width-100) !default;
+$cds-alias-object-border-width-100-static: 1 !default;
 $cds-alias-object-border-width-200: var(--cds-alias-object-border-width-200) !default;
+$cds-alias-object-border-width-200-static: 2 !default;
 $cds-alias-object-border-width-300: var(--cds-alias-object-border-width-300) !default;
+$cds-alias-object-border-width-300-static: 3 !default;
 $cds-alias-object-border-width-400: var(--cds-alias-object-border-width-400) !default;
+$cds-alias-object-border-width-400-static: 4 !default;
 $cds-alias-object-border-color: var(--cds-alias-object-border-color) !default;
 $cds-alias-object-border-color-tint: var(--cds-alias-object-border-color-tint) !default;
 $cds-alias-object-border-color-shade: var(--cds-alias-object-border-color-shade) !default;
@@ -373,6 +444,7 @@ $cds-alias-object-interaction-outline: var(--cds-alias-object-interaction-outlin
 $cds-alias-object-interaction-outline-webkit: var(--cds-alias-object-interaction-outline-webkit) !default;
 $cds-alias-object-interaction-outline-offset: var(--cds-alias-object-interaction-outline-offset) !default;
 $cds-alias-object-interaction-touch-target: var(--cds-alias-object-interaction-touch-target) !default;
+$cds-alias-object-interaction-touch-target-static: 36 !default;
 $cds-alias-object-interaction-border-color: var(--cds-alias-object-interaction-border-color) !default;
 $cds-alias-object-interaction-background: var(--cds-alias-object-interaction-background) !default;
 $cds-alias-object-interaction-background-hover: var(--cds-alias-object-interaction-background-hover) !default;
@@ -414,4 +486,7 @@ $cds-alias-status-disabled-tint: var(--cds-alias-status-disabled-tint) !default;
 $cds-alias-status-disabled-shade: var(--cds-alias-status-disabled-shade) !default;
 $cds-alias-status-alt: var(--cds-alias-status-alt) !default;
 $cds-alias-status-alt-tint: var(--cds-alias-status-alt-tint) !default;
-$cds-alias-status-alt-shade: var(--cds-alias-status-alt-shade) !default;
+$cds-alias-status-alt-shade: var(--cds-alias-status-alt-shade) !default;
+$cds-internal-scale-1: var(--cds-internal-scale-1) !default;
+$cds-internal-scale-2: var(--cds-internal-scale-2) !default;
+$cds-internal-scale-3: var(--cds-internal-scale-3) !default;

package/tree-view/register.js

@@ -1,2 +1,2 @@
-import"@cds/core/icon/register.js";import"@cds/core/internal-components/visual-checkbox/register.js";import"@cds/core/progress-circle/register.js";import{registerElementSafely as e,ClarityMotion as r,AnimationTreeItemExpandName as o,AnimationTreeItemExpandConfig as s}from"@cds/core/internal";import{CdsTree as c}from"./tree.element.js";import{CdsTreeItem as i}from"./tree-item.element.js";import{ClarityIcons as t}from"@cds/core/icon/icon.service.js";import{angleIcon as m}from"@cds/core/icon/shapes/angle.js";e("cds-tree",c),e("cds-tree-item",i),t.addIcons(m),r.add(o,s);
+import"@cds/core/icon/register.js";import"@cds/core/internal-components/visual-checkbox/register.js";import"@cds/core/progress-circle/register.js";import{registerElementSafely as e,ClarityMotion as r,AnimationTreeItemExpandName as t,AnimationTreeItemExpandConfig as o}from"@cds/core/internal";import{CdsTree as s}from"./tree.element.js";import{CdsTreeItem as c}from"./tree-item.element.js";e("cds-tree",s),e("cds-tree-item",c),r.add(t,o);
 //# sourceMappingURL=register.js.map

package/tree-view/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sources":["../../../src/tree-view/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsTree","CdsTreeItem","ClarityIcons","addIcons","angleIcon","ClarityMotion","add","AnimationTreeItemExpandName","AnimationTreeItemExpandConfig"],"mappings":"+fAaAA,EAAsB,WAAYC,GAClCD,EAAsB,gBAAiBE,GACvCC,EAAaC,SAASC,GACtBC,EAAcC,IAAIC,EAA6BC"}
+{"version":3,"file":"register.js","sources":["../../../src/tree-view/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsTree","CdsTreeItem","ClarityMotion","add","AnimationTreeItemExpandName","AnimationTreeItemExpandConfig"],"mappings":"sYAWAA,EAAsB,WAAYC,GAClCD,EAAsB,gBAAiBE,GACvCC,EAAcC,IAAIC,EAA6BC"}

package/tree-view/tree-item.element.d.ts

@@ -1,4 +1,4 @@
-import { Animatable, EventEmitter } from '@cds/core/internal';
+import { EventEmitter } from '@cds/core/internal';
 import { LitElement } from 'lit';
 /**
  * Tree view is a hierarchical component that gives users access to a hierarchical set of objects displayed in a the parent-child relationship.
@@ -29,7 +29,7 @@ import { LitElement } from 'lit';
  * @cssprop --font-size
  * @cssprop --font-weight
  */
-export declare class CdsTreeItem extends LitElement implements Animatable {
+export declare class CdsTreeItem extends LitElement {
     i18n: {
         loading: string;
     };

package/tree-view/tree-item.element.js

@@ -1,2 +1,2 @@
-import{__decorate as e}from"tslib";import{I18nService as t,createId as i,baseStyles as s,i18n as d,property as l,event as o,querySlotAll as a,querySlot as n,animate as r,AnimationTreeItemExpandName as c,reverseAnimation as p}from"@cds/core/internal";import{LitElement as h,html as m}from"lit";import{ifDefined as g}from"lit/directives/if-defined.js";import u from"./tree-item.element.scss.js";let v=class extends h{constructor(){super(...arguments),this.i18n=t.keys.treeview,this.cdsMotion="on",this.multiSelect=!1,this.disabled=!1,this.expanded=!1,this.expandable=!1,this.indeterminate=!1,this.loading=!1,this.selected=!1}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.role="treeitem",this.id||(this.id=i())}updated(e){super.updated(e),this.treeItemChildren.length>0&&(this.expandable=!0),this.expandable?this.ariaExpanded=this.expanded?"true":"false":this.ariaExpanded=null,this.multiSelect?this.ariaSelected=this.selected?"true":"false":this.ariaSelected=null,this.ariaDisabled=this.disabled?"true":"false"}toggleExpanded(){this.expandedChange.emit(!this.expanded)}toggleSelected(){this.selectedChange.emit(!this.selected),this.anchorLink&&this.anchorLink.click()}onSlotChange(){this.treeItemChildren.forEach((e=>{e.getAttribute("slot")||e.setAttribute("slot",i())})),this.requestUpdate()}render(){return m`<div class="private-host" cds-layout="p-l:md"><div cds-layout="horizontal align:vertical-center ${this.multiSelect?"gap:md":"gap:sm"}"><div class="lhs-container">${this.treeItemLeftHandSideTemplate}</div><div class="item-content" cds-layout="p:sm ${this.multiSelect?"p-x:md":""} align:stretch" @click="${()=>this.toggleSelected()}"><span cds-layout="horizontal align:vertical-center gap:md" cds-text="lhe">${this.multiSelect?m`<cds-internal-visual-checkbox part="checkbox" .disabled="${this.disabled}" .indeterminate="${this.indeterminate}" .selected="${this.selected}"></cds-internal-visual-checkbox>`:m``}<slot @slotchange="${this.onSlotChange}"></slot></span></div></div><div class="item-children" role="${g(this.expanded?"group":void 0)}" ?hidden="${!this.expanded}">${Array.from(this.treeItemChildren).map((e=>m`<slot name="${e.getAttribute("slot")}"></slot>`))}</div></div>`}get treeItemLeftHandSideTemplate(){return this.loading?m`<cds-progress-circle size="xs" aria-label="${this.i18n.loading}"></cds-progress-circle>`:this.expandable?m`<div @click="${()=>this.toggleExpanded()}"><cds-icon class="expand-collapse-icon" part="expand-collapse-icon" shape="angle"></cds-icon></div>`:m``}static get styles(){return[s,u]}};e([d()],v.prototype,"i18n",void 0),e([l({type:String})],v.prototype,"cdsMotion",void 0),e([o()],v.prototype,"cdsMotionChange",void 0),e([l({type:Boolean,reflect:!0,attribute:"multi-select"})],v.prototype,"multiSelect",void 0),e([l({type:Boolean})],v.prototype,"disabled",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"expanded",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"expandable",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"indeterminate",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"loading",void 0),e([l({type:Boolean,reflect:!0})],v.prototype,"selected",void 0),e([a(":scope > cds-tree-item")],v.prototype,"treeItemChildren",void 0),e([n(":scope > a")],v.prototype,"anchorLink",void 0),e([o()],v.prototype,"expandedChange",void 0),e([o()],v.prototype,"selectedChange",void 0),v=e([r({expanded:{true:c,false:p(c)}})],v);export{v as CdsTreeItem};
+import{__decorate as e}from"tslib";import{I18nService as t,createId as i,baseStyles as s,i18n as d,property as o,event as a,querySlotAll as l,querySlot as n,animate as r,AnimationTreeItemExpandName as c,reverseAnimation as p}from"@cds/core/internal";import{LitElement as h,html as m}from"lit";import{ifDefined as g}from"lit/directives/if-defined.js";import v from"./tree-item.element.scss.js";let u=class extends h{constructor(){super(...arguments),this.i18n=t.keys.treeview,this.cdsMotion="on",this.multiSelect=!1,this.disabled=!1,this.expanded=!1,this.expandable=!1,this.indeterminate=!1,this.loading=!1,this.selected=!1}connectedCallback(){super.connectedCallback(),this.tabIndex=-1,this.role="treeitem",this.id||(this.id=i())}updated(e){super.updated(e),this.treeItemChildren.length>0&&(this.expandable=!0),this.expandable?this.ariaExpanded=this.expanded?"true":"false":this.ariaExpanded=null,this.multiSelect?this.ariaSelected=this.selected?"true":"false":this.ariaSelected=null,this.ariaDisabled=this.disabled?"true":"false"}toggleExpanded(){this.expandedChange.emit(!this.expanded)}toggleSelected(){this.selectedChange.emit(!this.selected),this.anchorLink&&this.anchorLink.click()}onSlotChange(){this.treeItemChildren.forEach((e=>{e.getAttribute("slot")||e.setAttribute("slot",i())})),this.requestUpdate()}render(){return m`<div class="private-host" cds-layout="p-l:md"><div cds-layout="horizontal align:vertical-center ${this.multiSelect?"gap:xs":"gap:xxs"}"><div class="lhs-container">${this.treeItemLeftHandSideTemplate}</div><div class="item-content" cds-layout="horizontal p:xxs align:vertical-center align:stretch" @click="${()=>this.toggleSelected()}"><span cds-layout="horizontal align:vertical-center gap:sm" cds-text="lhe">${this.multiSelect?m`<cds-internal-visual-checkbox part="checkbox" .disabled="${this.disabled}" .indeterminate="${this.indeterminate}" .selected="${this.selected}"></cds-internal-visual-checkbox>`:m``}<slot @slotchange="${this.onSlotChange}"></slot></span></div></div><div class="item-children" role="${g(this.expanded?"group":void 0)}" ?hidden="${!this.expanded}">${Array.from(this.treeItemChildren).map((e=>m`<slot name="${e.getAttribute("slot")}"></slot>`))}</div></div>`}get treeItemLeftHandSideTemplate(){return this.loading?m`<cds-progress-circle size="xs" aria-label="${this.i18n.loading}"></cds-progress-circle>`:this.expandable?m`<div @click="${()=>this.toggleExpanded()}"><cds-button-expand .pressed="${this.expanded}" readonly="readonly" action="vertical" part="expand-collapse-icon"></cds-button-expand></div>`:m``}static get styles(){return[s,v]}};e([d()],u.prototype,"i18n",void 0),e([o({type:String})],u.prototype,"cdsMotion",void 0),e([a()],u.prototype,"cdsMotionChange",void 0),e([o({type:Boolean,reflect:!0,attribute:"multi-select"})],u.prototype,"multiSelect",void 0),e([o({type:Boolean})],u.prototype,"disabled",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"expanded",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"expandable",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"indeterminate",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"loading",void 0),e([o({type:Boolean,reflect:!0})],u.prototype,"selected",void 0),e([l(":scope > cds-tree-item")],u.prototype,"treeItemChildren",void 0),e([n(":scope > a")],u.prototype,"anchorLink",void 0),e([a()],u.prototype,"expandedChange",void 0),e([a()],u.prototype,"selectedChange",void 0),u=e([r({expanded:{true:c,false:p(c)}})],u);export{u as CdsTreeItem};
 //# sourceMappingURL=tree-item.element.js.map