@cds/core 5.5.8 → 5.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_virtual/_virtual_library-entry-points +1 -1
- package/alert/alert-group.element.d.ts +3 -3
- package/alert/alert.element.d.ts +2 -2
- package/badge/badge.element.d.ts +1 -1
- package/button/button.element.d.ts +1 -1
- package/custom-elements.json +9105 -6755
- package/custom-elements.legacy.json +240 -0
- package/forms/control/control.element.d.ts +3 -3
- package/forms/control-group/control-group.element.d.ts +2 -2
- package/forms/control-inline/control-inline.element.d.ts +1 -0
- package/forms/control-inline/control-inline.element.js +1 -1
- package/forms/control-inline/control-inline.element.js.map +1 -1
- package/forms/control-message/control-message.element.d.ts +1 -1
- package/forms/form-group/form-group.element.d.ts +2 -2
- package/global.css +1 -0
- package/global.min.css +1 -1
- package/icon/icon.element.d.ts +5 -5
- package/internal/base/base.element.scss.js +1 -1
- package/internal/utils/global.js +1 -1
- package/navigation/navigation-item.element.js +1 -1
- package/navigation/navigation-item.element.js.map +1 -1
- package/navigation/navigation-item.element.scss.js +2 -2
- package/navigation/navigation-start.element.js +1 -1
- package/navigation/navigation-start.element.js.map +1 -1
- package/navigation/navigation-start.element.scss.js +2 -2
- package/navigation/navigation.element.js +1 -3
- package/navigation/navigation.element.js.map +1 -1
- package/navigation/navigation.element.scss.js +1 -1
- package/package.json +19 -1
- package/progress-circle/progress-circle.element.d.ts +2 -2
- package/radio/radio-group.element.js +1 -1
- package/radio/radio-group.element.js.map +1 -1
- package/selection-panels/checkbox/checkbox-panel.element.d.ts +35 -0
- package/selection-panels/checkbox/checkbox-panel.element.js +2 -0
- package/selection-panels/checkbox/checkbox-panel.element.js.map +1 -0
- package/selection-panels/checkbox/index.d.ts +2 -0
- package/selection-panels/checkbox/index.js +2 -0
- package/selection-panels/checkbox/index.js.map +1 -0
- package/selection-panels/checkbox/register.d.ts +6 -0
- package/selection-panels/checkbox/register.js +2 -0
- package/selection-panels/checkbox/register.js.map +1 -0
- package/selection-panels/index.d.ts +11 -0
- package/selection-panels/index.js +2 -0
- package/selection-panels/index.js.map +1 -0
- package/selection-panels/radio/index.d.ts +2 -0
- package/selection-panels/radio/index.js +2 -0
- package/selection-panels/radio/index.js.map +1 -0
- package/selection-panels/radio/radio-panel.element.d.ts +35 -0
- package/selection-panels/radio/radio-panel.element.js +2 -0
- package/selection-panels/radio/radio-panel.element.js.map +1 -0
- package/selection-panels/radio/register.d.ts +6 -0
- package/selection-panels/radio/register.js +2 -0
- package/selection-panels/radio/register.js.map +1 -0
- package/selection-panels/register.d.ts +8 -0
- package/selection-panels/register.js +2 -0
- package/selection-panels/register.js.map +1 -0
- package/selection-panels/shared/selection-panel.element.scss.js +6 -0
- package/selection-panels/shared/selection-panel.element.scss.js.map +1 -0
- package/selection-panels/shared/selection-panel.interfaces.d.ts +1 -0
- package/styles/module.tokens.css +1 -0
- package/styles/module.tokens.min.css +1 -1
- package/styles/theme.dark.css +1 -0
- package/styles/theme.dark.min.css +1 -1
- package/tag/tag.element.d.ts +1 -1
- package/tokens/tokens.android.xml +1 -0
- package/tokens/tokens.d.ts +1 -0
- package/tokens/tokens.ios.swift +1 -0
- package/tokens/tokens.js +1 -0
- package/tokens/tokens.json +8 -0
- package/tokens/tokens.scss +1 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":null,"names":[],"mappings":""}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { CdsRadio } from '@cds/core/radio';
|
|
2
|
+
import { SelectionPanelSizes } from '../shared/selection-panel.interfaces.js';
|
|
3
|
+
/**
|
|
4
|
+
* Checkbox
|
|
5
|
+
*
|
|
6
|
+
* ```typescript
|
|
7
|
+
* import '@cds/core/checkbox/register.js';
|
|
8
|
+
* ```
|
|
9
|
+
*
|
|
10
|
+
* ```html
|
|
11
|
+
* <cds-radio>
|
|
12
|
+
* <label>
|
|
13
|
+
* <div cds-layout="vertical align:center">
|
|
14
|
+
* <span cds-text="section">VM One</span>
|
|
15
|
+
* <cds-icon shape="vm" badge="info"></cds-icon>
|
|
16
|
+
* <p>Machines for orchestration and automation.</p>
|
|
17
|
+
* </div>
|
|
18
|
+
* </label>
|
|
19
|
+
* <input type="radio" />
|
|
20
|
+
* <cds-control-message>message text</cds-control-message>
|
|
21
|
+
* </cds-radio>
|
|
22
|
+
* ```
|
|
23
|
+
*
|
|
24
|
+
* @element cds-radio
|
|
25
|
+
* @slot - For projecting checkbox and it's complex label
|
|
26
|
+
* @cssprop --width
|
|
27
|
+
* @cssprop --height
|
|
28
|
+
* @cssprop --border
|
|
29
|
+
* @cssprop --box-shadow
|
|
30
|
+
*/
|
|
31
|
+
export declare class CdsRadioPanel extends CdsRadio {
|
|
32
|
+
size: SelectionPanelSizes;
|
|
33
|
+
static get styles(): import("lit").CSSResultGroup[];
|
|
34
|
+
protected get internalLabelTemplate(): import("lit-html").TemplateResult<1>;
|
|
35
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{__decorate as t}from"tslib";import{html as e}from"lit";import{CdsRadio as s}from"@cds/core/radio";import r from"../shared/selection-panel.element.scss.js";import{property as o}from"@cds/core/internal";class i extends s{constructor(){super(...arguments),this.size="default"}static get styles(){return[...super.styles,r]}get internalLabelTemplate(){return e`<slot name="label" @slotchange="${()=>this.associateInputAndLabel()}"></slot>`}}t([o({type:String})],i.prototype,"size",void 0);export{i as CdsRadioPanel};
|
|
2
|
+
//# sourceMappingURL=radio-panel.element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio-panel.element.js","sources":["../../../../src/selection-panels/radio/radio-panel.element.ts"],"sourcesContent":null,"names":["CdsRadioPanel","CdsRadio","[object Object]","super","arguments","this","size","styles","internalLabelTemplate","html","associateInputAndLabel","__decorate","property","type","String","prototype"],"mappings":"gNAsCO,MAAMA,UAAsBC,EAC/BC,cACIC,SAASC,WACTC,KAAKC,KAAO,UAEhBC,oBACI,MAAO,IAAIJ,MAAMI,OAAQA,GAE7BC,4BACI,OAAOC,CAAK,mCAAkC,IAAMJ,KAAKK,qCAGjEC,EAAW,CACPC,EAAS,CAAEC,KAAMC,UAClBd,EAAce,UAAW,YAAQ"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register.js","sources":["../../../../src/selection-panels/radio/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsRadioPanel"],"mappings":"oHAOAA,EAAsB,kBAAmBC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CdsCheckboxPanel } from './checkbox/checkbox-panel.element.js';
|
|
2
|
+
import { CdsRadioPanel } from './radio/radio-panel.element.js';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'cds-checkbox-panel': CdsCheckboxPanel;
|
|
6
|
+
'cds-radio-panel': CdsRadioPanel;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{registerElementSafely as e}from"@cds/core/internal";import{CdsCheckboxPanel as o}from"./checkbox/checkbox-panel.element.js";import{CdsRadioPanel as r}from"./radio/radio-panel.element.js";e("cds-checkbox-panel",o),e("cds-radio-panel",r);
|
|
2
|
+
//# sourceMappingURL=register.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register.js","sources":["../../../src/selection-panels/register.ts"],"sourcesContent":null,"names":["registerElementSafely","CdsCheckboxPanel","CdsRadioPanel"],"mappings":"kMAQAA,EAAsB,qBAAsBC,GAC5CD,EAAsB,kBAAmBE"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import{css as a}from"lit";var l=a`/*!
|
|
2
|
+
* Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
|
|
3
|
+
* This software is released under MIT license.
|
|
4
|
+
* The full license information can be found in LICENSE in the root directory of this project.
|
|
5
|
+
*/:host{--panel-width:calc(var(--cds-global-space-8, calc((18 / var(--cds-global-base, 20)) * 1rem)) * 10);--panel-height:calc(var(--cds-global-space-8, calc((18 / var(--cds-global-base, 20)) * 1rem)) * 10);--panel-background:var(--cds-alias-object-interaction-background, var(--cds-global-color-white, white));--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--box-shadow:0 var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)) 0 var(--cds-alias-object-interaction-border-color, var(--cds-global-color-construction-500, #6a7a81));--padding:var(--cds-global-layout-space-md, calc((12 / var(--cds-global-base, 20)) * 1rem))}.private-host{gap:0!important;position:relative;width:var(--panel-width);height:var(--panel-height)}.input,[focusable]{left:initial;margin:0 0 var(--cds-global-layout-space-sm,calc((6 / var(--cds-global-base,20)) * 1rem)) var(--cds-global-layout-space-xs,calc((4 / var(--cds-global-base,20)) * 1rem));position:absolute;right:var(--cds-global-space-4,calc((6 / var(--cds-global-base,20)) * 1rem));top:var(--cds-global-space-4,calc((6 / var(--cds-global-base,20)) * 1rem));z-index:99}::slotted(label){box-shadow:var(--box-shadow);background:var(--panel-background);border:var(--border);border-radius:var(--cds-alias-object-border-radius-100,calc((4 / var(--cds-global-base,20)) * 1rem));cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:var(--padding);text-wrap:normal;white-space:normal;word-break:break-word;overflow:hidden;width:var(--panel-width)!important;height:var(--panel-height)}:host([_disabled][_checked]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))!important}:host([_disabled]),:host([_disabled][_checked]),:host([_disabled][_checked]) .input{--box-shadow:0 var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)) 0 var(--cds-alias-status-disabled, var(--cds-global-color-construction-300, #aeb8bc))}:host([_disabled][_checked]) .input{--border:var(--border)}:host([_disabled]){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-disabled-tint, var(--cds-global-color-construction-200, #cbd4d8))}:host([status=error]) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200));--box-shadow:0 var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)) 0 var(--cds-alias-status-danger, var(--cds-global-color-red-700, #e02200))}:host(:hover:not([_disabled])) .input,:host(:hover:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--box-shadow:0 var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)) 0 var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([status=error]:hover:not([_disabled])) .input,:host([status=error]:hover:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-danger-dark, var(--cds-global-color-red-900, #8f1500));--box-shadow:0 var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)) 0 var(--cds-alias-status-danger-dark, var(--cds-global-color-red-900, #8f1500))}:host([_checked]:hover:not([_disabled])) .input{--border:var(--border)}:host([_checked]:not([_disabled])) ::slotted(label){--border:var(--cds-alias-object-border-width-100, calc((1 / var(--cds-global-base, 20)) * 1rem)) solid var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad));--box-shadow:0 var(--cds-global-space-2, calc((2 / var(--cds-global-base, 20)) * 1rem)) 0 var(--cds-alias-status-info, var(--cds-global-color-blue-700, #0079ad))}:host([size=sm]),:host([size=sm]) ::slotted(label){--panel-width:calc(var(--cds-global-space-8, calc((18 / var(--cds-global-base, 20)) * 1rem)) * 10);--panel-height:calc(var(--cds-global-space-8, calc((18 / var(--cds-global-base, 20)) * 1rem)) * 10)}:host([size=md]),:host([size=md]) ::slotted(label){--panel-width:calc(var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem)) * 20);--panel-height:calc(var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem)) * 20)}:host([size=lg]),:host([size=lg]) ::slotted(label){--panel-width:calc(var(--cds-global-space-8, calc((18 / var(--cds-global-base, 20)) * 1rem)) * 20);--panel-height:calc(var(--cds-global-space-8, calc((18 / var(--cds-global-base, 20)) * 1rem)) * 20)}:host([size=xl]),:host([size=xl]) ::slotted(label){--panel-width:calc(var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem)) * 40);--panel-height:calc(var(--cds-global-space-6, calc((12 / var(--cds-global-base, 20)) * 1rem)) * 40)}`;export default l;
|
|
6
|
+
//# sourceMappingURL=selection-panel.element.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selection-panel.element.scss.js","sources":[],"sourcesContent":null,"names":[],"mappings":";;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare type SelectionPanelSizes = 'default' | 'sm' | 'md' | 'lg' | 'xl';
|
package/styles/module.tokens.css
CHANGED
|
@@ -388,6 +388,7 @@
|
|
|
388
388
|
--cds-alias-status-danger: var(--cds-global-color-red-700);
|
|
389
389
|
--cds-alias-status-danger-tint: var(--cds-global-color-red-50);
|
|
390
390
|
--cds-alias-status-danger-shade: var(--cds-global-color-red-800);
|
|
391
|
+
--cds-alias-status-danger-dark: var(--cds-global-color-red-900);
|
|
391
392
|
--cds-alias-status-neutral: var(--cds-global-color-construction-600);
|
|
392
393
|
--cds-alias-status-neutral-tint: var(--cds-global-color-construction-50);
|
|
393
394
|
--cds-alias-status-neutral-shade: var(--cds-global-color-construction-700);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--cds-global-layout-space-xxs:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xs:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-sm:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-md:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-lg:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xl:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xxl:calc((96 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-grid-cols:12;--cds-global-layout-width-xs:576px;--cds-global-layout-width-sm:768px;--cds-global-layout-width-md:992px;--cds-global-layout-width-lg:1200px;--cds-global-layout-width-xl:1440px;--cds-global-space-0:calc((0 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-1:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-2:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-3:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-4:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-5:calc((8 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-6:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-7:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-8:calc((18 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-9:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-10:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-11:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-12:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-13:calc((72 / var(--cds-global-base, 20)) * 1rem);--cds-global-color-black:hsl(0, 0%, 0%);--cds-global-color-white:hsl(0, 0%, 100%);--cds-global-color-green-50:hsl(93, 80%, 94%);--cds-global-color-green-100:hsl(93, 80%, 83%);--cds-global-color-green-200:hsl(93, 80%, 70%);--cds-global-color-green-300:hsl(93, 80%, 56%);--cds-global-color-green-400:hsl(93, 80%, 48%);--cds-global-color-green-500:hsl(93, 80%, 44%);--cds-global-color-green-600:hsl(93, 80%, 37%);--cds-global-color-green-700:hsl(93, 80%, 28%);--cds-global-color-green-800:hsl(93, 80%, 23%);--cds-global-color-green-900:hsl(93, 80%, 17%);--cds-global-color-green-1000:hsl(93, 80%, 12%);--cds-global-color-blue-50:hsl(198, 100%, 95%);--cds-global-color-blue-100:hsl(198, 100%, 87%);--cds-global-color-blue-200:hsl(198, 100%, 78%);--cds-global-color-blue-300:hsl(198, 100%, 70%);--cds-global-color-blue-400:hsl(198, 100%, 59%);--cds-global-color-blue-500:hsl(198, 100%, 48%);--cds-global-color-blue-600:hsl(198, 100%, 43%);--cds-global-color-blue-700:hsl(198, 100%, 34%);--cds-global-color-blue-800:hsl(198, 100%, 27%);--cds-global-color-blue-900:hsl(198, 100%, 21%);--cds-global-color-blue-1000:hsl(198, 100%, 15%);--cds-global-color-violet-50:hsl(282, 100%, 97%);--cds-global-color-violet-100:hsl(282, 80%, 91%);--cds-global-color-violet-200:hsl(282, 73%, 83%);--cds-global-color-violet-300:hsl(282, 66%, 74%);--cds-global-color-violet-400:hsl(282, 60%, 65%);--cds-global-color-violet-500:hsl(282, 60%, 57%);--cds-global-color-violet-600:hsl(282, 60%, 49%);--cds-global-color-violet-700:hsl(283, 80%, 36%);--cds-global-color-violet-800:hsl(282, 100%, 26%);--cds-global-color-violet-900:hsl(282, 100%, 19%);--cds-global-color-violet-1000:hsl(282, 100%, 14%);--cds-global-color-red-50:hsl(9, 100%, 97%);--cds-global-color-red-100:hsl(9, 100%, 94%);--cds-global-color-red-200:hsl(9, 100%, 88%);--cds-global-color-red-300:hsl(9, 100%, 79%);--cds-global-color-red-400:hsl(9, 100%, 71%);--cds-global-color-red-500:hsl(9, 100%, 65%);--cds-global-color-red-600:hsl(9, 100%, 60%);--cds-global-color-red-700:hsl(9, 100%, 44%);--cds-global-color-red-800:hsl(9, 100%, 38%);--cds-global-color-red-900:hsl(9, 100%, 28%);--cds-global-color-red-1000:hsl(9, 100%, 22%);--cds-global-color-ochre-50:hsl(41, 100%, 96%);--cds-global-color-ochre-100:hsl(41, 100%, 92%);--cds-global-color-ochre-200:hsl(41, 100%, 86%);--cds-global-color-ochre-300:hsl(41, 100%, 78%);--cds-global-color-ochre-400:hsl(41, 100%, 70%);--cds-global-color-ochre-500:hsl(40, 100%, 59%);--cds-global-color-ochre-600:hsl(39, 100%, 50%);--cds-global-color-ochre-700:hsl(38, 100%, 42%);--cds-global-color-ochre-800:hsl(37, 100%, 32%);--cds-global-color-ochre-900:hsl(36, 100%, 27%);--cds-global-color-ochre-1000:hsl(35, 100%, 19%);--cds-global-color-lavender-50:hsl(238, 100%, 96%);--cds-global-color-lavender-100:hsl(238, 58%, 88%);--cds-global-color-lavender-200:hsl(238, 53%, 79%);--cds-global-color-lavender-300:hsl(238, 52%, 70%);--cds-global-color-lavender-400:hsl(238, 58%, 64%);--cds-global-color-lavender-500:hsl(238, 59%, 58%);--cds-global-color-lavender-600:hsl(238, 60%, 52%);--cds-global-color-lavender-700:hsl(238, 69%, 45%);--cds-global-color-lavender-800:hsl(238, 100%, 32%);--cds-global-color-lavender-900:hsl(238, 100%, 22%);--cds-global-color-lavender-1000:hsl(238, 100%, 14%);--cds-global-color-azure-50:hsl(211, 100%, 95%);--cds-global-color-azure-100:hsl(211, 100%, 88%);--cds-global-color-azure-200:hsl(211, 100%, 81%);--cds-global-color-azure-300:hsl(211, 100%, 70%);--cds-global-color-azure-400:hsl(211, 100%, 62%);--cds-global-color-azure-500:hsl(211, 100%, 54%);--cds-global-color-azure-600:hsl(211, 100%, 46%);--cds-global-color-azure-700:hsl(211, 100%, 37%);--cds-global-color-azure-800:hsl(211, 100%, 26%);--cds-global-color-azure-900:hsl(211, 100%, 18%);--cds-global-color-azure-1000:hsl(211, 100%, 14%);--cds-global-color-aqua-50:hsl(184, 100%, 96%);--cds-global-color-aqua-100:hsl(184, 100%, 86%);--cds-global-color-aqua-200:hsl(184, 100%, 75%);--cds-global-color-aqua-300:hsl(184, 100%, 62%);--cds-global-color-aqua-400:hsl(184, 100%, 48%);--cds-global-color-aqua-500:hsl(184, 100%, 43%);--cds-global-color-aqua-600:hsl(184, 100%, 34%);--cds-global-color-aqua-700:hsl(184, 100%, 25%);--cds-global-color-aqua-800:hsl(184, 100%, 18%);--cds-global-color-aqua-900:hsl(184, 100%, 13%);--cds-global-color-aqua-1000:hsl(184, 100%, 10%);--cds-global-color-jade-50:hsl(160, 83%, 95%);--cds-global-color-jade-100:hsl(160, 82%, 88%);--cds-global-color-jade-200:hsl(160, 78%, 78%);--cds-global-color-jade-300:hsl(160, 69%, 65%);--cds-global-color-jade-400:hsl(160, 69%, 53%);--cds-global-color-jade-500:hsl(160, 64%, 45%);--cds-global-color-jade-600:hsl(160, 69%, 36%);--cds-global-color-jade-700:hsl(160, 64%, 30%);--cds-global-color-jade-800:hsl(160, 100%, 21%);--cds-global-color-jade-900:hsl(160, 70%, 21%);--cds-global-color-jade-1000:hsl(160, 69%, 19%);--cds-global-color-yellow-50:hsl(50, 100%, 95%);--cds-global-color-yellow-100:hsl(50, 100%, 84%);--cds-global-color-yellow-200:hsl(50, 100%, 73%);--cds-global-color-yellow-300:hsl(50, 100%, 57%);--cds-global-color-yellow-400:hsl(46, 100%, 52%);--cds-global-color-yellow-500:hsl(44, 100%, 47%);--cds-global-color-yellow-600:hsl(42, 100%, 42%);--cds-global-color-yellow-700:hsl(40, 100%, 35%);--cds-global-color-yellow-800:hsl(40, 100%, 26%);--cds-global-color-yellow-900:hsl(40, 100%, 18%);--cds-global-color-yellow-1000:hsl(40, 100%, 13%);--cds-global-color-tangerine-50:hsl(25, 100%, 95%);--cds-global-color-tangerine-100:hsl(25, 100%, 88%);--cds-global-color-tangerine-200:hsl(25, 94%, 78%);--cds-global-color-tangerine-300:hsl(25, 100%, 72%);--cds-global-color-tangerine-400:hsl(25, 100%, 62%);--cds-global-color-tangerine-500:hsl(25, 100%, 48%);--cds-global-color-tangerine-600:hsl(25, 100%, 41%);--cds-global-color-tangerine-700:hsl(25, 100%, 34%);--cds-global-color-tangerine-800:hsl(25, 100%, 25%);--cds-global-color-tangerine-900:hsl(25, 100%, 19%);--cds-global-color-tangerine-1000:hsl(25, 100%, 15%);--cds-global-color-magenta-50:hsl(345, 100%, 95%);--cds-global-color-magenta-100:hsl(345, 100%, 87%);--cds-global-color-magenta-200:hsl(345, 100%, 79%);--cds-global-color-magenta-300:hsl(345, 100%, 70%);--cds-global-color-magenta-400:hsl(345, 100%, 61%);--cds-global-color-magenta-500:hsl(345, 81%, 50%);--cds-global-color-magenta-600:hsl(345, 83%, 40%);--cds-global-color-magenta-700:hsl(345, 91%, 31%);--cds-global-color-magenta-800:hsl(345, 100%, 24%);--cds-global-color-magenta-900:hsl(345, 100%, 19%);--cds-global-color-magenta-1000:hsl(345, 100%, 15%);--cds-global-color-pink-50:hsl(324, 100%, 97%);--cds-global-color-pink-100:hsl(324, 95%, 91%);--cds-global-color-pink-200:hsl(324, 84%, 81%);--cds-global-color-pink-300:hsl(324, 78%, 70%);--cds-global-color-pink-400:hsl(324, 78%, 62%);--cds-global-color-pink-500:hsl(324, 64%, 51%);--cds-global-color-pink-600:hsl(324, 80%, 39%);--cds-global-color-pink-700:hsl(324, 100%, 30%);--cds-global-color-pink-800:hsl(324, 100%, 24%);--cds-global-color-pink-900:hsl(324, 100%, 18%);--cds-global-color-pink-1000:hsl(324, 100%, 15%);--cds-global-color-warm-gray-50:hsl(282, 3%, 97%);--cds-global-color-warm-gray-100:hsl(282, 3%, 92%);--cds-global-color-warm-gray-200:hsl(282, 3%, 84%);--cds-global-color-warm-gray-300:hsl(282, 3%, 74%);--cds-global-color-warm-gray-400:hsl(282, 3%, 63%);--cds-global-color-warm-gray-500:hsl(282, 3%, 54%);--cds-global-color-warm-gray-600:hsl(282, 3%, 43%);--cds-global-color-warm-gray-700:hsl(282, 3%, 35%);--cds-global-color-warm-gray-800:hsl(282, 3%, 28%);--cds-global-color-warm-gray-900:hsl(282, 3%, 20%);--cds-global-color-warm-gray-1000:hsl(282, 3%, 14%);--cds-global-color-slate-50:hsl(238, 20%, 96%);--cds-global-color-slate-100:hsl(238, 20%, 91%);--cds-global-color-slate-200:hsl(238, 20%, 82%);--cds-global-color-slate-300:hsl(238, 20%, 73%);--cds-global-color-slate-400:hsl(238, 20%, 63%);--cds-global-color-slate-500:hsl(238, 23%, 56%);--cds-global-color-slate-600:hsl(238, 24%, 49%);--cds-global-color-slate-700:hsl(238, 28%, 38%);--cds-global-color-slate-800:hsl(238, 28%, 29%);--cds-global-color-slate-900:hsl(238, 28%, 22%);--cds-global-color-slate-1000:hsl(238, 28%, 14%);--cds-global-color-ice-50:hsl(211, 100%, 97%);--cds-global-color-ice-100:hsl(211, 58%, 90%);--cds-global-color-ice-200:hsl(211, 53%, 81%);--cds-global-color-ice-300:hsl(211, 49%, 70%);--cds-global-color-ice-400:hsl(211, 47%, 62%);--cds-global-color-ice-500:hsl(211, 47%, 53%);--cds-global-color-ice-600:hsl(211, 56%, 44%);--cds-global-color-ice-700:hsl(211, 69%, 34%);--cds-global-color-ice-800:hsl(211, 69%, 27%);--cds-global-color-ice-900:hsl(211, 100%, 20%);--cds-global-color-ice-1000:hsl(211, 100%, 14%);--cds-global-color-cool-gray-50:hsl(211, 20%, 96%);--cds-global-color-cool-gray-100:hsl(211, 20%, 90%);--cds-global-color-cool-gray-200:hsl(211, 20%, 81%);--cds-global-color-cool-gray-300:hsl(211, 20%, 72%);--cds-global-color-cool-gray-400:hsl(211, 20%, 61%);--cds-global-color-cool-gray-500:hsl(211, 20%, 53%);--cds-global-color-cool-gray-600:hsl(211, 20%, 44%);--cds-global-color-cool-gray-700:hsl(211, 23%, 36%);--cds-global-color-cool-gray-800:hsl(211, 30%, 28%);--cds-global-color-cool-gray-900:hsl(211, 40%, 22%);--cds-global-color-cool-gray-1000:hsl(211, 63%, 14%);--cds-global-color-tan-50:hsl(41, 23%, 96%);--cds-global-color-tan-100:hsl(41, 22%, 91%);--cds-global-color-tan-200:hsl(41, 27%, 82%);--cds-global-color-tan-300:hsl(41, 23%, 68%);--cds-global-color-tan-400:hsl(41, 23%, 58%);--cds-global-color-tan-500:hsl(41, 20%, 47%);--cds-global-color-tan-600:hsl(41, 20%, 40%);--cds-global-color-tan-700:hsl(41, 20%, 32%);--cds-global-color-tan-800:hsl(41, 23%, 26%);--cds-global-color-tan-900:hsl(41, 23%, 21%);--cds-global-color-tan-1000:hsl(41, 22%, 16%);--cds-global-color-construction-50:hsl(198, 36%, 96%);--cds-global-color-construction-100:hsl(198, 20%, 91%);--cds-global-color-construction-200:hsl(198, 14%, 82%);--cds-global-color-construction-300:hsl(198, 10%, 71%);--cds-global-color-construction-400:hsl(198, 9%, 56%);--cds-global-color-construction-500:hsl(198, 10%, 46%);--cds-global-color-construction-600:hsl(198, 14%, 36%);--cds-global-color-construction-700:hsl(198, 19%, 28%);--cds-global-color-construction-800:hsl(198, 23%, 23%);--cds-global-color-construction-900:hsl(198, 28%, 18%);--cds-global-color-construction-1000:hsl(198, 30%, 15%);--cds-global-color-gray-0:hsl(0, 0%, 100%);--cds-global-color-gray-50:hsl(0, 0%, 98%);--cds-global-color-gray-100:hsl(0, 0%, 95%);--cds-global-color-gray-200:hsl(0, 0%, 91%);--cds-global-color-gray-300:hsl(0, 0%, 87%);--cds-global-color-gray-400:hsl(0, 0%, 80%);--cds-global-color-gray-500:hsl(0, 0%, 70%);--cds-global-color-gray-600:hsl(0, 0%, 55%);--cds-global-color-gray-700:hsl(0, 0%, 40%);--cds-global-color-gray-800:hsl(0, 0%, 27%);--cds-global-color-gray-900:hsl(0, 0%, 20%);--cds-global-color-gray-1000:hsl(0, 0%, 0%);--cds-global-typography-color-100:var(--cds-global-color-white);--cds-global-typography-color-200:var(--cds-global-color-construction-600);--cds-global-typography-color-300:var(--cds-global-color-construction-800);--cds-global-typography-color-400:var(--cds-global-color-construction-900);--cds-global-typography-color-500:var(--cds-global-color-black);--cds-global-typography-font-weight-light:300;--cds-global-typography-font-weight-regular:400;--cds-global-typography-font-weight-medium:500;--cds-global-typography-font-weight-semibold:600;--cds-global-typography-font-weight-bold:600;--cds-global-typography-font-weight-extrabold:600;--cds-global-typography-font-size-0:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-1:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-2:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-3:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-4:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-5:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-6:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-7:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-8:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-9:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-base-font-size:125%;--cds-global-typography-base-font-size-px:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-header-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-monospace-font-family:ui-monospace, Consolas, Menlo, Monaco, monospace;--cds-global-typography-top-gap-height:0.1475em;--cds-global-typography-ascender-height:0.1703em;--cds-global-typography-x-height:0.517em;--cds-global-typography-link-color:var(--cds-global-color-blue-800);--cds-global-typography-link-color-hover:var(--cds-global-color-blue-900);--cds-global-typography-link-color-visited:var(--cds-global-color-lavender-600);--cds-global-typography-link-color-visited-hover:var(--cds-global-color-lavender-700);--cds-global-typography-body-font-size:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-body-line-height:1.42857em;--cds-global-typography-body-letter-spacing:-0.014286em;--cds-global-typography-body-font-weight:400;--cds-global-typography-display-font-size:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-display-line-height:1.1em;--cds-global-typography-display-letter-spacing:-0.0125em;--cds-global-typography-display-font-weight:400;--cds-global-typography-heading-font-size:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-heading-line-height:1.125em;--cds-global-typography-heading-letter-spacing:-0.0125em;--cds-global-typography-heading-font-weight:400;--cds-global-typography-title-font-size:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-title-line-height:1.16667em;--cds-global-typography-title-letter-spacing:-0.008333em;--cds-global-typography-title-font-weight:400;--cds-global-typography-section-font-size:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-section-line-height:1.2em;--cds-global-typography-section-letter-spacing:-0.01em;--cds-global-typography-section-font-weight:400;--cds-global-typography-subsection-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-subsection-line-height:1.25em;--cds-global-typography-subsection-letter-spacing:-0.0125em;--cds-global-typography-subsection-font-weight:400;--cds-global-typography-message-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-message-line-height:1.25em;--cds-global-typography-message-letter-spacing:-0.0125em;--cds-global-typography-message-font-weight:calc((400 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-font-size:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-line-height:1.23077em;--cds-global-typography-secondary-letter-spacing:-0.007692em;--cds-global-typography-secondary-font-weight:400;--cds-global-typography-caption-font-size:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-caption-line-height:1.454545em;--cds-global-typography-caption-letter-spacing:0.018182em;--cds-global-typography-caption-font-weight:400;--cds-global-typography-smallcaption-font-size:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-smallcaption-line-height:1.2em;--cds-global-typography-smallcaption-letter-spacing:0.05em;--cds-global-typography-smallcaption-font-weight:500;--cds-global-animation-duration-instant:0s;--cds-global-animation-duration-quickest:0.1s;--cds-global-animation-duration-quicker:0.15s;--cds-global-animation-duration-quick:0.2s;--cds-global-animation-duration-secondary:0.3s;--cds-global-animation-duration-primary:0.4s;--cds-global-animation-duration-slow:0.5s;--cds-global-animation-duration-slower:0.7s;--cds-global-animation-duration-slowest:0.8s;--cds-global-animation-easing-primary:cubic-bezier(0,.99,0,.99);--cds-global-animation-easing-secondary:cubic-bezier(0, 1.5, 0.5, 1);--cds-global-animation-easing-loop:cubic-bezier(0.17, 0.4, 0.8, 0.79);--cds-global-base:20;--cds-alias-object-border-radius-100:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-200:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-300:50%;--cds-alias-object-border-width-100:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-200:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-300:calc((3 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-400:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-color:var(--cds-global-color-construction-200);--cds-alias-object-border-color-tint:var(--cds-global-color-construction-100);--cds-alias-object-border-color-shade:var(--cds-global-color-construction-300);--cds-alias-object-shadow-100:0 1px 3px 0 hsla(198, 30%, 15%, 0.5);--cds-alias-object-shadow-200:0 1px 3px 0 hsla(198, 30%, 15%, 0.3);--cds-alias-object-shadow-300:0 1px 3px 0 hsla(198, 30%, 15%, 0.2);--cds-alias-object-opacity-0:hsla(0, 0%, 0%, 0);--cds-alias-object-opacity-100:hsla(0, 0%, 0%, 0.2);--cds-alias-object-opacity-200:hsla(0, 0%, 0%, 0.4);--cds-alias-object-opacity-300:hsla(0, 0%, 0%, 0.6);--cds-alias-object-interaction-outline:Highlight solid 2px;--cds-alias-object-interaction-outline-offset:1px;--cds-alias-object-interaction-touch-target:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-interaction-border-color:var(--cds-global-color-construction-500);--cds-alias-object-interaction-background:var(--cds-global-color-white);--cds-alias-object-interaction-background-hover:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-active:var(--cds-global-color-blue-100);--cds-alias-object-interaction-background-selected:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-disabled:var(--cds-global-color-white);--cds-alias-object-interaction-background-highlight:var(--cds-global-color-blue-700);--cds-alias-object-interaction-color:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-hover:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-active:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-selected:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-disabled:var(--cds-global-color-construction-300);--cds-alias-object-app-background:var(--cds-global-color-gray-50);--cds-alias-object-overlay-background:var(--cds-global-color-white);--cds-alias-object-overlay-backdrop-background:hsla(0, 0%, 0%, 0.6);--cds-alias-object-container-background:var(--cds-global-color-white);--cds-alias-object-container-background-tint:var(--cds-global-color-construction-50);--cds-alias-object-container-background-shade:var(--cds-global-color-construction-100);--cds-alias-object-container-border-color:var(--cds-global-color-construction-200);--cds-alias-status-info:var(--cds-global-color-blue-700);--cds-alias-status-info-tint:var(--cds-global-color-blue-50);--cds-alias-status-info-shade:var(--cds-global-color-blue-800);--cds-alias-status-success:var(--cds-global-color-green-700);--cds-alias-status-success-tint:var(--cds-global-color-green-50);--cds-alias-status-success-shade:var(--cds-global-color-green-800);--cds-alias-status-warning:var(--cds-global-color-ochre-500);--cds-alias-status-warning-tint:var(--cds-global-color-ochre-100);--cds-alias-status-warning-shade:var(--cds-global-color-ochre-600);--cds-alias-status-warning-dark:var(--cds-global-color-ochre-800);--cds-alias-status-danger:var(--cds-global-color-red-700);--cds-alias-status-danger-tint:var(--cds-global-color-red-50);--cds-alias-status-danger-shade:var(--cds-global-color-red-800);--cds-alias-status-neutral:var(--cds-global-color-construction-600);--cds-alias-status-neutral-tint:var(--cds-global-color-construction-50);--cds-alias-status-neutral-shade:var(--cds-global-color-construction-700);--cds-alias-status-disabled:var(--cds-global-color-construction-300);--cds-alias-status-disabled-tint:var(--cds-global-color-construction-200);--cds-alias-status-disabled-shade:var(--cds-global-color-construction-400);--cds-alias-status-alt:var(--cds-global-color-violet-700);--cds-alias-status-alt-tint:var(--cds-global-color-violet-600);--cds-alias-status-alt-shade:var(--cds-global-color-violet-900)}
|
|
1
|
+
:root{--cds-global-layout-space-xxs:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xs:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-sm:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-md:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-lg:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xl:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-space-xxl:calc((96 / var(--cds-global-base, 20)) * 1rem);--cds-global-layout-grid-cols:12;--cds-global-layout-width-xs:576px;--cds-global-layout-width-sm:768px;--cds-global-layout-width-md:992px;--cds-global-layout-width-lg:1200px;--cds-global-layout-width-xl:1440px;--cds-global-space-0:calc((0 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-1:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-2:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-3:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-4:calc((6 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-5:calc((8 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-6:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-7:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-8:calc((18 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-9:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-10:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-11:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-12:calc((48 / var(--cds-global-base, 20)) * 1rem);--cds-global-space-13:calc((72 / var(--cds-global-base, 20)) * 1rem);--cds-global-color-black:hsl(0, 0%, 0%);--cds-global-color-white:hsl(0, 0%, 100%);--cds-global-color-green-50:hsl(93, 80%, 94%);--cds-global-color-green-100:hsl(93, 80%, 83%);--cds-global-color-green-200:hsl(93, 80%, 70%);--cds-global-color-green-300:hsl(93, 80%, 56%);--cds-global-color-green-400:hsl(93, 80%, 48%);--cds-global-color-green-500:hsl(93, 80%, 44%);--cds-global-color-green-600:hsl(93, 80%, 37%);--cds-global-color-green-700:hsl(93, 80%, 28%);--cds-global-color-green-800:hsl(93, 80%, 23%);--cds-global-color-green-900:hsl(93, 80%, 17%);--cds-global-color-green-1000:hsl(93, 80%, 12%);--cds-global-color-blue-50:hsl(198, 100%, 95%);--cds-global-color-blue-100:hsl(198, 100%, 87%);--cds-global-color-blue-200:hsl(198, 100%, 78%);--cds-global-color-blue-300:hsl(198, 100%, 70%);--cds-global-color-blue-400:hsl(198, 100%, 59%);--cds-global-color-blue-500:hsl(198, 100%, 48%);--cds-global-color-blue-600:hsl(198, 100%, 43%);--cds-global-color-blue-700:hsl(198, 100%, 34%);--cds-global-color-blue-800:hsl(198, 100%, 27%);--cds-global-color-blue-900:hsl(198, 100%, 21%);--cds-global-color-blue-1000:hsl(198, 100%, 15%);--cds-global-color-violet-50:hsl(282, 100%, 97%);--cds-global-color-violet-100:hsl(282, 80%, 91%);--cds-global-color-violet-200:hsl(282, 73%, 83%);--cds-global-color-violet-300:hsl(282, 66%, 74%);--cds-global-color-violet-400:hsl(282, 60%, 65%);--cds-global-color-violet-500:hsl(282, 60%, 57%);--cds-global-color-violet-600:hsl(282, 60%, 49%);--cds-global-color-violet-700:hsl(283, 80%, 36%);--cds-global-color-violet-800:hsl(282, 100%, 26%);--cds-global-color-violet-900:hsl(282, 100%, 19%);--cds-global-color-violet-1000:hsl(282, 100%, 14%);--cds-global-color-red-50:hsl(9, 100%, 97%);--cds-global-color-red-100:hsl(9, 100%, 94%);--cds-global-color-red-200:hsl(9, 100%, 88%);--cds-global-color-red-300:hsl(9, 100%, 79%);--cds-global-color-red-400:hsl(9, 100%, 71%);--cds-global-color-red-500:hsl(9, 100%, 65%);--cds-global-color-red-600:hsl(9, 100%, 60%);--cds-global-color-red-700:hsl(9, 100%, 44%);--cds-global-color-red-800:hsl(9, 100%, 38%);--cds-global-color-red-900:hsl(9, 100%, 28%);--cds-global-color-red-1000:hsl(9, 100%, 22%);--cds-global-color-ochre-50:hsl(41, 100%, 96%);--cds-global-color-ochre-100:hsl(41, 100%, 92%);--cds-global-color-ochre-200:hsl(41, 100%, 86%);--cds-global-color-ochre-300:hsl(41, 100%, 78%);--cds-global-color-ochre-400:hsl(41, 100%, 70%);--cds-global-color-ochre-500:hsl(40, 100%, 59%);--cds-global-color-ochre-600:hsl(39, 100%, 50%);--cds-global-color-ochre-700:hsl(38, 100%, 42%);--cds-global-color-ochre-800:hsl(37, 100%, 32%);--cds-global-color-ochre-900:hsl(36, 100%, 27%);--cds-global-color-ochre-1000:hsl(35, 100%, 19%);--cds-global-color-lavender-50:hsl(238, 100%, 96%);--cds-global-color-lavender-100:hsl(238, 58%, 88%);--cds-global-color-lavender-200:hsl(238, 53%, 79%);--cds-global-color-lavender-300:hsl(238, 52%, 70%);--cds-global-color-lavender-400:hsl(238, 58%, 64%);--cds-global-color-lavender-500:hsl(238, 59%, 58%);--cds-global-color-lavender-600:hsl(238, 60%, 52%);--cds-global-color-lavender-700:hsl(238, 69%, 45%);--cds-global-color-lavender-800:hsl(238, 100%, 32%);--cds-global-color-lavender-900:hsl(238, 100%, 22%);--cds-global-color-lavender-1000:hsl(238, 100%, 14%);--cds-global-color-azure-50:hsl(211, 100%, 95%);--cds-global-color-azure-100:hsl(211, 100%, 88%);--cds-global-color-azure-200:hsl(211, 100%, 81%);--cds-global-color-azure-300:hsl(211, 100%, 70%);--cds-global-color-azure-400:hsl(211, 100%, 62%);--cds-global-color-azure-500:hsl(211, 100%, 54%);--cds-global-color-azure-600:hsl(211, 100%, 46%);--cds-global-color-azure-700:hsl(211, 100%, 37%);--cds-global-color-azure-800:hsl(211, 100%, 26%);--cds-global-color-azure-900:hsl(211, 100%, 18%);--cds-global-color-azure-1000:hsl(211, 100%, 14%);--cds-global-color-aqua-50:hsl(184, 100%, 96%);--cds-global-color-aqua-100:hsl(184, 100%, 86%);--cds-global-color-aqua-200:hsl(184, 100%, 75%);--cds-global-color-aqua-300:hsl(184, 100%, 62%);--cds-global-color-aqua-400:hsl(184, 100%, 48%);--cds-global-color-aqua-500:hsl(184, 100%, 43%);--cds-global-color-aqua-600:hsl(184, 100%, 34%);--cds-global-color-aqua-700:hsl(184, 100%, 25%);--cds-global-color-aqua-800:hsl(184, 100%, 18%);--cds-global-color-aqua-900:hsl(184, 100%, 13%);--cds-global-color-aqua-1000:hsl(184, 100%, 10%);--cds-global-color-jade-50:hsl(160, 83%, 95%);--cds-global-color-jade-100:hsl(160, 82%, 88%);--cds-global-color-jade-200:hsl(160, 78%, 78%);--cds-global-color-jade-300:hsl(160, 69%, 65%);--cds-global-color-jade-400:hsl(160, 69%, 53%);--cds-global-color-jade-500:hsl(160, 64%, 45%);--cds-global-color-jade-600:hsl(160, 69%, 36%);--cds-global-color-jade-700:hsl(160, 64%, 30%);--cds-global-color-jade-800:hsl(160, 100%, 21%);--cds-global-color-jade-900:hsl(160, 70%, 21%);--cds-global-color-jade-1000:hsl(160, 69%, 19%);--cds-global-color-yellow-50:hsl(50, 100%, 95%);--cds-global-color-yellow-100:hsl(50, 100%, 84%);--cds-global-color-yellow-200:hsl(50, 100%, 73%);--cds-global-color-yellow-300:hsl(50, 100%, 57%);--cds-global-color-yellow-400:hsl(46, 100%, 52%);--cds-global-color-yellow-500:hsl(44, 100%, 47%);--cds-global-color-yellow-600:hsl(42, 100%, 42%);--cds-global-color-yellow-700:hsl(40, 100%, 35%);--cds-global-color-yellow-800:hsl(40, 100%, 26%);--cds-global-color-yellow-900:hsl(40, 100%, 18%);--cds-global-color-yellow-1000:hsl(40, 100%, 13%);--cds-global-color-tangerine-50:hsl(25, 100%, 95%);--cds-global-color-tangerine-100:hsl(25, 100%, 88%);--cds-global-color-tangerine-200:hsl(25, 94%, 78%);--cds-global-color-tangerine-300:hsl(25, 100%, 72%);--cds-global-color-tangerine-400:hsl(25, 100%, 62%);--cds-global-color-tangerine-500:hsl(25, 100%, 48%);--cds-global-color-tangerine-600:hsl(25, 100%, 41%);--cds-global-color-tangerine-700:hsl(25, 100%, 34%);--cds-global-color-tangerine-800:hsl(25, 100%, 25%);--cds-global-color-tangerine-900:hsl(25, 100%, 19%);--cds-global-color-tangerine-1000:hsl(25, 100%, 15%);--cds-global-color-magenta-50:hsl(345, 100%, 95%);--cds-global-color-magenta-100:hsl(345, 100%, 87%);--cds-global-color-magenta-200:hsl(345, 100%, 79%);--cds-global-color-magenta-300:hsl(345, 100%, 70%);--cds-global-color-magenta-400:hsl(345, 100%, 61%);--cds-global-color-magenta-500:hsl(345, 81%, 50%);--cds-global-color-magenta-600:hsl(345, 83%, 40%);--cds-global-color-magenta-700:hsl(345, 91%, 31%);--cds-global-color-magenta-800:hsl(345, 100%, 24%);--cds-global-color-magenta-900:hsl(345, 100%, 19%);--cds-global-color-magenta-1000:hsl(345, 100%, 15%);--cds-global-color-pink-50:hsl(324, 100%, 97%);--cds-global-color-pink-100:hsl(324, 95%, 91%);--cds-global-color-pink-200:hsl(324, 84%, 81%);--cds-global-color-pink-300:hsl(324, 78%, 70%);--cds-global-color-pink-400:hsl(324, 78%, 62%);--cds-global-color-pink-500:hsl(324, 64%, 51%);--cds-global-color-pink-600:hsl(324, 80%, 39%);--cds-global-color-pink-700:hsl(324, 100%, 30%);--cds-global-color-pink-800:hsl(324, 100%, 24%);--cds-global-color-pink-900:hsl(324, 100%, 18%);--cds-global-color-pink-1000:hsl(324, 100%, 15%);--cds-global-color-warm-gray-50:hsl(282, 3%, 97%);--cds-global-color-warm-gray-100:hsl(282, 3%, 92%);--cds-global-color-warm-gray-200:hsl(282, 3%, 84%);--cds-global-color-warm-gray-300:hsl(282, 3%, 74%);--cds-global-color-warm-gray-400:hsl(282, 3%, 63%);--cds-global-color-warm-gray-500:hsl(282, 3%, 54%);--cds-global-color-warm-gray-600:hsl(282, 3%, 43%);--cds-global-color-warm-gray-700:hsl(282, 3%, 35%);--cds-global-color-warm-gray-800:hsl(282, 3%, 28%);--cds-global-color-warm-gray-900:hsl(282, 3%, 20%);--cds-global-color-warm-gray-1000:hsl(282, 3%, 14%);--cds-global-color-slate-50:hsl(238, 20%, 96%);--cds-global-color-slate-100:hsl(238, 20%, 91%);--cds-global-color-slate-200:hsl(238, 20%, 82%);--cds-global-color-slate-300:hsl(238, 20%, 73%);--cds-global-color-slate-400:hsl(238, 20%, 63%);--cds-global-color-slate-500:hsl(238, 23%, 56%);--cds-global-color-slate-600:hsl(238, 24%, 49%);--cds-global-color-slate-700:hsl(238, 28%, 38%);--cds-global-color-slate-800:hsl(238, 28%, 29%);--cds-global-color-slate-900:hsl(238, 28%, 22%);--cds-global-color-slate-1000:hsl(238, 28%, 14%);--cds-global-color-ice-50:hsl(211, 100%, 97%);--cds-global-color-ice-100:hsl(211, 58%, 90%);--cds-global-color-ice-200:hsl(211, 53%, 81%);--cds-global-color-ice-300:hsl(211, 49%, 70%);--cds-global-color-ice-400:hsl(211, 47%, 62%);--cds-global-color-ice-500:hsl(211, 47%, 53%);--cds-global-color-ice-600:hsl(211, 56%, 44%);--cds-global-color-ice-700:hsl(211, 69%, 34%);--cds-global-color-ice-800:hsl(211, 69%, 27%);--cds-global-color-ice-900:hsl(211, 100%, 20%);--cds-global-color-ice-1000:hsl(211, 100%, 14%);--cds-global-color-cool-gray-50:hsl(211, 20%, 96%);--cds-global-color-cool-gray-100:hsl(211, 20%, 90%);--cds-global-color-cool-gray-200:hsl(211, 20%, 81%);--cds-global-color-cool-gray-300:hsl(211, 20%, 72%);--cds-global-color-cool-gray-400:hsl(211, 20%, 61%);--cds-global-color-cool-gray-500:hsl(211, 20%, 53%);--cds-global-color-cool-gray-600:hsl(211, 20%, 44%);--cds-global-color-cool-gray-700:hsl(211, 23%, 36%);--cds-global-color-cool-gray-800:hsl(211, 30%, 28%);--cds-global-color-cool-gray-900:hsl(211, 40%, 22%);--cds-global-color-cool-gray-1000:hsl(211, 63%, 14%);--cds-global-color-tan-50:hsl(41, 23%, 96%);--cds-global-color-tan-100:hsl(41, 22%, 91%);--cds-global-color-tan-200:hsl(41, 27%, 82%);--cds-global-color-tan-300:hsl(41, 23%, 68%);--cds-global-color-tan-400:hsl(41, 23%, 58%);--cds-global-color-tan-500:hsl(41, 20%, 47%);--cds-global-color-tan-600:hsl(41, 20%, 40%);--cds-global-color-tan-700:hsl(41, 20%, 32%);--cds-global-color-tan-800:hsl(41, 23%, 26%);--cds-global-color-tan-900:hsl(41, 23%, 21%);--cds-global-color-tan-1000:hsl(41, 22%, 16%);--cds-global-color-construction-50:hsl(198, 36%, 96%);--cds-global-color-construction-100:hsl(198, 20%, 91%);--cds-global-color-construction-200:hsl(198, 14%, 82%);--cds-global-color-construction-300:hsl(198, 10%, 71%);--cds-global-color-construction-400:hsl(198, 9%, 56%);--cds-global-color-construction-500:hsl(198, 10%, 46%);--cds-global-color-construction-600:hsl(198, 14%, 36%);--cds-global-color-construction-700:hsl(198, 19%, 28%);--cds-global-color-construction-800:hsl(198, 23%, 23%);--cds-global-color-construction-900:hsl(198, 28%, 18%);--cds-global-color-construction-1000:hsl(198, 30%, 15%);--cds-global-color-gray-0:hsl(0, 0%, 100%);--cds-global-color-gray-50:hsl(0, 0%, 98%);--cds-global-color-gray-100:hsl(0, 0%, 95%);--cds-global-color-gray-200:hsl(0, 0%, 91%);--cds-global-color-gray-300:hsl(0, 0%, 87%);--cds-global-color-gray-400:hsl(0, 0%, 80%);--cds-global-color-gray-500:hsl(0, 0%, 70%);--cds-global-color-gray-600:hsl(0, 0%, 55%);--cds-global-color-gray-700:hsl(0, 0%, 40%);--cds-global-color-gray-800:hsl(0, 0%, 27%);--cds-global-color-gray-900:hsl(0, 0%, 20%);--cds-global-color-gray-1000:hsl(0, 0%, 0%);--cds-global-typography-color-100:var(--cds-global-color-white);--cds-global-typography-color-200:var(--cds-global-color-construction-600);--cds-global-typography-color-300:var(--cds-global-color-construction-800);--cds-global-typography-color-400:var(--cds-global-color-construction-900);--cds-global-typography-color-500:var(--cds-global-color-black);--cds-global-typography-font-weight-light:300;--cds-global-typography-font-weight-regular:400;--cds-global-typography-font-weight-medium:500;--cds-global-typography-font-weight-semibold:600;--cds-global-typography-font-weight-bold:600;--cds-global-typography-font-weight-extrabold:600;--cds-global-typography-font-size-0:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-1:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-2:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-3:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-4:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-5:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-6:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-7:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-8:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-size-9:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-base-font-size:125%;--cds-global-typography-base-font-size-px:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-header-font-family:'Clarity City', 'Avenir Next', sans-serif;--cds-global-typography-monospace-font-family:ui-monospace, Consolas, Menlo, Monaco, monospace;--cds-global-typography-top-gap-height:0.1475em;--cds-global-typography-ascender-height:0.1703em;--cds-global-typography-x-height:0.517em;--cds-global-typography-link-color:var(--cds-global-color-blue-800);--cds-global-typography-link-color-hover:var(--cds-global-color-blue-900);--cds-global-typography-link-color-visited:var(--cds-global-color-lavender-600);--cds-global-typography-link-color-visited-hover:var(--cds-global-color-lavender-700);--cds-global-typography-body-font-size:calc((14 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-body-line-height:1.42857em;--cds-global-typography-body-letter-spacing:-0.014286em;--cds-global-typography-body-font-weight:400;--cds-global-typography-display-font-size:calc((40 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-display-line-height:1.1em;--cds-global-typography-display-letter-spacing:-0.0125em;--cds-global-typography-display-font-weight:400;--cds-global-typography-heading-font-size:calc((32 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-heading-line-height:1.125em;--cds-global-typography-heading-letter-spacing:-0.0125em;--cds-global-typography-heading-font-weight:400;--cds-global-typography-title-font-size:calc((24 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-title-line-height:1.16667em;--cds-global-typography-title-letter-spacing:-0.008333em;--cds-global-typography-title-font-weight:400;--cds-global-typography-section-font-size:calc((20 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-section-line-height:1.2em;--cds-global-typography-section-letter-spacing:-0.01em;--cds-global-typography-section-font-weight:400;--cds-global-typography-subsection-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-subsection-line-height:1.25em;--cds-global-typography-subsection-letter-spacing:-0.0125em;--cds-global-typography-subsection-font-weight:400;--cds-global-typography-message-font-size:calc((16 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-message-line-height:1.25em;--cds-global-typography-message-letter-spacing:-0.0125em;--cds-global-typography-message-font-weight:calc((400 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-font-size:calc((13 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-secondary-line-height:1.23077em;--cds-global-typography-secondary-letter-spacing:-0.007692em;--cds-global-typography-secondary-font-weight:400;--cds-global-typography-caption-font-size:calc((11 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-caption-line-height:1.454545em;--cds-global-typography-caption-letter-spacing:0.018182em;--cds-global-typography-caption-font-weight:400;--cds-global-typography-smallcaption-font-size:calc((10 / var(--cds-global-base, 20)) * 1rem);--cds-global-typography-smallcaption-line-height:1.2em;--cds-global-typography-smallcaption-letter-spacing:0.05em;--cds-global-typography-smallcaption-font-weight:500;--cds-global-animation-duration-instant:0s;--cds-global-animation-duration-quickest:0.1s;--cds-global-animation-duration-quicker:0.15s;--cds-global-animation-duration-quick:0.2s;--cds-global-animation-duration-secondary:0.3s;--cds-global-animation-duration-primary:0.4s;--cds-global-animation-duration-slow:0.5s;--cds-global-animation-duration-slower:0.7s;--cds-global-animation-duration-slowest:0.8s;--cds-global-animation-easing-primary:cubic-bezier(0,.99,0,.99);--cds-global-animation-easing-secondary:cubic-bezier(0, 1.5, 0.5, 1);--cds-global-animation-easing-loop:cubic-bezier(0.17, 0.4, 0.8, 0.79);--cds-global-base:20;--cds-alias-object-border-radius-100:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-200:calc((12 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-radius-300:50%;--cds-alias-object-border-width-100:calc((1 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-200:calc((2 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-300:calc((3 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-width-400:calc((4 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-border-color:var(--cds-global-color-construction-200);--cds-alias-object-border-color-tint:var(--cds-global-color-construction-100);--cds-alias-object-border-color-shade:var(--cds-global-color-construction-300);--cds-alias-object-shadow-100:0 1px 3px 0 hsla(198, 30%, 15%, 0.5);--cds-alias-object-shadow-200:0 1px 3px 0 hsla(198, 30%, 15%, 0.3);--cds-alias-object-shadow-300:0 1px 3px 0 hsla(198, 30%, 15%, 0.2);--cds-alias-object-opacity-0:hsla(0, 0%, 0%, 0);--cds-alias-object-opacity-100:hsla(0, 0%, 0%, 0.2);--cds-alias-object-opacity-200:hsla(0, 0%, 0%, 0.4);--cds-alias-object-opacity-300:hsla(0, 0%, 0%, 0.6);--cds-alias-object-interaction-outline:Highlight solid 2px;--cds-alias-object-interaction-outline-offset:1px;--cds-alias-object-interaction-touch-target:calc((36 / var(--cds-global-base, 20)) * 1rem);--cds-alias-object-interaction-border-color:var(--cds-global-color-construction-500);--cds-alias-object-interaction-background:var(--cds-global-color-white);--cds-alias-object-interaction-background-hover:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-active:var(--cds-global-color-blue-100);--cds-alias-object-interaction-background-selected:var(--cds-global-color-blue-50);--cds-alias-object-interaction-background-disabled:var(--cds-global-color-white);--cds-alias-object-interaction-background-highlight:var(--cds-global-color-blue-700);--cds-alias-object-interaction-color:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-hover:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-active:var(--cds-global-color-construction-1000);--cds-alias-object-interaction-color-selected:var(--cds-global-color-construction-700);--cds-alias-object-interaction-color-disabled:var(--cds-global-color-construction-300);--cds-alias-object-app-background:var(--cds-global-color-gray-50);--cds-alias-object-overlay-background:var(--cds-global-color-white);--cds-alias-object-overlay-backdrop-background:hsla(0, 0%, 0%, 0.6);--cds-alias-object-container-background:var(--cds-global-color-white);--cds-alias-object-container-background-tint:var(--cds-global-color-construction-50);--cds-alias-object-container-background-shade:var(--cds-global-color-construction-100);--cds-alias-object-container-border-color:var(--cds-global-color-construction-200);--cds-alias-status-info:var(--cds-global-color-blue-700);--cds-alias-status-info-tint:var(--cds-global-color-blue-50);--cds-alias-status-info-shade:var(--cds-global-color-blue-800);--cds-alias-status-success:var(--cds-global-color-green-700);--cds-alias-status-success-tint:var(--cds-global-color-green-50);--cds-alias-status-success-shade:var(--cds-global-color-green-800);--cds-alias-status-warning:var(--cds-global-color-ochre-500);--cds-alias-status-warning-tint:var(--cds-global-color-ochre-100);--cds-alias-status-warning-shade:var(--cds-global-color-ochre-600);--cds-alias-status-warning-dark:var(--cds-global-color-ochre-800);--cds-alias-status-danger:var(--cds-global-color-red-700);--cds-alias-status-danger-tint:var(--cds-global-color-red-50);--cds-alias-status-danger-shade:var(--cds-global-color-red-800);--cds-alias-status-danger-dark:var(--cds-global-color-red-900);--cds-alias-status-neutral:var(--cds-global-color-construction-600);--cds-alias-status-neutral-tint:var(--cds-global-color-construction-50);--cds-alias-status-neutral-shade:var(--cds-global-color-construction-700);--cds-alias-status-disabled:var(--cds-global-color-construction-300);--cds-alias-status-disabled-tint:var(--cds-global-color-construction-200);--cds-alias-status-disabled-shade:var(--cds-global-color-construction-400);--cds-alias-status-alt:var(--cds-global-color-violet-700);--cds-alias-status-alt-tint:var(--cds-global-color-violet-600);--cds-alias-status-alt-shade:var(--cds-global-color-violet-900)}
|
package/styles/theme.dark.css
CHANGED
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
--cds-alias-status-warning-shade: var(--cds-global-color-ochre-500);
|
|
46
46
|
--cds-alias-status-warning-dark: var(--cds-global-color-ochre-500);
|
|
47
47
|
--cds-alias-status-danger: var(--cds-global-color-red-500);
|
|
48
|
+
--cds-alias-status-danger-dark: var(--cds-global-color-red-800);
|
|
48
49
|
--cds-alias-status-danger-tint: var(--cds-global-color-red-700);
|
|
49
50
|
--cds-alias-status-danger-shade: var(--cds-global-color-red-700);
|
|
50
51
|
--cds-alias-status-neutral: var(--cds-global-color-construction-300);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
[cds-theme~=dark]{--cds-global-typography-color-500:var(--cds-global-color-white);--cds-global-typography-color-400:var(--cds-global-color-construction-100);--cds-global-typography-color-300:var(--cds-global-color-construction-200);--cds-global-typography-color-200:var(--cds-global-color-construction-600);--cds-global-typography-color-100:var(--cds-global-color-construction-900);--cds-global-typography-link-color:var(--cds-global-color-blue-400);--cds-global-typography-link-color-hover:var(--cds-global-color-blue-500);--cds-global-typography-link-color-visited:var(--cds-global-color-lavender-300);--cds-global-typography-link-color-visited-hover:var(--cds-global-color-lavender-400);--cds-alias-object-app-background:var(--cds-global-color-construction-1000);--cds-alias-object-app-border-color:var(--cds-global-color-black);--cds-alias-object-container-background:var(--cds-global-color-construction-900);--cds-alias-object-container-background-tint:var(--cds-global-color-construction-1000);--cds-alias-object-container-background-shade:var(--cds-global-color-construction-800);--cds-alias-object-container-border-color:var(--cds-global-color-black);--cds-alias-object-overlay-background:var(--cds-global-color-construction-900);--cds-alias-object-overlay-border-color:var(--cds-global-color-black);--cds-alias-object-border-color:var(--cds-global-color-construction-500);--cds-alias-object-border-color-tint:var(--cds-global-color-construction-400);--cds-alias-object-border-color-shade:var(--cds-global-color-construction-600);--cds-alias-object-shadow-100:0 var(--cds-global-space-1) var(--cds-global-space-2) 0 rgba(0, 0, 0, 0.5);--cds-alias-object-shadow-200:0 var(--cds-global-space-1) var(--cds-global-space-2) 0 rgba(0, 0, 0, 0.3);--cds-alias-object-shadow-300:0 var(--cds-global-space-1) var(--cds-global-space-2) 0 rgba(0, 0, 0, 0.2);--cds-alias-object-interaction-color:var(--cds-global-color-construction-200);--cds-alias-object-interaction-color-hover:var(--cds-global-color-construction-50);--cds-alias-object-interaction-color-active:var(--cds-global-color-construction-100);--cds-alias-object-interaction-color-selected:var(--cds-global-color-construction-200);--cds-alias-object-interaction-color-disabled:var(--cds-global-color-construction-600);--cds-alias-object-interaction-background:var(--cds-global-color-construction-900);--cds-alias-object-interaction-background-hover:var(--cds-global-color-cool-gray-800);--cds-alias-object-interaction-background-active:var(--cds-global-color-cool-gray-900);--cds-alias-object-interaction-background-selected:var(--cds-global-color-cool-gray-800);--cds-alias-object-interaction-background-disabled:var(--cds-global-color-construction-900);--cds-alias-object-interaction-background-highlight:var(--cds-global-color-blue-400);--cds-alias-status-tint:transparent;--cds-alias-status-info:var(--cds-global-color-blue-400);--cds-alias-status-info-tint:var(--cds-global-color-blue-700);--cds-alias-status-info-shade:var(--cds-global-color-blue-700);--cds-alias-status-success:var(--cds-global-color-green-500);--cds-alias-status-success-tint:var(--cds-global-color-green-700);--cds-alias-status-success-shade:var(--cds-global-color-green-700);--cds-alias-status-warning:var(--cds-global-color-ochre-400);--cds-alias-status-warning-tint:var(--cds-global-color-ochre-500);--cds-alias-status-warning-shade:var(--cds-global-color-ochre-500);--cds-alias-status-warning-dark:var(--cds-global-color-ochre-500);--cds-alias-status-danger:var(--cds-global-color-red-500);--cds-alias-status-danger-tint:var(--cds-global-color-red-700);--cds-alias-status-danger-shade:var(--cds-global-color-red-700);--cds-alias-status-neutral:var(--cds-global-color-construction-300);--cds-alias-status-neutral-tint:var(--cds-global-color-construction-500);--cds-alias-status-neutral-shade:var(--cds-global-color-construction-500);--cds-alias-status-disabled:var(--cds-global-color-construction-600);--cds-alias-status-disabled-tint:var(--cds-global-color-construction-700);--cds-alias-status-disabled-shade:var(--cds-global-color-construction-800)}
|
|
1
|
+
[cds-theme~=dark]{--cds-global-typography-color-500:var(--cds-global-color-white);--cds-global-typography-color-400:var(--cds-global-color-construction-100);--cds-global-typography-color-300:var(--cds-global-color-construction-200);--cds-global-typography-color-200:var(--cds-global-color-construction-600);--cds-global-typography-color-100:var(--cds-global-color-construction-900);--cds-global-typography-link-color:var(--cds-global-color-blue-400);--cds-global-typography-link-color-hover:var(--cds-global-color-blue-500);--cds-global-typography-link-color-visited:var(--cds-global-color-lavender-300);--cds-global-typography-link-color-visited-hover:var(--cds-global-color-lavender-400);--cds-alias-object-app-background:var(--cds-global-color-construction-1000);--cds-alias-object-app-border-color:var(--cds-global-color-black);--cds-alias-object-container-background:var(--cds-global-color-construction-900);--cds-alias-object-container-background-tint:var(--cds-global-color-construction-1000);--cds-alias-object-container-background-shade:var(--cds-global-color-construction-800);--cds-alias-object-container-border-color:var(--cds-global-color-black);--cds-alias-object-overlay-background:var(--cds-global-color-construction-900);--cds-alias-object-overlay-border-color:var(--cds-global-color-black);--cds-alias-object-border-color:var(--cds-global-color-construction-500);--cds-alias-object-border-color-tint:var(--cds-global-color-construction-400);--cds-alias-object-border-color-shade:var(--cds-global-color-construction-600);--cds-alias-object-shadow-100:0 var(--cds-global-space-1) var(--cds-global-space-2) 0 rgba(0, 0, 0, 0.5);--cds-alias-object-shadow-200:0 var(--cds-global-space-1) var(--cds-global-space-2) 0 rgba(0, 0, 0, 0.3);--cds-alias-object-shadow-300:0 var(--cds-global-space-1) var(--cds-global-space-2) 0 rgba(0, 0, 0, 0.2);--cds-alias-object-interaction-color:var(--cds-global-color-construction-200);--cds-alias-object-interaction-color-hover:var(--cds-global-color-construction-50);--cds-alias-object-interaction-color-active:var(--cds-global-color-construction-100);--cds-alias-object-interaction-color-selected:var(--cds-global-color-construction-200);--cds-alias-object-interaction-color-disabled:var(--cds-global-color-construction-600);--cds-alias-object-interaction-background:var(--cds-global-color-construction-900);--cds-alias-object-interaction-background-hover:var(--cds-global-color-cool-gray-800);--cds-alias-object-interaction-background-active:var(--cds-global-color-cool-gray-900);--cds-alias-object-interaction-background-selected:var(--cds-global-color-cool-gray-800);--cds-alias-object-interaction-background-disabled:var(--cds-global-color-construction-900);--cds-alias-object-interaction-background-highlight:var(--cds-global-color-blue-400);--cds-alias-status-tint:transparent;--cds-alias-status-info:var(--cds-global-color-blue-400);--cds-alias-status-info-tint:var(--cds-global-color-blue-700);--cds-alias-status-info-shade:var(--cds-global-color-blue-700);--cds-alias-status-success:var(--cds-global-color-green-500);--cds-alias-status-success-tint:var(--cds-global-color-green-700);--cds-alias-status-success-shade:var(--cds-global-color-green-700);--cds-alias-status-warning:var(--cds-global-color-ochre-400);--cds-alias-status-warning-tint:var(--cds-global-color-ochre-500);--cds-alias-status-warning-shade:var(--cds-global-color-ochre-500);--cds-alias-status-warning-dark:var(--cds-global-color-ochre-500);--cds-alias-status-danger:var(--cds-global-color-red-500);--cds-alias-status-danger-dark:var(--cds-global-color-red-800);--cds-alias-status-danger-tint:var(--cds-global-color-red-700);--cds-alias-status-danger-shade:var(--cds-global-color-red-700);--cds-alias-status-neutral:var(--cds-global-color-construction-300);--cds-alias-status-neutral-tint:var(--cds-global-color-construction-500);--cds-alias-status-neutral-shade:var(--cds-global-color-construction-500);--cds-alias-status-disabled:var(--cds-global-color-construction-600);--cds-alias-status-disabled-tint:var(--cds-global-color-construction-700);--cds-alias-status-disabled-shade:var(--cds-global-color-construction-800)}
|
package/tag/tag.element.d.ts
CHANGED
|
@@ -24,8 +24,8 @@ import { CdsBaseButton, StatusTypes } from '@cds/core/internal';
|
|
|
24
24
|
*/
|
|
25
25
|
export declare class CdsTag extends CdsBaseButton {
|
|
26
26
|
/**
|
|
27
|
-
* @type {neutral | info | success | warning | danger}
|
|
28
27
|
* Sets the color of the tag (and badge if present) from the following predefined list of statuses:
|
|
28
|
+
* @type {neutral | info | success | warning | danger}
|
|
29
29
|
*/
|
|
30
30
|
status: StatusTypes;
|
|
31
31
|
/** Sets the color of the tag (and badge if present) from a predefined list of choices */
|
|
@@ -389,6 +389,7 @@
|
|
|
389
389
|
<color name="aliasStatusDanger" alias="globalColorRed700">#e02200</color>
|
|
390
390
|
<color name="aliasStatusDangerTint" alias="globalColorRed50">#fff2f0</color>
|
|
391
391
|
<color name="aliasStatusDangerShade" alias="globalColorRed800">#c21d00</color>
|
|
392
|
+
<color name="aliasStatusDangerDark" alias="globalColorRed900">#8f1500</color>
|
|
392
393
|
<color name="aliasStatusNeutral" alias="globalColorConstruction600">#4f6169</color>
|
|
393
394
|
<color name="aliasStatusNeutralTint" alias="globalColorConstruction50">#f1f6f8</color>
|
|
394
395
|
<color name="aliasStatusNeutralShade" alias="globalColorConstruction700">#3a4d55</color>
|
package/tokens/tokens.d.ts
CHANGED
|
@@ -386,6 +386,7 @@ export declare const aliasStatusWarningDark = "var(--cds-alias-status-warning-da
|
|
|
386
386
|
export declare const aliasStatusDanger = "var(--cds-alias-status-danger)";
|
|
387
387
|
export declare const aliasStatusDangerTint = "var(--cds-alias-status-danger-tint)";
|
|
388
388
|
export declare const aliasStatusDangerShade = "var(--cds-alias-status-danger-shade)";
|
|
389
|
+
export declare const aliasStatusDangerDark = "var(--cds-alias-status-danger-dark)";
|
|
389
390
|
export declare const aliasStatusNeutral = "var(--cds-alias-status-neutral)";
|
|
390
391
|
export declare const aliasStatusNeutralTint = "var(--cds-alias-status-neutral-tint)";
|
|
391
392
|
export declare const aliasStatusNeutralShade = "var(--cds-alias-status-neutral-shade)";
|
package/tokens/tokens.ios.swift
CHANGED
|
@@ -387,6 +387,7 @@ let aliasStatusWarningDark = UIColor(red: 163, green: 101, blue: 0, alpha: 1.0);
|
|
|
387
387
|
let aliasStatusDanger = UIColor(red: 224, green: 34, blue: 0, alpha: 1.0);
|
|
388
388
|
let aliasStatusDangerTint = UIColor(red: 255, green: 242, blue: 240, alpha: 1.0);
|
|
389
389
|
let aliasStatusDangerShade = UIColor(red: 194, green: 29, blue: 0, alpha: 1.0);
|
|
390
|
+
let aliasStatusDangerDark = UIColor(red: 143, green: 21, blue: 0, alpha: 1.0);
|
|
390
391
|
let aliasStatusNeutral = UIColor(red: 79, green: 97, blue: 105, alpha: 1.0);
|
|
391
392
|
let aliasStatusNeutralTint = UIColor(red: 241, green: 246, blue: 248, alpha: 1.0);
|
|
392
393
|
let aliasStatusNeutralShade = UIColor(red: 58, green: 77, blue: 85, alpha: 1.0);
|
package/tokens/tokens.js
CHANGED
|
@@ -387,6 +387,7 @@ export const aliasStatusWarningDark = 'var(--cds-alias-status-warning-dark)';
|
|
|
387
387
|
export const aliasStatusDanger = 'var(--cds-alias-status-danger)';
|
|
388
388
|
export const aliasStatusDangerTint = 'var(--cds-alias-status-danger-tint)';
|
|
389
389
|
export const aliasStatusDangerShade = 'var(--cds-alias-status-danger-shade)';
|
|
390
|
+
export const aliasStatusDangerDark = 'var(--cds-alias-status-danger-dark)';
|
|
390
391
|
export const aliasStatusNeutral = 'var(--cds-alias-status-neutral)';
|
|
391
392
|
export const aliasStatusNeutralTint = 'var(--cds-alias-status-neutral-tint)';
|
|
392
393
|
export const aliasStatusNeutralShade = 'var(--cds-alias-status-neutral-shade)';
|
package/tokens/tokens.json
CHANGED
package/tokens/tokens.scss
CHANGED
|
@@ -404,6 +404,7 @@ $cds-alias-status-warning-dark: var(--cds-alias-status-warning-dark) !default;
|
|
|
404
404
|
$cds-alias-status-danger: var(--cds-alias-status-danger) !default;
|
|
405
405
|
$cds-alias-status-danger-tint: var(--cds-alias-status-danger-tint) !default;
|
|
406
406
|
$cds-alias-status-danger-shade: var(--cds-alias-status-danger-shade) !default;
|
|
407
|
+
$cds-alias-status-danger-dark: var(--cds-alias-status-danger-dark) !default;
|
|
407
408
|
$cds-alias-status-neutral: var(--cds-alias-status-neutral) !default;
|
|
408
409
|
$cds-alias-status-neutral-tint: var(--cds-alias-status-neutral-tint) !default;
|
|
409
410
|
$cds-alias-status-neutral-shade: var(--cds-alias-status-neutral-shade) !default;
|