@cds/core 5.7.0 → 6.0.0-beta.2

package/time/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sources":["../../../src/time/register.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { registerElementSafely } from '@cds/core/internal';\nimport { CdsTime } from './time.element.js';\nimport '@cds/core/forms/register.js';\nimport '@cds/core/icon/register.js';\nregisterElementSafely('cds-time', CdsTime);\n"],"names":["registerElementSafely","CdsTime"],"mappings":"8KASAA,EAAsB,WAAYC"}
+{"version":3,"file":"register.js","sources":["../../../src/time/register.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { registerElementSafely } from '@cds/core/internal';\nimport { CdsTime } from './time.element.js';\nimport '@cds/core/forms/register.js';\nimport '@cds/core/button-action/register.js';\nimport '@cds/core/icon/register.js';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { clockIcon } from '@cds/core/icon/shapes/clock.js';\nClarityIcons.addIcons(clockIcon);\nregisterElementSafely('cds-time', CdsTime);\n"],"names":["ClarityIcons","addIcons","clockIcon","registerElementSafely","CdsTime"],"mappings":"mVAYAA,EAAaC,SAASC,GACtBC,EAAsB,WAAYC"}

package/time/time.element.d.ts

@@ -31,5 +31,4 @@ export declare class CdsTime extends CdsControl {
     protected globalStyles: import("lit").CSSResultGroup;
     protected get suffixDefaultTemplate(): import("lit-html").TemplateResult<1>;
     static get styles(): import("lit").CSSResultGroup[];
-    constructor();
 }

package/time/time.element.js

@@ -1,2 +1,2 @@
-import{__decorate as o}from"tslib";import{html as r}from"lit";import{globalStyle as s}from"@cds/core/internal";import{CdsControl as t}from"@cds/core/forms";import{inputStyles as c}from"@cds/core/input";import{ClarityIcons as e}from"@cds/core/icon/icon.service.js";import{clockIcon as i}from"@cds/core/icon/shapes/clock.js";import l from"./time.global.scss.js";class m extends t{constructor(){super();this.globalStyles=l,e.addIcons(i)}get suffixDefaultTemplate(){return r`<cds-control-action readonly="readonly"><cds-icon shape="clock" size="18"></cds-icon></cds-control-action>`}static get styles(){return[...super.styles,c]}}o([s()],m.prototype,"globalStyles",void 0);export{m as CdsTime};
+import{__decorate as t}from"tslib";import{html as o}from"lit";import{globalStyle as r}from"@cds/core/internal";import{CdsControl as s}from"@cds/core/forms";import{inputStyles as e}from"@cds/core/input";import l from"./time.global.scss.js";class c extends s{constructor(){super(...arguments);this.globalStyles=l}get suffixDefaultTemplate(){return o`<cds-button-action shape="clock" readonly="readonly"></cds-button-action>`}static get styles(){return[...super.styles,e]}}t([r()],c.prototype,"globalStyles",void 0);export{c as CdsTime};
 //# sourceMappingURL=time.element.js.map

