@digital-realty/theme - npm Package Compare versions

Comparing version 2.1.10-alpha-245829-t51.0 to 2.1.10-alpha-245842-t56.0

dist/css/baseTheme.css.js

@@ -1,2 +0,2 @@
-var n=":root,\n:host :root,\n:host {\n  --root-primary-font: 'Open Sans', 'sans-serif';\n  --root-secondary-font: 'Red Hat Display', 'sans-serif';\n  --root-font-size: 1rem;\n  --root-line-height: 1.5;\n  --root-color: var(--clr-on-surface);\n\n  /* for vaadin grid */\n  --lumo-font-family: var(--root-primary-font);\n\n  --text-default-size: var(--root-font-size);\n  --text-default-letter-spacing: 0.0275em;\n  --text-default-line-height: 1.75em;\n  --text-default-weight: normal;\n  --text-default-font: var(--root-primary-font);\n  --text-default-decoration: none;\n  --text-default-transform: none;\n\n  --text-link-decoration: underline;\n  --text-link-transform: none;\n\n  --text-small-size: .875rem;\n  --text-small-letter-spacing: 0.0275em;\n  --text-small-line-height: 1.42857143em;\n  --text-small-weight: normal;\n  --text-small-font: var(--root-primary-font);\n  --text-small-decoration: none;\n  --text-small-transform: none;\n\n  --text-heading-size: 1.25rem;\n  --text-heading-letter-spacing: 0.0075em;\n  --text-heading-line-height: 1.2em;\n  --text-heading-weight: bold;\n  --text-heading-font: var(--root-secondary-font);\n  --text-heading-decoration: none;\n  --text-heading-transform: none;\n\n  --text-page-title-size: 2.125rem;\n  --text-page-title-letter-spacing: 0.01029412em;\n  --text-page-title-line-height: 1.17647059em;\n  --text-page-title-weight: bold;\n  --text-page-title-font: var(--root-secondary-font);\n  --text-page-title-decoration: none;\n  --text-page-title-transform: none;\n\n  --text-caption-size: .75rem;\n  --text-caption-letter-spacing: 0.03333333em;\n  --text-caption-line-height: 1.33333333em;\n  --text-caption-weight: normal;\n  --text-caption-font: var(--root-primary-font);\n  --text-caption-decoration: none;\n  --text-caption-transform: none;\n\n  --text-field-size: var(--root-font-size);\n  --text-field-letter-spacing: 0.0275em;\n  --text-field-line-height: 1.25em;\n  --text-field-weight: normal;\n  --text-field-font: var(--root-primary-font);\n  --text-field-decoration: none;\n  --text-field-transform: none;\n\n  --text-button-size: .875rem;\n  --text-button-letter-spacing: 0.08928571em;\n  --text-button-line-height: 1.42857143em;\n  --text-button-weight: bold;\n  --text-button-font: var(--root-secondary-font);\n  --text-button-decoration: none;\n  --text-button-transform: uppercase;\n\n\n  /* Color Primitives */\n  /* They should not be used directly in components */\n  /* They are meant to be consumed by \"semantic\" variables to enable multiple color modes */\n\n  /* DLR Blue: #1456E0 */\n  /* opaque */\n  --cp-dlr-blue-50: #1456E0;\n  --cp-dlr-blue-60: #2F6FF6;\n  --cp-dlr-blue-98: #F5F7FF;\n  --cp-dlr-blue-100: #FFFFFF;\n\n  /* Transparent */\n  --cp-dlr-blue-50p: #1456E080;\n  --cp-dlr-blue-40p: #1456E066;\n  --cp-dlr-blue-30p: #1456E04D;  \n  --cp-dlr-blue-20p: #1456E033;\n  --cp-dlr-blue-10p: #1456E01A;\n\n\n  /* Neutral Blue: #092241 */\n  /* opaque */\n  --cp-neutral-blue-4: #010D1C;\n  --cp-neutral-blue-6: #031429;\n  --cp-neutral-blue-10: #092241;\n  --cp-neutral-blue-20: #2D425C;\n  --cp-neutral-blue-94: #EBEDF0;\n  --cp-neutral-blue-100: #FFFFFF;\n\n  /* Transparent */\n  --cp-neutral-blue-70p: #092241B3;\n  --cp-neutral-blue-60p: #09224199;\n  --cp-neutral-blue-50p: #09224180;\n  --cp-neutral-blue-20p: #09224133;\n  --cp-neutral-blue-12p: #0922411F;\n  --cp-neutral-blue-8p: #09224114;\n\n\n  /* Dark Mode Grey: #AEB7C6 */\n  /* Transparent */\n  --cp-dark-mode-grey-100p: #AEB7C6;\n  --cp-dark-mode-grey-70p: #AEB7C6B3;\n  --cp-dark-mode-grey-60p: #AEB7C699;\n  --cp-dark-mode-grey-50p: #AEB7C680;\n  --cp-dark-mode-grey-40p: #AEB7C666;\n  --cp-dark-mode-grey-20p: #AEB7C633;\n  --cp-dark-mode-grey-12p: #AEB7C61F;\n\n\n  /* Critical: #DB0028 */\n  --cp-critical-40: #DB0028;\n  --cp-critical-60: #F83B3A;\n  --cp-critical-100: #FFFFFF;\n\n  /* Warning: #FF9800 */\n  --cp-warning-30: #B75701;\n  --cp-warning-50: #FF9800;\n  --cp-warning-100: #FFFFFF;\n\n  /* Success: #4CAF50  */\n  --cp-success-30: #286D2B;\n  --cp-success-50: #4CAF50;\n  --cp-success-100: #FFFFFF;\n\n  /* Info: #2196F3 */\n  --cp-info-30: #13579D;\n  --cp-info-50: #2196F3;\n  --cp-info-100: #FFFFFF;\n\n  /* Inactive field */\n  --ix-inactive-field-color: rgba(9, 34, 65, 0.8);\n\n  /* Disabled field */\n  --ix-disabled-field-color: rgba(9, 34, 65);\n  --ix-disabled-field-opacity: 0.4;\n\n\n  /* Semantic Variables */\n  /* Light Mode (Default) */\n  --clr-surface: var(--cp-neutral-blue-98);\n  --clr-surface-container-lowest: var(--cp-neutral-blue-100);\n  --clr-surface-container: var(--cp-neutral-blue-94);\n\n\n  --clr-on-surface: var(--cp-neutral-blue-10);\n  --clr-on-surface-variant: var(--cp-neutral-blue-70p);\n  --clr-on-surface-disabled: var(--cp-neutral-blue-50p);\n  --clr-on-surface-primary: var(--cp-dlr-blue-50);\n  --clr-on-surface-critical: var(--cp-critical-40);\n  --clr-on-surface-warning: var(--cp-warning-30);\n  --clr-on-surface-success: var(--cp-success-30);\n  --clr-on-surface-info: var(--cp-info-30);\n\n  --clr-graphics-fill: var(--cp-neutral-blue-60p);\n  \n\n  --clr-outline: var(--cp-neutral-blue-12p);\n  --clr-outline-variant: var(--cp-neutral-blue-8p);\n  --clr-form-outline: var(--cp-neutral-blue-50p);\n  --clr-form-outline-filled: var(--cp-neutral-blue-70p);\n  --clr-form-outline-disabled: var(--cp-neutral-blue-12p);\n  --clr-form-outline-hover: var(--cp-neutral-blue-10);\n\n\n  --clr-primary: var(--cp-dlr-blue-50);\n  --clr-on-primary: var(--cp-dlr-blue-100);\n\n  --clr-primary-hover: var(--cp-dlr-blue-60);\n  --clr-on-primary-hover: var(--cp-dlr-blue-100);\n\n  --clr-primary-soft: var(--cp-dlr-blue-40p);\n  --clr-on-primary-soft: var(--cp-neutral-blue-10);\n\n  --clr-primary-subtle: var(--cp-dlr-blue-10p);\n  --clr-on-primary-subtle: var(--cp-neutral-blue-10);\n\n\n  --clr-secondary: var(--cp-neutral-blue-10);\n  --clr-on-secondary: var(--cp-neutral-blue-100);\n\n  --clr-disabled: var(--cp-neutral-blue-12p);\n  --clr-on-disabled: var(--cp-neutral-blue-60p);\n\n  --clr-critical: var(--cp-critical-40);\n  --clr-on-critical: var(--cp-critical-100);\n\n  --clr-critical-hover: var(--cp-critical-60);\n  --clr-on-critical-hover: var(--cp-critical-100);\n\n  --clr-warning: var(--cp-warning-50);\n  --clr-on-warning: var(--cp-warning-100);\n\n  --clr-success: var(--cp-success-50);\n  --clr-on-success: var(--cp-success-100);\n\n  --clr-info: var(--cp-info-50);\n  --clr-on-info: var(--cp-info-100);\n\n\n\n  /* These follow tailwind, only change them if you change the tailwind config */\n  /* .text-base 16px */\n  --ix-root-font-size: var(--root-font-size);\n  --ix-root-line-height: var(--root-line-height);\n  --ix-sys-primary: var(--clr-primary);\n\n  --ix-line-height: var(--ix-root-line-height);\n\n  /* .text-sm 14px */\n  --ix-dialog-font-size: var(--root-font-size);\n  --ix-dialog-line-height: var(--root-line-height);\n\n  --ix-icon-line-height: 1;\n\n\n  --ix-field-color: var(--clr-on-surface-variant);\n  --ix-select-leading-icon-color: var(--clr-graphics-fill);\n  --ix-select-leading-icon-inset: 0.8rem;\n  --ix-button-primary-hover-color: var(--clr-primary-hover);\n  --ix-text-dark: var(--clr-on-surface);\n  --ix-text-dark-second: var(--clr-on-surface-variant);\n  --ix-outline-color: var(--clr-outline);\n  --ix-disabled-color: var(--clr-disabled);\n\n  /* form customisation */\n  --ix-field-padding-vertical: 10px;\n  --ix-field-padding-horizontal: 1rem;\n\n  --md-ref-typeface-plain: var(--root-primary-font);\n  --md-ref-typeface-brand: var(--root-primary-font);\n  --md-outlined-field-content-line-height: var(--ix-line-height);\n  --md-sys-typescale-body-large-line-height: var(--ix-line-height);\n\n  --md-outlined-text-field-focus-outline-width: 2px;\n\n  --ix-button-confirm-color: var(--clr-primary);\n  --ix-button-cancel-color: var(--clr-critical);\n  --ix-font-color: var(--clr-on-surface);\n  --ix-icon-pending-color: var(--clr-warning);\n\n  --md-sys-color-primary: var(--clr-primary);\n  --md-sys-color-primary-container: var(--clr-primary-subtle);\n  --md-sys-color-on-primary: var(--clr-on-primary);\n  --md-sys-color-on-primary-container: var(--clr-on-primary-subtle);\n  --md-sys-color-secondary: var(--clr-secondary);\n  --md-sys-color-secondary-container: var(--clr-primary-soft);\n  --md-sys-color-on-secondary: var(--clr-on-secondary);\n  --md-sys-color-on-secondary-container: var(--clr-on-primary-soft);\n  --md-sys-color-tertiary: #4B607C;\n  --md-sys-color-tertiary-container: #D3E4FF;\n  --md-sys-color-on-tertiary: #FFFFFF;\n  --md-sys-color-on-tertiary-container: #041C35;\n  --md-sys-color-error: var(--clr-critical);\n  --md-sys-color-error-container: transparent;\n  --md-sys-color-on-error: var(--clr-on-critical);\n  --md-sys-color-on-error-container: var(--clr-on-surface-critical);\n  --md-sys-color-background: var(--clr-surface);\n  --md-sys-color-on-background: var(--clr-on-surface);\n  --md-sys-color-surface: var(--clr-surface);\n  --md-sys-color-on-surface: var(--clr-on-surface);\n  --md-sys-color-surface-variant: var(--clr-surface-container-lowest);\n  --md-sys-color-inverse-surface: var(--clr-secondary);\n  --md-sys-color-inverse-on-surface: var(--clr-on-secondary);\n  --md-sys-color-inverse-primary: var(--clr-primary-soft);\n  --md-sys-color-shadow: #000000;\n  --md-sys-color-surface-tint: var(--clr-primary);\n  --md-sys-color-scrim: #000000;\n\n  --md-sys-color-warning: var(--clr-warning);\n  --md-sys-color-info: var(--clr-info);\n  --md-sys-color-success: var(--clr-success);\n  --md-sys-text-color-primary: var(--clr-on-surface);\n  --md-sys-text-color-secondary: var(--clr-on-surface-variant);\n\n  --md-input-chip-container-shape: 9999px;\n  --md-filter-chip-container-shape: 9999px;\n  --md-suggestion-chip-container-shape: 9999px;\n\n  --md-outlined-field-top-space: var(--ix-field-padding-vertical);\n  --md-outlined-text-field-top-space: var(--ix-field-padding-vertical);\n  --md-outlined-text-field-bottom-space: var(--ix-field-padding-vertical);\n\n\n  /* outlined field spacing */\n  --md-outlined-field-leading-space: var(--ix-field-padding-horizontal);\n  --md-outlined-text-field-leading-space: var(--ix-field-padding-horizontal);\n  --md-outlined-field-bottom-space: var(--ix-field-padding-vertical);\n\n  /* outlined field colour */\n  --md-outlined-field-outline-color: var(--clr-form-outline-filled);\n  --md-outlined-field-hover-outline-color: var(--clr-form-outline-hover);\n  --md-outlined-select-text-field-outline-color: var(--clr-form-outline-filled);\n  --md-outlined-select-text-field-hover-outline-color: var(--clr-form-outline-hover);\n\n  --md-outlined-select-text-field-focus-outline-color: var(\n    --clr-primary\n  );\n  --md-outlined-field-focus-label-text-color: var(\n    --clr-on-surface-primary\n  );\n  --md-outlined-select-text-field-focus-label-text-color: var(\n    --clr-on-surface-primary\n  );\n\n  /* field label and icon */\n  --md-outlined-field-focus-label-text-color: var(\n    --clr-on-surface-primary\n  );\n  --md-outlined-field-focus-content-color: var(\n    --clr-on-surface\n  );\n  --md-outlined-text-field-focus-input-text-color: var(--clr-on-surface);\n  --md-sys-color-on-surface-variant: var(--ix-field-color);\n  --md-outlined-field-hover-label-text-color: var(--ix-field-color);\n  --md-outlined-select-text-field-label-text-color: var(--ix-field-color);\n  --md-outlined-select-text-field-hover-label-text-color: var(--ix-field-color);\n  --md-outlined-field-focus-outline-color: var(--ix-button-primary-hover-color);\n  --md-outlined-field-leading-content-color: var(\n    --ix-select-leading-icon-color\n  );\n\n  /* inactive field color */\n  --md-sys-color-outline: var(--ix-inactive-field);\n  --md-sys-color-on-surface-variant: var(--ix-inactive-field-color);\n  --md-outlined-field-label-text-color: var(--ix-inactive-fiel-color);\n  --md-outlined-text-field-outline-color: var(--ix-inactive-field-color);\n\n  /* disabled field color */\n  --md-outlined-field-disabled-outline-color: var(--ix-disabled-field-color);\n  --md-outlined-field-disabled-outline-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-field-disabled-content-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-field-disabled-label-text-opacity:var(--ix-disabled-field-opacity);\n\n  --md-outlined-text-field-disabled-outline-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-text-field-disabled-input-text-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-text-field-disabled-label-text-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-text-field-disabled-supporting-text-opacity: var(--ix-disabled-field-opacity);\n\n  --md-outlined-select-text-field-disabled-outline-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-select-text-field-disabled-input-text-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-select-text-field-disabled-label-text-opacity: var(--ix-disabled-field-opacity);\n\n\n  /* menu container */\n  --md-menu-container-shape: 3px;\n  --md-menu-container-color: var(--clr-on-primary);\n\n  /* menu item spacing */\n  --md-menu-item-bottom-space: var(--ix-field-padding-vertical);\n  --md-menu-item-top-space: var(--ix-field-padding-vertical);\n  --md-menu-item-leading-space: var(--ix-field-padding-horizontal);\n  --md-menu-item-one-line-container-height: var(--ix-field-padding-horizontal);\n\n  /* menu item hover colour */\n  --md-menu-item-label-text-color: var(--clr-on-surface);\n\n  /* menu item selected colour */\n  --md-menu-item-selected-container-color: var(--clr-surface);\n  --md-outlined-text-field-input-text-color: var(--clr-on-surface);\n  --ix-menu-item-height: 3rem;\n\n  /* field error */\n  --md-outlined-field-error-outline-color: var(--md-sys-color-error);\n  --md-outlined-field-error-content-color: var(--md-sys-color-error);\n\n  /* switch */\n  /* --md-switch-selected-track-color: #378aca; */\n  --md-switch-selected-handle-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  --md-switch-selected-focus-handle-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  --md-switch-selected-pressed-handle-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  --md-switch-selected-hover-handle-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  --md-switch-selected-track-color: var(--ix-outline-color);\n  --md-switch-selected-focus-track-color: var(--ix-outline-color);\n  --md-switch-selected-pressed-track-color: var(--ix-outline-color);\n  --md-switch-selected-hover-track-color: var(--ix-outline-color);\n\n  /* label */\n  --md-sys-typescale-label-large-line-height: 1.32285;\n\n  /* buttons */\n  --md-filled-button-icon-size: 1.5rem;\n  --md-outlined-button-icon-size: 1.5rem;\n  --md-text-button-icon-size: 1.5rem;\n\n  --md-filled-button-container-height: 2.25rem;\n  --md-outlined-button-container-height: 2.25rem;\n  --md-text-button-container-height: 2.25rem;\n\n  --md-filled-button-disabled-container-color: var(--clr-disabled);\n  --md-filled-button-disabled-container-opacity: 1;\n  --md-filled-button-disabled-label-text-color: var(--clr-on-disabled);\n  --md-filled-button-disabled-label-text-opacity: 1;\n  --md-filled-button-disabled-icon-color: var(--clr-on-disabled);\n  --md-filled-button-disabled-icon-opacity: 1;\n\n  --md-outlined-button-disabled-label-text-color: var(--clr-on-disabled);\n  --md-outlined-button-disabled-label-text-opacity: 1;\n  --md-outlined-button-disabled-outline-color: var(--clr-on-surface-disabled);\n  --md-outlined-button-disabled-outline-opacity: 1;\n  --md-outlined-button-disabled-icon-color: var(--ix-disabled-color);\n  --md-outlined-button-disabled-icon-opacity: .1;\n\n  --md-text-button-disabled-label-text-color: var(--clr-on-surface-disabled);\n  --md-text-button-disabled-label-text-opacity: 1;\n  --md-text-button-disabled-icon-color: var(--clr-on-surface-disabled);\n  --md-text-button-disabled-icon-opacity: 1;\n\n  /* checkbox */\n  --md-checkbox-outline-color: var(--clr-form-outline);\n  --md-radio-icon-color: var(--clr-form-outline);\n\n  /* chip */\n  --md-filter-chip-container-height: 1.5rem;\n  --md-input-chip-container-height: 1.5rem;\n  --md-assist-chip-container-height: 1.5rem;\n  --md-suggestion-chip-container-height: 1.5rem;\n\n  --md-filter-chip-outline-color: var(--md-sys-color-primary);\n  --md-input-chip-outline-color: var(--md-sys-color-primary);\n  --md-assist-chip-outline-color: var(--md-sys-color-primary);\n  --md-suggestion-chip-outline-color: var(--md-sys-color-primary);\n\n  --ix-chip-container-color: var(--md-sys-color-primary);\n  --md-input-chip-selected-container-color: var(--ix-chip-container-color);\n  --md-input-chip-container-color: var(--ix-chip-container-color);\n\n  --md-filter-chip-pressed-label-text-color: var(--md-sys-color-on-primary);\n  --md-input-chip-pressed-label-text-color: var(--md-sys-color-on-primary);\n  --md-assist-chip-pressed-label-text-color: var(--md-sys-color-on-primary);\n  --md-suggestion-chip-pressed-label-text-color: var(--md-sys-color-on-primary);\n\n  --md-filter-chip-focus-label-text-color: var(--md-sys-color-on-primary);\n  --md-input-chip-focus-label-text-color: var(--md-sys-color-on-primary);\n  --md-assist-chip-focus-label-text-color: var(--md-sys-color-on-primary);\n  --md-suggestion-chip-focus-label-text-color: var(--md-sys-color-on-primary);\n\n  --md-filter-chip-hover-label-text-color: var(--md-sys-color-on-primary);\n  --md-input-chip-hover-label-text-color: var(--md-sys-color-on-primary);\n  --md-assist-chip-hover-label-text-color: var(--md-sys-color-on-primary);\n  --md-suggestion-chip-hover-label-text-color: var(--md-sys-color-on-primary);\n\n  --md-filter-chip-label-text-color: var(--md-sys-color-on-primary);\n  --md-input-chip-label-text-color: var(--md-sys-color-on-primary);\n  --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);\n  --md-suggestion-chip-label-text-color: var(--md-sys-color-on-primary);\n\n  --md-input-chip-hover-trailing-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-trailing-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-hover-leading-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-leading-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-disabled-hover-leading-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-disabled-leading-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-disabled-hover-trailing-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-disabled-trailing-icon-color: var(--md-sys-color-on-primary);\n\n  --md-input-chip-pressed-trailing-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-pressed-leading-icon-color: var(--md-sys-color-on-primary);\n\n  --md-suggestion-chip-leading-space: .5rem;\n  --md-suggestion-chip-trailing-space: .5rem;\n  --md-assist-chip-container-shape: 9999px;\n\n  /* drawer */\n  --ix-draw-width-lg: 816px;\n\n  /* dialog */\n  --md-dialog-container-color: var(--clr-surface-container-lowest);\n  --md-dialog-container-shape: 3px;\n  --md-dialog-supporting-text-color: var(--md-dialog-supporting-text-color-override, --md-sys-text-color-primary);\n\n  /* tabs */\n  --md-primary-tab-container-height: 2.7rem;\n  --md-secondary-tab-container-height: 2.7rem;\n  --md-primary-tab-label-text-weight: 700;\n  --md-secondary-tab-label-text-weight: 700;\n  --md-primary-tab-icon-size: 1.4rem;\n  --md-secondary-tab-icon-size: 1.4rem;\n}\n\nhtml {\n  font-family: var(--root-primary-font);\n  font-size: var(--root-font-size);\n  line-height: var(--root-line-height);\n  color: var(--clr-on-surface);\n}\n";export{n as default};
+var n=":root,\n:host :root,\n:host {\n  --root-primary-font: 'Open Sans', 'sans-serif';\n  --root-secondary-font: 'Red Hat Display', 'sans-serif';\n  --root-font-size: 1rem;\n  --root-line-height: 1.5;\n  --root-color: var(--cp-neutral-blue-10, #092241);\n\n  /* for vaadin grid */\n  --lumo-font-family: var(--root-primary-font);\n\n  --text-default-size: var(--root-font-size);\n  --text-default-letter-spacing: 0.0275em;\n  --text-default-line-height: 1.75em;\n  --text-default-weight: normal;\n  --text-default-font: var(--root-primary-font);\n  --text-default-decoration: none;\n  --text-default-transform: none;\n\n  --text-link-decoration: underline;\n  --text-link-transform: none;\n\n  --text-small-size: .875rem;\n  --text-small-letter-spacing: 0.0275rem;\n  --text-small-line-height: 1.42857143em;\n  --text-small-weight: normal;\n  --text-small-font: var(--root-primary-font);\n  --text-small-decoration: none;\n  --text-small-transform: none;\n\n  --text-heading-size: 1.25rem;\n  --text-heading-letter-spacing: 0.0075em;\n  --text-heading-line-height: 1.2em;\n  --text-heading-weight: bold;\n  --text-heading-font: var(--root-secondary-font);\n  --text-heading-decoration: none;\n  --text-heading-transform: none;\n\n  --text-page-title-size: 2.125rem;\n  --text-page-title-letter-spacing: 0.01029412em;\n  --text-page-title-line-height: 1.17647059em;\n  --text-page-title-weight: bold;\n  --text-page-title-font: var(--root-secondary-font);\n  --text-page-title-decoration: none;\n  --text-page-title-transform: none;\n\n  --text-caption-size: .75rem;\n  --text-caption-letter-spacing: 0.03333333em;\n  --text-caption-line-height: 1.33333333em;\n  --text-caption-weight: normal;\n  --text-caption-font: var(--root-primary-font);\n  --text-caption-decoration: none;\n  --text-caption-transform: none;\n\n  --text-field-size: var(--root-font-size);\n  --text-field-letter-spacing: 0.0275em;\n  --text-field-line-height: 1.25em;\n  --text-field-weight: normal;\n  --text-field-font: var(--root-primary-font);\n  --text-field-decoration: none;\n  --text-field-transform: none;\n\n  --text-button-size: .875rem;\n  --text-button-letter-spacing: 0.08928571em;\n  --text-button-line-height: 1.42857143em;\n  --text-button-weight: bold;\n  --text-button-font: var(--root-secondary-font);\n  --text-button-decoration: none;\n  --text-button-transform: uppercase;\n\n\n  /* Color Primitives */\n  /* They should not be used directly in components */\n  /* They are meant to be consumed by \"semantic\" variables to enable multiple color modes */\n\n  /* DLR Blue: #1456E0 */\n  /* opaque */\n  --cp-dlr-blue-50: #1456E0;\n  --cp-dlr-blue-60: #2F6FF6;\n  --cp-dlr-blue-98: #F5F7FF;\n  --cp-dlr-blue-100: #FFFFFF;\n\n  /* Transparent */\n  --cp-dlr-blue-40p: #1456E066;\n  --cp-dlr-blue-30p: #1456E04D;  \n  --cp-dlr-blue-20p: #1456E033;\n  --cp-dlr-blue-10p: #1456E01A;\n\n\n  /* Neutral Blue: #092241 */\n  /* opaque */\n  --cp-neutral-blue-4: #010D1C;\n  --cp-neutral-blue-6: #031429;\n  --cp-neutral-blue-10: #092241;\n  --cp-neutral-blue-20: #2D425C;\n  --cp-neutral-blue-94: #EBEDF0;\n  --cp-neutral-blue-100: #FFFFFF;\n\n  /* Transparent */\n  --cp-neutral-blue-70p: #092241B3;\n  --cp-neutral-blue-60p: #09224199;\n  --cp-neutral-blue-50p: #09224180;\n  --cp-neutral-blue-20p: #09224133;\n  --cp-neutral-blue-12p: #0922411F;\n  --cp-neutral-blue-8p: #09224114;\n\n\n  /* Dark Mode Grey: #AEB7C6 */\n  /* Transparent */\n  --cp-dark-mode-grey-100p: #AEB7C6;\n  --cp-dark-mode-grey-70p: #AEB7C6B3;\n  --cp-dark-mode-grey-60p: #AEB7C699;\n  --cp-dark-mode-grey-50p: #AEB7C680;\n  --cp-dark-mode-grey-40p: #AEB7C666;\n  --cp-dark-mode-grey-20p: #AEB7C633;\n  --cp-dark-mode-grey-12p: #AEB7C61F;\n\n\n  /* Critical: #DB0028 */\n  --cp-critical-40: #DB0028;\n  --cp-critical-60: #F83B3A;\n  --cp-critical-100: #FFFFFF;\n\n  /* Warning: #FF9800 */\n  --cp-warning-30: #B75701;\n  --cp-warning-50: #FF9800;\n  --cp-warning-100: #FFFFFF;\n\n  /* Success: #4CAF50  */\n  --cp-success-30: #286D2B;\n  --cp-success-50: #4CAF50;\n  --cp-success-100: #FFFFFF;\n\n  /* Info: #2196F3 */\n  --cp-info-30: #13579D;\n  --cp-info-50: #2196F3;\n  --cp-info-100: #FFFFFF;\n\n  /* Inactive field */\n  --ix-inactive-field-color: rgba(9, 34, 65, 0.8);\n\n  /* Disabled field */\n  --ix-disabled-field-color: rgba(9, 34, 65);\n  --ix-disabled-field-opacity: 0.4;\n\n\n  /* Semantic Variables */\n  /* Light Mode (Default) */\n  --clr-surface: var(--cp-neutral-blue-100);\n  --clr-surface-container-lowest: var(--cp-neutral-blue-100);\n  --clr-surface-container: var(--cp-neutral-blue-94);\n\n\n  --clr-on-surface: var(--cp-neutral-blue-10);\n  --clr-on-surface-variant: var(--cp-neutral-blue-70p);\n  --clr-on-surface-disabled: var(--cp-neutral-blue-50p);\n  --clr-on-surface-primary: var(--cp-dlr-blue-50);\n  --clr-on-surface-critical: var(--cp-critical-40);\n  --clr-on-surface-warning: var(--cp-warning-30);\n  --clr-on-surface-success: var(--cp-success-30);\n  --clr-on-surface-info: var(--cp-info-30);\n\n  --clr-graphics-fill: var(--cp-neutral-blue-60p);\n  \n\n  --clr-outline: var(--cp-neutral-blue-12p);\n  --clr-outline-variant: var(--cp-neutral-blue-8p);\n  --clr-form-outline: var(--cp-neutral-blue-50p);\n  --clr-form-outline-filled: var(--cp-neutral-blue-70p);\n  --clr-form-outline-disabled: var(--cp-neutral-blue-12p);\n  --clr-form-outline-hover: var(--cp-neutral-blue-10);\n\n\n  --clr-primary: var(--cp-dlr-blue-50);\n  --clr-on-primary: var(--cp-dlr-blue-100);\n\n  --clr-primary-hover: var(--cp-dlr-blue-60);\n  --clr-on-primary-hover: var(--cp-dlr-blue-100);\n\n  --clr-primary-soft: var(--cp-dlr-blue-40p);\n  --clr-on-primary-soft: var(--cp-neutral-blue-10);\n\n  --clr-primary-subtle: var(--cp-dlr-blue-10p);\n  --clr-on-primary-subtle: var(--cp-neutral-blue-10);\n\n\n  --clr-secondary: var(--cp-neutral-blue-10);\n  --clr-on-secondary: var(--cp-neutral-blue-100);\n\n  --clr-disabled: var(--cp-neutral-blue-12p);\n  --clr-on-disabled: var(--cp-neutral-blue-60p);\n\n  --clr-critical: var(--cp-critical-40);\n  --clr-on-critical: var(--cp-critical-100);\n\n  --clr-critical-hover: var(--cp-critical-60);\n  --clr-on-critical-hover: var(--cp-critical-100);\n\n  --clr-warning: var(--cp-warning-50);\n  --clr-on-warning: var(--cp-warning-100);\n\n  --clr-success: var(--cp-success-50);\n  --clr-on-success: var(--cp-success-100);\n\n  --clr-info: var(--cp-info-50);\n  --clr-on-info: var(--cp-info-100);\n\n\n\n  /* These follow tailwind, only change them if you change the tailwind config */\n  /* .text-base 16px */\n  --ix-root-font-size: var(--root-font-size);\n  --ix-root-line-height: var(--root-line-height);\n  --ix-sys-primary: var(--clr-primary);\n\n  --ix-line-height: var(--ix-root-line-height);\n\n  /* .text-sm 14px */\n  --ix-dialog-font-size: var(--root-font-size);\n  --ix-dialog-line-height: var(--root-line-height);\n\n  --ix-icon-line-height: 1;\n\n\n  --ix-field-color: var(--clr-on-surface-variant);\n  --ix-select-leading-icon-color: var(--clr-graphics-fill);\n  --ix-select-leading-icon-inset: 0.8rem;\n  --ix-button-primary-hover-color: var(--clr-primary-hover);\n  --ix-text-dark: var(--clr-on-surface);\n  --ix-text-dark-second: var(--clr-on-surface-variant);\n  --ix-outline-color: var(--clr-outline);\n  --ix-disabled-color: var(--clr-disabled);\n\n  /* form customisation */\n  --ix-field-padding-vertical: 10px;\n  --ix-field-padding-horizontal: 1rem;\n\n  --md-ref-typeface-plain: var(--root-primary-font);\n  --md-ref-typeface-brand: var(--root-primary-font);\n  --md-outlined-field-content-line-height: var(--ix-line-height);\n  --md-sys-typescale-body-large-line-height: var(--ix-line-height);\n\n  --md-outlined-text-field-focus-outline-width: 2px;\n\n  --ix-button-confirm-color: var(--clr-primary);\n  --ix-button-cancel-color: var(--clr-critical);\n  --ix-font-color: var(--clr-on-surface);\n  --ix-icon-pending-color: var(--clr-warning);\n\n  --md-sys-color-primary: var(--clr-primary);\n  --md-sys-color-primary-container: var(--clr-primary-subtle);\n  --md-sys-color-on-primary: var(--clr-on-primary);\n  --md-sys-color-on-primary-container: var(--clr-on-primary-subtle);\n  --md-sys-color-secondary: var(--clr-secondary);\n  --md-sys-color-secondary-container: var(--clr-primary-soft);\n  --md-sys-color-on-secondary: var(--clr-on-secondary);\n  --md-sys-color-on-secondary-container: var(--clr-on-primary-soft);\n  --md-sys-color-tertiary: #4B607C;\n  --md-sys-color-tertiary-container: #D3E4FF;\n  --md-sys-color-on-tertiary: #FFFFFF;\n  --md-sys-color-on-tertiary-container: #041C35;\n  --md-sys-color-error: var(--clr-critical);\n  --md-sys-color-error-container: transparent;\n  --md-sys-color-on-error: var(--clr-on-critical);\n  --md-sys-color-on-error-container: var(--clr-on-surface-critical);\n  --md-sys-color-background: var(--clr-surface);\n  --md-sys-color-on-background: var(--clr-on-surface);\n  --md-sys-color-surface: var(--clr-surface);\n  --md-sys-color-on-surface: var(--clr-on-surface);\n  --md-sys-color-surface-variant: var(--clr-surface-container-lowest);\n  --md-sys-color-inverse-surface: var(--clr-secondary);\n  --md-sys-color-inverse-on-surface: var(--clr-on-secondary);\n  --md-sys-color-inverse-primary: var(--clr-primary-soft);\n  --md-sys-color-shadow: #000000;\n  --md-sys-color-surface-tint: var(--clr-primary);\n  --md-sys-color-scrim: #000000;\n\n  --md-sys-color-warning: var(--clr-warning);\n  --md-sys-color-info: var(--clr-info);\n  --md-sys-color-success: var(--clr-success);\n  --md-sys-text-color-primary: var(--clr-on-surface);\n  --md-sys-text-color-secondary: var(--clr-on-surface-variant);\n\n  --md-input-chip-container-shape: 9999px;\n  --md-filter-chip-container-shape: 9999px;\n  --md-suggestion-chip-container-shape: 9999px;\n\n  --md-outlined-field-top-space: var(--ix-field-padding-vertical);\n  --md-outlined-text-field-top-space: var(--ix-field-padding-vertical);\n  --md-outlined-text-field-bottom-space: var(--ix-field-padding-vertical);\n\n\n  /* outlined field spacing */\n  --md-outlined-field-leading-space: var(--ix-field-padding-horizontal);\n  --md-outlined-text-field-leading-space: var(--ix-field-padding-horizontal);\n  --md-outlined-field-bottom-space: var(--ix-field-padding-vertical);\n\n  /* outlined field colour */\n  --md-outlined-field-outline-color: var(--clr-form-outline-filled);\n  --md-outlined-field-hover-outline-color: var(--clr-form-outline-hover);\n  --md-outlined-select-text-field-outline-color: var(--clr-form-outline-filled);\n  --md-outlined-select-text-field-hover-outline-color: var(--clr-form-outline-hover);\n\n  --md-outlined-select-text-field-focus-outline-color: var(\n    --clr-primary\n  );\n  --md-outlined-field-focus-label-text-color: var(\n    --clr-on-surface-primary\n  );\n  --md-outlined-select-text-field-focus-label-text-color: var(\n    --clr-on-surface-primary\n  );\n\n  /* field label and icon */\n  --md-outlined-field-focus-label-text-color: var(\n    --clr-on-surface-primary\n  );\n  --md-outlined-field-focus-content-color: var(\n    --clr-on-surface\n  );\n  --md-outlined-text-field-focus-input-text-color: var(--clr-on-surface);\n  --md-sys-color-on-surface-variant: var(--ix-field-color);\n  --md-outlined-field-hover-label-text-color: var(--ix-field-color);\n  --md-outlined-select-text-field-label-text-color: var(--ix-field-color);\n  --md-outlined-select-text-field-hover-label-text-color: var(--ix-field-color);\n  --md-outlined-field-focus-outline-color: var(--ix-button-primary-hover-color);\n  --md-outlined-field-leading-content-color: var(\n    --ix-select-leading-icon-color\n  );\n\n  /* inactive field color */\n  --md-sys-color-outline: var(--ix-inactive-field);\n  --md-sys-color-on-surface-variant: var(--ix-inactive-field-color);\n  --md-outlined-field-label-text-color: var(--ix-inactive-fiel-color);\n  --md-outlined-text-field-outline-color: var(--ix-inactive-field-color);\n\n  /* disabled field color */\n  --md-outlined-field-disabled-outline-color: var(--ix-disabled-field-color);\n  --md-outlined-field-disabled-outline-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-field-disabled-content-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-field-disabled-label-text-opacity:var(--ix-disabled-field-opacity);\n\n  --md-outlined-text-field-disabled-outline-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-text-field-disabled-input-text-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-text-field-disabled-label-text-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-text-field-disabled-supporting-text-opacity: var(--ix-disabled-field-opacity);\n\n  --md-outlined-select-text-field-disabled-outline-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-select-text-field-disabled-input-text-opacity: var(--ix-disabled-field-opacity);\n  --md-outlined-select-text-field-disabled-label-text-opacity: var(--ix-disabled-field-opacity);\n\n\n  /* menu container */\n  --md-menu-container-shape: 3px;\n  --md-menu-container-color: var(--clr-on-primary);\n\n  /* menu item spacing */\n  --md-menu-item-bottom-space: var(--ix-field-padding-vertical);\n  --md-menu-item-top-space: var(--ix-field-padding-vertical);\n  --md-menu-item-leading-space: var(--ix-field-padding-horizontal);\n  --md-menu-item-one-line-container-height: var(--ix-field-padding-horizontal);\n\n  /* menu item hover colour */\n  --md-menu-item-label-text-color: var(--clr-on-surface);\n\n  /* menu item selected colour */\n  --md-menu-item-selected-container-color: var(--clr-surface);\n  --md-outlined-text-field-input-text-color: var(--clr-on-surface);\n  --ix-menu-item-height: 3rem;\n\n  /* field error */\n  --md-outlined-field-error-outline-color: var(--md-sys-color-error);\n  --md-outlined-field-error-content-color: var(--md-sys-color-error);\n\n  /* switch */\n  /* --md-switch-selected-track-color: #378aca; */\n  --md-switch-selected-handle-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  --md-switch-selected-focus-handle-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  --md-switch-selected-pressed-handle-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  --md-switch-selected-hover-handle-color: var(--md-sys-color-surface-container-highest, #e6e0e9);\n  --md-switch-selected-track-color: var(--ix-outline-color);\n  --md-switch-selected-focus-track-color: var(--ix-outline-color);\n  --md-switch-selected-pressed-track-color: var(--ix-outline-color);\n  --md-switch-selected-hover-track-color: var(--ix-outline-color);\n\n  /* label */\n  --md-sys-typescale-label-large-line-height: 1.32285;\n\n  /* buttons */\n  --md-filled-button-icon-size: 1.5rem;\n  --md-outlined-button-icon-size: 1.5rem;\n  --md-text-button-icon-size: 1.5rem;\n\n  --md-filled-button-container-height: 2.25rem;\n  --md-outlined-button-container-height: 2.25rem;\n  --md-text-button-container-height: 2.25rem;\n\n  --md-filled-button-disabled-container-color: var(--clr-disabled);\n  --md-filled-button-disabled-container-opacity: 1;\n  --md-filled-button-disabled-label-text-color: var(--clr-on-disabled);\n  --md-filled-button-disabled-label-text-opacity: 1;\n  --md-filled-button-disabled-icon-color: var(--clr-on-disabled);\n  --md-filled-button-disabled-icon-opacity: 1;\n\n  --md-outlined-button-disabled-label-text-color: var(--clr-on-disabled);\n  --md-outlined-button-disabled-label-text-opacity: 1;\n  --md-outlined-button-disabled-outline-color: var(--clr-on-surface-disabled);\n  --md-outlined-button-disabled-outline-opacity: 1;\n  --md-outlined-button-disabled-icon-color: var(--ix-disabled-color);\n  --md-outlined-button-disabled-icon-opacity: .1;\n\n  --md-text-button-disabled-label-text-color: var(--clr-on-surface-disabled);\n  --md-text-button-disabled-label-text-opacity: 1;\n  --md-text-button-disabled-icon-color: var(--clr-on-surface-disabled);\n  --md-text-button-disabled-icon-opacity: 1;\n\n  /* checkbox */\n  --md-checkbox-outline-color: var(--clr-form-outline);\n  --md-radio-icon-color: var(--clr-form-outline);\n\n  /* chip */\n  --md-filter-chip-container-height: 1.5rem;\n  --md-input-chip-container-height: 1.5rem;\n  --md-assist-chip-container-height: 1.5rem;\n  --md-suggestion-chip-container-height: 1.5rem;\n\n  --md-filter-chip-outline-color: var(--md-sys-color-primary);\n  --md-input-chip-outline-color: var(--md-sys-color-primary);\n  --md-assist-chip-outline-color: var(--md-sys-color-primary);\n  --md-suggestion-chip-outline-color: var(--md-sys-color-primary);\n\n  --ix-chip-container-color: var(--md-sys-color-primary);\n  --md-input-chip-selected-container-color: var(--ix-chip-container-color);\n  --md-input-chip-container-color: var(--ix-chip-container-color);\n\n  --md-filter-chip-pressed-label-text-color: var(--md-sys-color-on-primary);\n  --md-input-chip-pressed-label-text-color: var(--md-sys-color-on-primary);\n  --md-assist-chip-pressed-label-text-color: var(--md-sys-color-on-primary);\n  --md-suggestion-chip-pressed-label-text-color: var(--md-sys-color-on-primary);\n\n  --md-filter-chip-focus-label-text-color: var(--md-sys-color-on-primary);\n  --md-input-chip-focus-label-text-color: var(--md-sys-color-on-primary);\n  --md-assist-chip-focus-label-text-color: var(--md-sys-color-on-primary);\n  --md-suggestion-chip-focus-label-text-color: var(--md-sys-color-on-primary);\n\n  --md-filter-chip-hover-label-text-color: var(--md-sys-color-on-primary);\n  --md-input-chip-hover-label-text-color: var(--md-sys-color-on-primary);\n  --md-assist-chip-hover-label-text-color: var(--md-sys-color-on-primary);\n  --md-suggestion-chip-hover-label-text-color: var(--md-sys-color-on-primary);\n\n  --md-filter-chip-label-text-color: var(--md-sys-color-on-primary);\n  --md-input-chip-label-text-color: var(--md-sys-color-on-primary);\n  --md-assist-chip-label-text-color: var(--md-sys-color-on-primary);\n  --md-suggestion-chip-label-text-color: var(--md-sys-color-on-primary);\n\n  --md-input-chip-hover-trailing-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-trailing-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-hover-leading-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-leading-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-disabled-hover-leading-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-disabled-leading-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-disabled-hover-trailing-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-disabled-trailing-icon-color: var(--md-sys-color-on-primary);\n\n  --md-input-chip-pressed-trailing-icon-color: var(--md-sys-color-on-primary);\n  --md-input-chip-pressed-leading-icon-color: var(--md-sys-color-on-primary);\n\n  --md-suggestion-chip-leading-space: .5rem;\n  --md-suggestion-chip-trailing-space: .5rem;\n  --md-assist-chip-container-shape: 9999px;\n\n  /* drawer */\n  --ix-draw-width-lg: 816px;\n\n  /* dialog */\n  --md-dialog-container-color: var(--clr-surface);\n  --md-dialog-container-shape: 3px;\n  --md-dialog-supporting-text-color: var(--md-dialog-supporting-text-color-override, --md-sys-text-color-primary);\n  --md-dialog-container-color: #fff;\n\n  /* tabs */\n  --md-primary-tab-container-height: 2.7rem;\n  --md-secondary-tab-container-height: 2.7rem;\n  --md-primary-tab-label-text-weight: 700;\n  --md-secondary-tab-label-text-weight: 700;\n  --md-primary-tab-icon-size: 1.4rem;\n  --md-secondary-tab-icon-size: 1.4rem;\n}\n\nhtml {\n  font-family: var(--root-primary-font);\n  font-size: var(--root-font-size);\n  line-height: var(--root-line-height);\n  color: var(--root-color);\n}\n";export{n as default};
 //# sourceMappingURL=baseTheme.css.js.map