package/time/time.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.element.js","sources":["../../../src/time/time.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { globalStyle } from '@cds/core/internal';\nimport { CdsControl } from '@cds/core/forms';\nimport { inputStyles } from '@cds/core/input';\nimport { ClarityIcons } from '@cds/core/icon/icon.service.js';\nimport { clockIcon } from '@cds/core/icon/shapes/clock.js';\nimport globalStyles from './time.global.scss';\n/**\n * Time Input\n *\n * ```typescript\n * import '@cds/core/time/register.js';\n * ```\n *\n * ```html\n * <cds-time>\n *   <label>time</label>\n *   <input type=\"time\" />\n *   <cds-control-message>message text</cds-control-message>\n * </cds-time>\n * ```\n *\n * @element cds-time\n * @slot - For projecting time input and label\n * @cssprop --background\n * @cssprop --background-size\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --outline\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --line-height\n * @cssprop --transition\n */\nexport class CdsTime extends CdsControl {\n    constructor() {\n        super();\n        this.globalStyles = globalStyles;\n        ClarityIcons.addIcons(clockIcon);\n    }\n    get suffixDefaultTemplate() {\n        return html `<cds-control-action readonly><cds-icon shape=\"clock\" size=\"18\"></cds-icon></cds-control-action>`;\n    }\n    static get styles() {\n        return [...super.styles, inputStyles];\n    }\n}\n__decorate([\n    globalStyle()\n], CdsTime.prototype, \"globalStyles\", void 0);\n"],"names":["CdsTime","CdsControl","constructor","super","this","globalStyles","ClarityIcons","addIcons","clockIcon","suffixDefaultTemplate","html","styles","inputStyles","__decorate","globalStyle","prototype"],"mappings":"wWAyCO,MAAMA,UAAgBC,EACzBC,cACIC,QACAC,KAAKC,aAAeA,EACpBC,EAAaC,SAASC,GAEtBC,4BACA,OAAOC,CAAK,6GAELC,oBACP,MAAO,IAAIR,MAAMQ,OAAQC,IAGjCC,EAAW,CACPC,KACDd,EAAQe,UAAW,oBAAgB"}
+{"version":3,"file":"time.element.js","sources":["../../../src/time/time.element.ts"],"sourcesContent":["/*\n * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.\n * This software is released under MIT license.\n * The full license information can be found in LICENSE in the root directory of this project.\n */\nimport { __decorate } from \"tslib\";\nimport { html } from 'lit';\nimport { globalStyle } from '@cds/core/internal';\nimport { CdsControl } from '@cds/core/forms';\nimport { inputStyles } from '@cds/core/input';\nimport globalStyles from './time.global.scss';\n/**\n * Time Input\n *\n * ```typescript\n * import '@cds/core/time/register.js';\n * ```\n *\n * ```html\n * <cds-time>\n *   <label>time</label>\n *   <input type=\"time\" />\n *   <cds-control-message>message text</cds-control-message>\n * </cds-time>\n * ```\n *\n * @element cds-time\n * @slot - For projecting time input and label\n * @cssprop --background\n * @cssprop --background-size\n * @cssprop --border\n * @cssprop --border-bottom\n * @cssprop --outline\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --color\n * @cssprop --line-height\n * @cssprop --transition\n */\nexport class CdsTime extends CdsControl {\n    constructor() {\n        super(...arguments);\n        this.globalStyles = globalStyles;\n    }\n    get suffixDefaultTemplate() {\n        return html `<cds-button-action shape=\"clock\" readonly></cds-button-action>`;\n    }\n    static get styles() {\n        return [...super.styles, inputStyles];\n    }\n}\n__decorate([\n    globalStyle()\n], CdsTime.prototype, \"globalStyles\", void 0);\n"],"names":["CdsTime","CdsControl","constructor","super","this","globalStyles","suffixDefaultTemplate","html","styles","inputStyles","__decorate","globalStyle","prototype"],"mappings":"+OAuCO,MAAMA,UAAgBC,EACzBC,cACIC,oBACAC,KAAKC,aAAeA,EAEpBC,4BACA,OAAOC,CAAK,4EAELC,oBACP,MAAO,IAAIL,MAAMK,OAAQC,IAGjCC,EAAW,CACPC,KACDX,EAAQY,UAAW,oBAAgB"}

package/toggle/toggle.element.scss.js

@@ -1,2 +1,2 @@
-import{css as a}from"lit";var r=a`:host{--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border:var(--cds-alias-object-border-width-200, calc(2 / var(--cds-global-base, 20) * 1rem)) solid var(--background);--border-radius:var(--cds-alias-object-border-radius-200, calc(12 / var(--cds-global-base, 20) * 1rem));--height:var(--cds-global-space-8, calc(18 / var(--cds-global-base, 20) * 1rem));--width:calc(var(--cds-global-space-10, calc(32 / var(--cds-global-base, 20) * 1rem)) + var(--cds-global-space-1, calc(1 / var(--cds-global-base, 20) * 1rem)));--anchor-background:var(--cds-global-color-construction-50, #f1f6f8);--anchor-border-radius:var(--cds-alias-object-border-radius-200, calc(12 / var(--cds-global-base, 20) * 1rem));--anchor-width:calc(var(--cds-global-space-6, calc(12 / var(--cds-global-base, 20) * 1rem)) + var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem)));--anchor-height:calc(var(--cds-global-space-6, calc(12 / var(--cds-global-base, 20) * 1rem)) + var(--cds-global-space-2, calc(2 / var(--cds-global-base, 20) * 1rem)));--toggle-speed:var(--cds-global-animation-duration-quicker, 0.15s)}.input,.input:after{display:inline-block;transition-duration:var(--toggle-speed,.15s);transition-timing-function:ease-in}.input{border-radius:var(--border-radius);border:var(--border);background:var(--background);height:var(--height);width:var(--width);position:relative;cursor:pointer;transition-property:border-color,background-color}.input:after{border-radius:var(--anchor-border-radius);background:var(--anchor-background);height:var(--anchor-height);width:var(--anchor-width);position:absolute;content:"";left:0;top:0;transition-property:transform}:host(:not([cds-motion=ready])){--toggle-speed:0}:host([_checked]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--border:var(--cds-alias-object-border-width-200, calc(2 / var(--cds-global-base, 20) * 1rem)) solid var(--background)}:host([_checked]) .input:after{transform:translate(calc(var(--cds-global-space-7,calc(16 / var(--cds-global-base,20) * 1rem)) - var(--cds-global-space-1,calc(1 / var(--cds-global-base,20) * 1rem))),0)}:host([_disabled]) .input{opacity:.6;cursor:not-allowed}[focusable]{width:var(--width);left:0}`;export{r as default};
+import{css as r}from"lit";var a=r`:host{--background:var(--cds-alias-status-neutral, var(--cds-global-color-construction-600, #4f6169));--border:var(--cds-alias-object-border-width-200, 0.125rem) solid var(--background);--border-radius:var(--cds-alias-object-border-radius-200, 0.75rem);--height:var(--cds-global-space-8, 1.125rem);--width:calc(var(--cds-global-space-10, 2rem) + var(--cds-global-space-1, 0.0625rem));--anchor-background:var(--cds-global-color-construction-50, #f1f6f8);--anchor-border-radius:var(--cds-alias-object-border-radius-200, 0.75rem);--anchor-width:calc(var(--cds-global-space-6, 0.75rem) + var(--cds-global-space-2, 0.125rem));--anchor-height:calc(var(--cds-global-space-6, 0.75rem) + var(--cds-global-space-2, 0.125rem));--toggle-speed:var(--cds-global-animation-duration-quicker, 0.15s)}.input,.input:after{display:inline-block;transition-duration:var(--toggle-speed,.15s);transition-timing-function:ease-in}.input{border-radius:var(--border-radius);border:var(--border);background:var(--background);height:var(--height);width:var(--width);position:relative;cursor:pointer;transition-property:border-color,background-color}.input:after{border-radius:var(--anchor-border-radius);background:var(--anchor-background);height:var(--anchor-height);width:var(--anchor-width);position:absolute;content:"";left:0;top:0;transition-property:transform}:host(:not([cds-motion=ready])){--toggle-speed:0}:host([_checked]){--background:var(--cds-alias-status-success, var(--cds-global-color-green-700, #42810e));--border:var(--cds-alias-object-border-width-200, 0.125rem) solid var(--background)}:host([_checked]) .input:after{transform:translate(calc(var(--cds-global-space-7,1rem) - var(--cds-global-space-1,.0625rem)),0)}:host([_disabled]) .input{opacity:.6;cursor:not-allowed}[focusable]{width:var(--width);left:0}`;export{a as default};
 //# sourceMappingURL=toggle.element.scss.js.map

package/tokens/tokens.android.xml

@@ -1,19 +1,25 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--This token format is currently experimental and may change in the future-->
 <resources>
-  <dimen name="globalLayoutSpaceXxs">2dp</dimen>
-  <dimen name="globalLayoutSpaceXs">4dp</dimen>
-  <dimen name="globalLayoutSpaceSm">6dp</dimen>
-  <dimen name="globalLayoutSpaceMd">12dp</dimen>
-  <dimen name="globalLayoutSpaceLg">24dp</dimen>
-  <dimen name="globalLayoutSpaceXl">48dp</dimen>
-  <dimen name="globalLayoutSpaceXxl">96dp</dimen>
+  <property name="globalBase">20</property>
+  <dimen name="globalScaleSpace">1dp</dimen>
+  <dimen name="globalScaleLayoutSpace">1dp</dimen>
+  <property name="globalScaleTypography">1</property>
   <dimen name="globalLayoutGridCols">12dp</dimen>
   <dimen name="globalLayoutWidthXs">576pxdp</dimen>
   <dimen name="globalLayoutWidthSm">768pxdp</dimen>
   <dimen name="globalLayoutWidthMd">992pxdp</dimen>
   <dimen name="globalLayoutWidthLg">1200pxdp</dimen>
   <dimen name="globalLayoutWidthXl">1440pxdp</dimen>