dist/tailwind.config.js

@@ -11,50 +11,32 @@ /** @type {import('tailwindcss').Config} */
       fontSize: {
-        default: [
-          'var(--text-default-size)',
-          {
-            lineHeight: 'var(--text-default-line-height)',
-            letterSpacing: 'var(--text-default-letter-spacing)',
-            fontWeight: 'var(--text-default-weight)',
-          },
-        ],
-        small: [
-          'var(--text-small-size)',
-          {
-            lineHeight: 'var(--text-small-line-height)',
-            letterSpacing: 'var(--text-small-letter-spacing)',
-            fontWeight: 'var(--text-small-weight)',
-          },
-        ],
-        heading: [
-          'var(--text-heading-size)',
-          {
-            lineHeight: 'var(--text-heading-line-height)',
-            letterSpacing: 'var(--text-heading-letter-spacing)',
-            fontWeight: 'var(--text-heading-weight)',
-          },
-        ],
-        'page-title': [
-          'var(--text-page-title-size)',
-          {
-            lineHeight: 'var(--text-page-title-line-height)',
-            letterSpacing: 'var(--text-page-title-letter-spacing)',
-            fontWeight: 'var(--text-page-title-weight)',
-          },
-        ],
-        caption: [
-          'var(--text-caption-size)',
-          {
-            lineHeight: 'var(--text-caption-line-height)',
-            letterSpacing: 'var(--text-caption-letter-spacing)',
-            fontWeight: 'var(--text-caption-weight)',
-          },
-        ],
-        link: [
-          'var(--text-default-size)',
-          {
-            lineHeight: 'var(--text-default-height)',
-            letterSpacing: 'var(--text-default-spacing)',
-            fontWeight: 'var(--text-default-weight)',
-          },
-        ],
+        'default': ['var(--text-default-size)', {
+          lineHeight: 'var(--text-default-line-height)',
+          letterSpacing: 'var(--text-default-letter-spacing)',
+          fontWeight: 'var(--text-default-weight)'
+        }],
+        'small': ['var(--text-small-size)', {
+          lineHeight: 'var(--text-small-line-height)',
+          letterSpacing: 'var(--text-small-letter-spacing)',
+          fontWeight: 'var(--text-small-weight)'
+        }],
+        'heading': ['var(--text-heading-size)', {
+          lineHeight: 'var(--text-heading-line-height)',
+          letterSpacing: 'var(--text-heading-letter-spacing)',
+          fontWeight: 'var(--text-heading-weight)'
+        }],
+        'page-title': ['var(--text-page-title-size)', {
+          lineHeight: 'var(--text-page-title-line-height)',
+          letterSpacing: 'var(--text-page-title-letter-spacing)',
+          fontWeight: 'var(--text-page-title-weight)'
+        }],
+        'caption': ['var(--text-caption-size)', {
+          lineHeight: 'var(--text-caption-line-height)',
+          letterSpacing: 'var(--text-caption-letter-spacing)',
+          fontWeight: 'var(--text-caption-weight)'
+        }],
+        'link': ['var(--text-default-size)', {
+          lineHeight: 'var(--text-default-height)',
+          letterSpacing: 'var(--text-default-spacing)',
+          fontWeight: 'var(--text-default-weight)'
+        }],
       },