+  <dimen name="globalLayoutSpaceXxxs">2dp</dimen>
+  <dimen name="globalLayoutSpaceXxs">4dp</dimen>
+  <dimen name="globalLayoutSpaceXs">8dp</dimen>
+  <dimen name="globalLayoutSpaceSm">12dp</dimen>
+  <dimen name="globalLayoutSpaceMd">16dp</dimen>
+  <dimen name="globalLayoutSpaceLg">24dp</dimen>
+  <dimen name="globalLayoutSpaceXl">32dp</dimen>
+  <dimen name="globalLayoutSpaceXxl">48dp</dimen>
+  <dimen name="globalLayoutSpaceXxxl">64dp</dimen>
   <dimen name="globalSpace0">0dp</dimen>
   <dimen name="globalSpace1">1dp</dimen>
   <dimen name="globalSpace2">2dp</dimen>
@@ -27,7 +33,9 @@
   <dimen name="globalSpace10">32dp</dimen>
   <dimen name="globalSpace11">36dp</dimen>
   <dimen name="globalSpace12">48dp</dimen>
-  <dimen name="globalSpace13">72dp</dimen>
+  <dimen name="globalSpace13">64dp</dimen>
+  <dimen name="globalSpace14">72dp</dimen>
+  <dimen name="globalSpace15">96dp</dimen>
   <color name="globalColorBlack">#000000</color>
   <color name="globalColorWhite">#ffffff</color>
   <color name="globalColorGreen50">#eefce3</color>
@@ -140,6 +148,17 @@
   <color name="globalColorYellow800">#855800</color>
   <color name="globalColorYellow900">#5c3d00</color>
   <color name="globalColorYellow1000">#422c00</color>
+  <color name="globalColorLime50">#fcffe0</color>
+  <color name="globalColorLime100">#f5fdaa</color>
+  <color name="globalColorLime200">#e7f471</color>
+  <color name="globalColorLime300">#d8ea3e</color>
+  <color name="globalColorLime400">#c9dc18</color>
+  <color name="globalColorLime500">#b4c70a</color>
+  <color name="globalColorLime600">#9eae09</color>
+  <color name="globalColorLime700">#818f00</color>
+  <color name="globalColorLime800">#657000</color>
+  <color name="globalColorLime900">#373d00</color>
+  <color name="globalColorLime1000">#202400</color>
   <color name="globalColorTangerine50">#fff0e5</color>
   <color name="globalColorTangerine100">#ffdbc2</color>
   <color name="globalColorTangerine200">#fcbe92</color>
@@ -272,8 +291,6 @@
   <property name="globalTypographyFontSize7">24</property>
   <property name="globalTypographyFontSize8">32</property>
   <property name="globalTypographyFontSize9">40</property>
-  <property name="globalTypographyBaseFontSize">125%</property>
-  <property name="globalTypographyBaseFontSizePx">20</property>
   <property name="globalTypographyFontFamily">'Clarity City', 'Avenir Next', sans-serif</property>
   <property name="globalTypographyHeaderFontFamily">'Clarity City', 'Avenir Next', sans-serif</property>
   <property name="globalTypographyMonospaceFontFamily">ui-monospace, Consolas, Menlo, Monaco, monospace</property>
@@ -336,7 +353,6 @@
   <property name="globalAnimationEasingPrimary">cubic-bezier(0,.99,0,.99)</property>
   <property name="globalAnimationEasingSecondary">cubic-bezier(0, 1.5, 0.5, 1)</property>
   <property name="globalAnimationEasingLoop">cubic-bezier(0.17, 0.4, 0.8, 0.79)</property>
-  <property name="globalBase">20</property>
   <property name="aliasObjectBorderRadius100">4</property>
   <property name="aliasObjectBorderRadius200">12</property>
   <property name="aliasObjectBorderRadius300">50%</property>
@@ -347,9 +363,9 @@
   <color name="aliasObjectBorderColor" alias="globalColorConstruction200">#cbd4d8</color>
   <color name="aliasObjectBorderColorTint" alias="globalColorConstruction100">#e3eaed</color>
   <color name="aliasObjectBorderColorShade" alias="globalColorConstruction300">#aeb8bc</color>
-  <property name="aliasObjectShadow100">0 1px 3px 0 hsla(198, 30%, 15%, 0.5)</property>
-  <property name="aliasObjectShadow200">0 1px 3px 0 hsla(198, 30%, 15%, 0.3)</property>
-  <property name="aliasObjectShadow300">0 1px 3px 0 hsla(198, 30%, 15%, 0.2)</property>
+  <property name="aliasObjectShadow100">0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.5)</property>
+  <property name="aliasObjectShadow200">0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.3)</property>
+  <property name="aliasObjectShadow300">0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.2)</property>
   <property name="aliasObjectOpacity0">hsla(0, 0%, 0%, 0)</property>
   <property name="aliasObjectOpacity100">hsla(0, 0%, 0%, 0.2)</property>
   <property name="aliasObjectOpacity200">hsla(0, 0%, 0%, 0.4)</property>
@@ -400,4 +416,7 @@
   <color name="aliasStatusAlt" alias="globalColorViolet700">#7c12a5</color>
   <color name="aliasStatusAltTint" alias="globalColorViolet600">#9b32c8</color>
   <color name="aliasStatusAltShade" alias="globalColorViolet900">#440061</color>
+  <property name="internalScale1">calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-layout-space))</property>
+  <property name="internalScale2">calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-space))</property>
+  <property name="internalScale3">calc((1rem / var(--cds-global-base)) * var(--cds-global-scale-typography))</property>
 </resources>

package/tokens/tokens.d.ts

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

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%";
@@ -345,9 +361,9 @@ let aliasObjectBorderWidth400 = CGFloat(4.00);
 let aliasObjectBorderColor = UIColor(red: 203, green: 212, blue: 216, alpha: 1.0);
 let aliasObjectBorderColorTint = UIColor(red: 227, green: 234, blue: 237, alpha: 1.0);
 let aliasObjectBorderColorShade = UIColor(red: 174, green: 184, blue: 188, alpha: 1.0);
-let aliasObjectShadow100 = "0 1px 3px 0 hsla(198, 30%, 15%, 0.5)";
-let aliasObjectShadow200 = "0 1px 3px 0 hsla(198, 30%, 15%, 0.3)";
-let aliasObjectShadow300 = "0 1px 3px 0 hsla(198, 30%, 15%, 0.2)";
+let aliasObjectShadow100 = "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.5)";
+let aliasObjectShadow200 = "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.3)";
+let aliasObjectShadow300 = "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.2)";
 let aliasObjectOpacity0 = "hsla(0, 0%, 0%, 0)";
 let aliasObjectOpacity100 = "hsla(0, 0%, 0%, 0.2)";
 let aliasObjectOpacity200 = "hsla(0, 0%, 0%, 0.4)";
@@ -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
   },
@@ -1990,13 +2082,13 @@
     "alias": "globalColorConstruction300"
   },
   "aliasObjectShadow100": {
-    "value": "0 1px 3px 0 hsla(198, 30%, 15%, 0.5)"
+    "value": "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.5)"
   },
   "aliasObjectShadow200": {
-    "value": "0 1px 3px 0 hsla(198, 30%, 15%, 0.3)"
+    "value": "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.3)"
   },
   "aliasObjectShadow300": {
-    "value": "0 1px 3px 0 hsla(198, 30%, 15%, 0.2)"
+    "value": "0 calc((1 / var(--cds-global-base, 20)) * 1rem) calc((3 / var(--cds-global-base, 20)) * 1rem) 0 hsla(198, 30%, 15%, 0.2)"
   },
   "aliasObjectOpacity0": {
     "value": "hsla(0, 0%, 0%, 0)"
@@ -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))"
   }
 }