@@ -76,148 +58,203 @@ keyframes: {
       colors: {
-        surface: {
-          DEFAULT: 'var(--cp-dlr-blue-98)',
-          dm: 'var(--cp-neutral-blue-6)',
+        'DLR-Blue': {
+          50: 'var(--clr-dlr-blue-50)',
+          60: 'var(--clr-dlr-blue-60)',
+          98: 'var(--clr-dlr-blue-98)',
+          100: 'var(--clr-dlr-blue-100)',
+          '40P': 'var(--clr-dlr-blue-40p)',
+          '30P': 'var(--clr-dlr-blue-30p)',
+          '20P': 'var(--clr-dlr-blue-20p)',
+          '10P': 'var(--clr-dlr-blue-10p)',
         },
+        'Neutral-Blue': {
+          4: 'var(--clr-neutral-blue-4)',
+          6: 'var(--clr-neutral-blue-6)',
+          10: 'var(--clr-neutral-blue-10)',
+          20: 'var(--clr-neutral-blue-20)',
+          94: 'var(--clr-neutral-blue-94)',
+          100: 'var(--clr-neutral-blue-100)',
+          '70P': 'var(--clr-neutral-blue-70p)',
+          '60P': 'var(--clr-neutral-blue-60p)',
+          '50P': 'var(--clr-neutral-blue-50p)',
+          '20P': 'var(--clr-neutral-blue-20p)',
+          '12P': 'var(--clr-neutral-blue-12p)',
+          '8P': 'var(--clr-neutral-blue-8p)'
+        },
+        'Dark-Mode-Grey': {
+          '100P': 'var(--clr-dark-mode-grey-100p)',
+          '70P': 'var(--clr-dark-mode-grey-70p)',
+          '60P': 'var(--clr-dark-mode-grey-60p)',
+          '50P': 'var(--clr-dark-mode-grey-50p)',
+          '40P': 'var(--clr-dark-mode-grey-40p)',
+          '20P': 'var(--clr-dark-mode-grey-20p)',
+          '12P': 'var(--clr-dark-mode-grey-12p)',
+        },
+        'Critical': {
+          40: 'var(--clr-critical-40)',
+          60: 'var(--clr-critical-60)',
+          100: 'var(--clr-critical-100)',
+        },
+        'Warning': {
+          30: 'var(--clr-warning-30)',
+          50: 'var(--clr-warning-50)',
+          100: 'var(--clr-warning-100)',
+        },
+        'Success': {
+          30: 'var(--clr-success-30)',
+          50: 'var(--clr-success-50)',
+          100: 'var(--clr-success-100)',
+        },
+        'Info': {
+          30: 'var(--clr-info-30)',
+          50: 'var(--clr-info-50)',
+          100: 'var(--clr-info-100)',
+        },
+        'surface': {
+          DEFAULT: 'var(--clr-dlr-blue-98)',
+          'dm': 'var(--clr-neutral-blue-6)',
+        },
         'surface-container-lowest': {
-          DEFAULT: 'var(--cp-neutral-blue-100)',
-          dm: 'var(--cp-neutral-blue-4)',
+          DEFAULT: 'var(--clr-neutral-blue-100)',
+          'dm': 'var(--clr-neutral-blue-4)',
         },
         'surface-container': {
-          DEFAULT: 'var(--cp-neutral-blue-94)',
-          dm: 'var(--cp-neutral-blue-10)',
+          DEFAULT: 'var(--clr-neutral-blue-94)',
+          'dm': 'var(--clr-neutral-blue-10)',
         },
         'on-surface': {
-          DEFAULT: 'var(--cp-neutral-blue-10)',
-          dm: 'var(--cp-dark-mode-grey-100p)',
+          DEFAULT: 'var(--clr-neutral-blue-10)',
+          'dm': 'var(--clr-dark-mode-grey-100p)',
         },
         'on-surface-variant': {
-          DEFAULT: 'var(--cp-neutral-blue-70p)',
-          dm: 'var(--cp-dark-mode-grey-70p)',
+          DEFAULT: 'var(--clr-neutral-blue-70p)',
+          'dm': 'var(--clr-dark-mode-grey-70p)',
         },
         'on-surface-disabled': {
-          DEFAULT: 'var(--cp-neutral-blue-50p)',
-          dm: 'var(--cp-dark-mode-grey-50p)',
+          DEFAULT: 'var(--clr-neutral-blue-50p)',
+          'dm': 'var(--clr-dark-mode-grey-50p)',
         },
         'on-surface-primary': {
-          DEFAULT: 'var(--cp-dlr-blue-50)',
-          dm: 'var(--cp-dlr-blue-60)',
+          DEFAULT: 'var(--clr-dlr-blue-50)',
+          'dm': 'var(--clr-dlr-blue-60)',
         },
         'on-surface-critical': {
-          DEFAULT: 'var(--cp-critical-40)',
-          dm: 'var(--cp-critical-60)',
+          DEFAULT: 'var(--clr-critical-40)',
+          'dm': 'var(--clr-critical-60)',
         },
         'on-surface-warning': {
-          DEFAULT: 'var(--cp-warning-30)',
-          dm: 'var(--cp-warning-50)',
+          DEFAULT: 'var(--clr-warning-30)',
+          'dm': 'var(--clr-warning-50)',
         },
         'on-surface-success': {
-          DEFAULT: 'var(--cp-success-30)',
-          dm: 'var(--cp-success-50)',
+          DEFAULT: 'var(--clr-success-30)',
+          'dm': 'var(--clr-success-50)',
         },
         'on-surface-info': {
-          DEFAULT: 'var(--cp-info-30)',
-          dm: 'var(--cp-info-50)',
+          DEFAULT: 'var(--clr-info-30)',
+          'dm': 'var(--clr-info-50)',
         },
         'graphics-fill': {
-          DEFAULT: 'var(--cp-neutral-blue-60p)',
-          dm: 'var(--cp-dark-mode-grey-60p)',
+          DEFAULT: 'var(--clr-neutral-blue-60p)',
+          'dm': 'var(--clr-dark-mode-grey-60p)',
         },
-        outline: {
-          DEFAULT: 'var(--cp-neutral-blue-12p)',
-          dm: 'var(--cp-dark-mode-grey-20p)',
+        'outline': {
+          DEFAULT: 'var(--clr-neutral-blue-12p)',
+          'dm': 'var(--clr-dark-mode-grey-20p)',
         },
         'outline-variant': {
-          DEFAULT: 'var(--cp-neutral-blue-8p)',
-          dm: 'var(--cp-dark-mode-grey-12p)',
+          DEFAULT: 'var(--clr-neutral-blue-8p)',
+          'dm': 'var(--clr-dark-mode-grey-12p)',
         },
-        primary: {
-          DEFAULT: 'var(--cp-dlr-blue-50)',
-          dm: 'var(--cp-dlr-blue-50)',
+        'primary': {
+          DEFAULT: 'var(--clr-dlr-blue-50)',
+          'dm': 'var(--clr-dlr-blue-50)',
         },
         'on-primary': {
-          DEFAULT: 'var(--cp-dlr-blue-100)',
-          dm: 'var(--cp-dlr-blue-100)',
+          DEFAULT: 'var(--clr-dlr-blue-100)',
+          'dm': 'var(--clr-dlr-blue-100)',
         },
         'primary-hover': {
-          DEFAULT: 'var(--cp-dlr-blue-60)',
-          dm: 'var(--cp-dlr-blue-60)',
+          DEFAULT: 'var(--clr-dlr-blue-60)',
+          'dm': 'var(--clr-dlr-blue-60)',
         },
         'on-primary-hover': {
-          DEFAULT: 'var(--cp-dlr-blue-100)',
-          dm: 'var(--cp-dlr-blue-100)',
+          DEFAULT: 'var(--clr-dlr-blue-100)',
+          'dm': 'var(--clr-dlr-blue-100)',
         },
         'primary-soft': {
-          DEFAULT: 'var(--cp-dlr-blue-40p)',
-          dm: 'var(--cp-dlr-blue-40p)',
+          DEFAULT: 'var(--clr-dlr-blue-40p)',
+          'dm': 'var(--clr-dlr-blue-40p)',
         },
         'on-primary-soft': {
-          DEFAULT: 'var(--cp-neutral-blue-10)',
-          dm: 'var(--cp-dark-mode-grey-100p)',
+          DEFAULT: 'var(--clr-neutral-blue-10)',
+          'dm': 'var(--clr-dark-mode-grey-100p)',
         },
         'primary-subtle': {
-          DEFAULT: 'var(--cp-dlr-blue-10p)',
-          dm: 'var(--cp-dlr-blue-20p)',
+          DEFAULT: 'var(--clr-dlr-blue-10p)',
+          'dm': 'var(--clr-dlr-blue-20p)',
         },
         'on-primary-subtle': {
-          DEFAULT: 'var(--cp-neutral-blue-10)',
-          dm: 'var(--cp-dark-mode-grey-100p)',
+          DEFAULT: 'var(--clr-neutral-blue-10)',
+          'dm': 'var(--clr-dark-mode-grey-100p)',
         },
-        secondary: {
-          DEFAULT: 'var(--cp-neutral-blue-10)',
-          dm: 'var(--cp-neutral-blue-20)',
+        'secondary': {
+          DEFAULT: 'var(--clr-neutral-blue-10)',
+          'dm': 'var(--clr-neutral-blue-20)',
         },
         'on-secondary': {
-          DEFAULT: 'var(--cp-neutral-blue-100)',
-          dm: 'var(--cp-neutral-blue-100)',
+          DEFAULT: 'var(--clr-neutral-blue-100)',
+          'dm': 'var(--clr-neutral-blue-100)',
         },
-        disabled: {
-          DEFAULT: 'var(--cp-neutral-blue-12p)',
-          dm: 'var(--cp-dark-mode-grey-20p)',
+        'disabled': {
+          DEFAULT: 'var(--clr-neutral-blue-12p)',
+          'dm': 'var(--clr-dark-mode-grey-20p)',
         },
         'on-disabled': {
-          DEFAULT: 'var(--cp-neutral-blue-60p)',
-          dm: 'var(--cp-dark-mode-grey-70p)',
+          DEFAULT: 'var(--clr-neutral-blue-60p)',
+          'dm': 'var(--clr-dark-mode-grey-70p)',
         },
-        critical: {
-          DEFAULT: 'var(--cp-critical-40)',
-          dm: 'var(--cp-critical-40)',
+        'critical': {
+          DEFAULT: 'var(--clr-critical-40)',
+          'dm': 'var(--clr-critical-40)',
         },
         'on-critical': {
-          DEFAULT: 'var(--cp-critical-100)',
-          dm: 'var(--cp-critical-100)',
+          DEFAULT: 'var(--clr-critical-100)',
+          'dm': 'var(--clr-critical-100)',
         },
         'critical-hover': {
-          DEFAULT: 'var(--cp-critical-60)',
-          dm: 'var(--cp-critical-60)',
+          DEFAULT: 'var(--clr-critical-60)',
+          'dm': 'var(--clr-critical-60)',
         },
         'on-critical-hover': {
-          DEFAULT: 'var(--cp-critical-100)',
-          dm: 'var(--cp-critical-100)',
+          DEFAULT: 'var(--clr-critical-100)',
+          'dm': 'var(--clr-critical-100)',
         },
-        warning: {
-          DEFAULT: 'var(--cp-warning-50)',
-          dm: 'var(--cp-warning-50)',
+        'warning': {
+          DEFAULT: 'var(--clr-warning-50)',
+          'dm': 'var(--clr-warning-50)',
         },
         'on-warning': {
-          DEFAULT: 'var(--cp-warning-100)',
-          dm: 'var(--cp-warning-100)',
+          DEFAULT: 'var(--clr-warning-100)',
+          'dm': 'var(--clr-warning-100)',
         },
-        success: {
-          DEFAULT: 'var(--cp-success-50)',
-          dm: 'var(--cp-success-50)',
+        'success': {
+          DEFAULT: 'var(--clr-success-50)',
+          'dm': 'var(--clr-success-50)',
         },
         'on-success': {
-          DEFAULT: 'var(--cp-success-100)',
-          dm: 'var(--cp-success-100)',
+          DEFAULT: 'var(--clr-success-100)',
+          'dm': 'var(--clr-success-100)',
         },
-        info: {
-          DEFAULT: 'var(--cp-info-50)',
-          dm: 'var(--cp-info-50)',
+        'info': {
+          DEFAULT: 'var(--clr-info-50)',
+          'dm': 'var(--clr-info-50)',
         },
         'on-info': {
-          DEFAULT: 'var(--cp-info-100)',
-          dm: 'var(--cp-info-100)',
-        },
+          DEFAULT: 'var(--clr-info-100)',
+          'dm': 'var(--clr-info-100)',
+        }
       },
-      backgroundColor: {},
+      backgroundColor: {
+
+      }
     },
@@ -224,0 +261,0 @@ },

package.json

@@ -6,3 +6,3 @@ {
   "author": "Digital Realty",
-  "version": "2.1.10-alpha-245829-t51.0",
+  "version": "2.1.10-alpha-245842-t56.0",
   "type": "module",
@@ -122,3 +122,3 @@ "main": "./dist/index.js",
   ],
-  "gitHead": "84865f8a46cc38a0a94d589a94f3494e34138c0a"
+  "gitHead": "ec2d6f88281e61129805897fd4cd0ad03d24e755"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

156860

increased by1.21%

Lines of code

597

increased by6.42%

No dependency changes