@vendure/admin-ui 3.2.0 → 3.2.2

package/static/styles/theme/default.scss

@@ -1,254 +1,254 @@
-@import 'variables';
-
-// Default Vendure light theme. The Clarity component custom properties
-// are left as their defaults.
-:root [cds-theme] {
-    // Colors
-    --color-grey-100: #fafafa;
-    --color-grey-200: #f2f3f5;
-    --color-grey-300: #bfc3cc;
-    --color-grey-400: #97979a;
-    --color-grey-500: #525456;
-    --color-grey-600: #3f4445;
-    --color-grey-700: #303233;
-    --color-grey-800: #202223;
-    --color-grey-900: #0f1011;
-
-    --color-white: #fff;
-    --color-black: #000;
-    --color-weight-100: hsl(0 0% 95%);
-    --color-weight-125: hsl(0 0% 93%);
-    --color-weight-150: hsl(0 0% 90%);
-    --color-weight-200: hsl(0 0% 85%);
-    --color-weight-300: hsl(0 0% 75%);
-    --color-weight-400: hsl(0 0% 65%);
-    --color-weight-500: hsl(0 0% 55%);
-    --color-weight-600: hsl(0 0% 45%);
-    --color-weight-700: hsl(0 0% 35%);
-    --color-weight-800: hsl(0 0% 25%);
-    --color-weight-900: hsl(0 0% 15%);
-    --color-weight-950: hsl(0 0% 10%);
-    --color-weight-975: hsl(0 0% 7%);
-    --color-weight-1000: hsl(0 0% 5%);
-
-    --color-primary-100: hsl(196 100% 95%);
-    --color-primary-125: hsl(196 100% 93%);
-    --color-primary-150: hsl(196 100% 90%);
-    --color-primary-200: hsl(196 100% 85%);
-    --color-primary-300: hsl(196 100% 75%);
-    --color-primary-400: hsl(196 100% 65%);
-    --color-primary-500: hsl(196 100% 55%);
-    --color-primary-600: hsl(196 100% 45%);
-    --color-primary-700: hsl(196 100% 35%);
-    --color-primary-800: hsl(196 100% 25%);
-    --color-primary-900: hsl(196 100% 15%);
-    --color-primary-950: hsl(196 100% 10%);
-    --color-primary-975: hsl(196 100% 7%);
-    --color-primary-1000: hsl(196 100 5%);
-
-    --color-accent-100: hsl(35 100% 95%);
-    --color-accent-125: hsl(35 100% 93%);
-    --color-accent-150: hsl(35 100% 90%);
-    --color-accent-200: hsl(35 100% 85%);
-    --color-accent-300: hsl(35 100% 75%);
-    --color-accent-400: hsl(35 100% 65%);
-    --color-accent-500: hsl(35 100% 55%);
-    --color-accent-600: hsl(35 100% 45%);
-    --color-accent-700: hsl(35 100% 35%);
-    --color-accent-800: hsl(35 100% 25%);
-    --color-accent-900: hsl(35 100% 15%);
-    --color-accent-950: hsl(35 100% 10%);
-    --color-accent-975: hsl(35 100% 7%);
-    --color-accent-1000: hsl(35 100% 5%);
-
-    --color-success-100: hsl(158 76% 95%);
-    --color-success-125: hsl(158 76% 93%);
-    --color-success-150: hsl(158 76% 90%);
-    --color-success-200: hsl(158 76% 85%);
-    --color-success-300: hsl(158 76% 75%);
-    --color-success-400: hsl(158 76% 65%);
-    --color-success-500: hsl(158 76% 55%);
-    --color-success-600: hsl(158 76% 45%);
-    --color-success-700: hsl(158 76% 35%);
-    --color-success-800: hsl(158 76% 25%);
-    --color-success-900: hsl(158 76% 15%);
-    --color-success-950: hsl(158 76% 10%);
-    --color-success-975: hsl(158 76% 7%);
-    --color-success-1000: hsl(158 76% 5%);
-
-    --color-warning-100: hsl(53 100% 95%);
-    --color-warning-125: hsl(53 100% 93%);
-    --color-warning-150: hsl(53 100% 90%);
-    --color-warning-200: hsl(53 100% 85%);
-    --color-warning-300: hsl(53 100% 75%);
-    --color-warning-400: hsl(53 100% 65%);
-    --color-warning-500: hsl(53, 100%, 47%);
-    --color-warning-600: hsl(53 100% 45%);
-    --color-warning-700: hsl(53 100% 35%);
-    --color-warning-800: hsl(53 100% 25%);
-    --color-warning-900: hsl(53 100% 15%);
-    --color-warning-950: hsl(53 100% 10%);
-    --color-warning-975: hsl(53 100% 7%);
-    --color-warning-1000: hsl(53 100% 5%);
-
-    --color-error-100: hsl(4 100% 95%);
-    --color-error-125: hsl(4 100% 93%);
-    --color-error-150: hsl(4 100% 90%);
-    --color-error-200: hsl(4 100% 85%);
-    --color-error-300: hsl(4 100% 75%);
-    --color-error-400: hsl(4 100% 65%);
-    --color-error-500: hsl(4, 73%, 51%);
-    --color-error-600: hsl(4 100% 45%);
-    --color-error-700: hsl(4 100% 35%);
-    --color-error-800: hsl(4 100% 25%);
-    --color-error-900: hsl(4 100% 15%);
-    --color-error-950: hsl(4 100% 10%);
-    --color-error-975: hsl(4 100% 7%);
-    --color-error-1000: hsl(4 100% 5%);
-
-
-
-    // Universal semantic colors
-    --color-component-bg-100: var(--color-grey-100);
-    --color-component-bg-200: var(--color-grey-200);
-    --color-component-bg-300: var(--color-grey-300);
-    --color-component-border-100: var(--color-grey-200);
-    --color-component-border-200: var(--color-grey-300);
-    --color-component-border-300: var(--color-grey-400);
-    --color-text-100: var(--clr-global-font-color);
-    --color-text-200: var(--clr-global-font-color-secondary);
-    --color-text-300: var(--color-grey-400);
-    --clr-global-font-color: hsl(198, 0%, 40%);
-    --clr-list-item-color: var(--clr-global-font-color);
-    --color-text-inverse: white;
-    --color-text-active: var(--color-primary-800);
-
-    // Component-specific colors
-    --color-scrollbar-bg: var(--color-weight-150);
-    --color-scrollbar-thumb: var(--color-weight-300);
-    --color-scrollbar-thumb-hover: var(--color-weight-400);
-
-    --color-top-bar-bg: white;
-    --color-card-border: var(--color-weight-200);
-    --color-card-bg: hsl(0 0% 99%);
-
-    --color-left-nav-bg: var(--color-weight-100);
-    --color-left-nav-text: var(--color-text);
-    --color-left-nav-text-hover: var(--color-primary-700);
-    --color-surface-bg: white;
-    --color-page-header: hsl(0 0% 98%);
-    --color-page-header-item-bg: var(--color-weight-125);
-
-    --color-button-bg: hsl(0 0% 98%);
-    --color-button-hover-bg: var(--color-weight-100);
-    --color-button-ghost-bg: white;
-    --color-button-ghost-text: var(--color-text-100);
-    --color-button-ghost-hover-text: var(--color-primary-700);
-    --color-button-ghost-hover-bg: var(--color-primary-100);
-    --color-button-small-bg: var(--color-weight-150);
-    --color-button-small-hover-bg: var(--color-weight-200);
-    --color-button-small-text: var(--color-weight-700);
-
-    --color-channel-switcher-bg: var(--color-weight-150);
-    --color-channel-switcher-hover-bg: var(--color-weight-125);
-
-
-    --color-icon-button: var(--color-grey-600);
-    --color-icon-button-hover: var(--color-primary-600);
-    --color-form-input-bg: white;
-    --color-form-input-focus: var(--color-primary-100);
-
-    --color-chip-warning-border: var(--color-warning-500);
-    --color-chip-warning-text: var(--color-warning-800);
-    --color-chip-warning-bg: var(--color-warning-150);
-    --color-chip-success-border: var(--color-success-200);
-    --color-chip-success-text: var(--color-success-800);
-    --color-chip-success-bg: var(--color-success-150);
-    --color-chip-error-border: var(--color-error-200);
-    --color-chip-error-text: var(--color-error-800);
-    --color-chip-error-bg: var(--color-error-150);
-
-    --color-json-editor-background-color: var(--color-grey-200);
-    --color-json-editor-text: var(--color-grey-600);
-    --color-json-editor-string: var(--color-secondary-600);
-    --color-json-editor-number: var(--color-primary-700);
-    --color-json-editor-boolean: var(--color-primary-700);
-    --color-json-editor-null: var(--color-grey-500);
-    --color-json-editor-key: var(--color-success-800);
-    --color-json-editor-error: var(--color-error-700);
-
-    --color-table-header-border: var(--color-weight-200);
-    --color-table-row-hover-bg: var(--color-weight-100);
-    --color-table-row-active-bg: var(--color-primary-100);
-    --color-table-row-separator: var(--color-weight-100);
-    --data-table-filter-box-shadow: inset -1px 6px 5px 0px rgb(165 165 165 / 8%);
-
-    --color-split-view-separator-border: var(--color-weight-150);
-    --color-split-view-separator-resize-border: var(--color-primary-400);
-
-    --color-dropdown-item-focus-outline: rgba(77, 207, 255, 0.53);
-
-
-    // Layout
-    --layout-content-max-width: 1400px;
-    --left-nav-width: 0px;
-    --surface-width: 100vw;
-    --surface-margin-left: 8px;
-
-    // Login page
-    --login-wrapper-inner-bg: var(--color-white);
-    --login-page-bg: url(data:image/gif;base64,R0lGODlhFAAhAKIAABwcHBsbGxcXFx0dHRUVFRkZGR4eHhQUFCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ2NzI5LCAyMDEyLzA1LzAzLTEzOjQwOjAzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTIuMCBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBOTg1NDlCNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBOTg1NDlDNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEE5ODU0OTk2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEE5ODU0OUE2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAFAAhAAADfSi23M7igEcZOIfUSvApm1N42RAuQ0cqZ0Ri0xa8nlaltAdSY44RJsfAt3q4iLDGDFlj4Ji6RQ/6GwypqyOtwO12BQKv+EawnRq93dlwLa0NWtZpSYptniRzZfpSP9o0QBVaNHJKUHYoKkh6BnxIaoBMgnBYGAp0lgCLlgQJADs=);
-    --color-login-gradient-top: var(--color-primary-800);
-    --color-login-gradient-bottom: black;
-
-
-    // Border radius
-    --clr-global-borderradius: 4px;
-    --border-radius-sm: calc(var(--clr-global-borderradius) / 2);
-    --border-radius: var(--clr-global-borderradius);
-    --border-radius-lg: calc(var(--space-unit) * 3);
-    --border-radius-img: var(--clr-global-borderradius);
-    --border-radius-input: var(--clr-global-borderradius);
-
-    // typography
-    --font-size-xs: 12px;
-    --font-size-sm: 14px;
-    --font-size-base: 16px;
-    --font-size-lg: 18px;
-    --font-size-xl: 20px;
-    --cds-global-typography-body-line-height: 24px;
-    --cds-alias-typography-body-line-height: 16px;
-    --cds-alias-typography-body-letter-spacing: normal;
-    --cds-alias-typography-display-letter-spacing: normal;
-    --cds-alias-typography-secondary-font-size: 13px;
-    --cds-alias-typography-font-size-3: var(--font-size-sm);
-    --cds-global-typography-font-size-4: var(--cds-alias-typography-secondary-font-size);
-
-    // spacing
-    --space-unit: 8px;
-
-    // clarity styles
-    --clr-link-visited-color: var(--color-weight-700);
-    --clr-link-hover-color: var(--color-weight-700);
-    --clr-link-active-color: var(--color-weight-700);
-    --clr-link-color: var(--color-weight-700);
-    --clr-list-item-color: var(--color-weight-700);
-
-    @media screen and (min-width: $breakpoint-small) {
-        //--left-nav-width: 100px;
-        //--surface-width: calc(100vw - 100px);
-        //--surface-margin-left: 4px;
-    }
-
-    @media screen and (min-width: $breakpoint-medium) {
-        --left-nav-width: 250px;
-        --surface-width: calc(100vw - 250px);
-        --surface-margin-left: calc(var(--space-unit) * 4);
-    }
-
-    @media screen and (min-width: $breakpoint-large) {
-        --left-nav-width: 300px;
-        --surface-width: calc(100vw - 300px);
-        --surface-margin-left: calc(var(--space-unit) * 6);
-    }
-}
+@import 'variables';
+
+// Default Vendure light theme. The Clarity component custom properties
+// are left as their defaults.
+:root [cds-theme] {
+    // Colors
+    --color-grey-100: #fafafa;
+    --color-grey-200: #f2f3f5;
+    --color-grey-300: #bfc3cc;
+    --color-grey-400: #97979a;
+    --color-grey-500: #525456;
+    --color-grey-600: #3f4445;
+    --color-grey-700: #303233;
+    --color-grey-800: #202223;
+    --color-grey-900: #0f1011;
+
+    --color-white: #fff;
+    --color-black: #000;
+    --color-weight-100: hsl(0 0% 95%);
+    --color-weight-125: hsl(0 0% 93%);
+    --color-weight-150: hsl(0 0% 90%);
+    --color-weight-200: hsl(0 0% 85%);
+    --color-weight-300: hsl(0 0% 75%);
+    --color-weight-400: hsl(0 0% 65%);
+    --color-weight-500: hsl(0 0% 55%);
+    --color-weight-600: hsl(0 0% 45%);
+    --color-weight-700: hsl(0 0% 35%);
+    --color-weight-800: hsl(0 0% 25%);
+    --color-weight-900: hsl(0 0% 15%);
+    --color-weight-950: hsl(0 0% 10%);
+    --color-weight-975: hsl(0 0% 7%);
+    --color-weight-1000: hsl(0 0% 5%);
+
+    --color-primary-100: hsl(196 100% 95%);
+    --color-primary-125: hsl(196 100% 93%);
+    --color-primary-150: hsl(196 100% 90%);
+    --color-primary-200: hsl(196 100% 85%);
+    --color-primary-300: hsl(196 100% 75%);
+    --color-primary-400: hsl(196 100% 65%);
+    --color-primary-500: hsl(196 100% 55%);
+    --color-primary-600: hsl(196 100% 45%);
+    --color-primary-700: hsl(196 100% 35%);
+    --color-primary-800: hsl(196 100% 25%);
+    --color-primary-900: hsl(196 100% 15%);
+    --color-primary-950: hsl(196 100% 10%);
+    --color-primary-975: hsl(196 100% 7%);
+    --color-primary-1000: hsl(196 100 5%);
+
+    --color-accent-100: hsl(35 100% 95%);
+    --color-accent-125: hsl(35 100% 93%);
+    --color-accent-150: hsl(35 100% 90%);
+    --color-accent-200: hsl(35 100% 85%);
+    --color-accent-300: hsl(35 100% 75%);
+    --color-accent-400: hsl(35 100% 65%);
+    --color-accent-500: hsl(35 100% 55%);
+    --color-accent-600: hsl(35 100% 45%);
+    --color-accent-700: hsl(35 100% 35%);
+    --color-accent-800: hsl(35 100% 25%);
+    --color-accent-900: hsl(35 100% 15%);
+    --color-accent-950: hsl(35 100% 10%);
+    --color-accent-975: hsl(35 100% 7%);
+    --color-accent-1000: hsl(35 100% 5%);
+
+    --color-success-100: hsl(158 76% 95%);
+    --color-success-125: hsl(158 76% 93%);
+    --color-success-150: hsl(158 76% 90%);
+    --color-success-200: hsl(158 76% 85%);
+    --color-success-300: hsl(158 76% 75%);
+    --color-success-400: hsl(158 76% 65%);
+    --color-success-500: hsl(158 76% 55%);
+    --color-success-600: hsl(158 76% 45%);
+    --color-success-700: hsl(158 76% 35%);
+    --color-success-800: hsl(158 76% 25%);
+    --color-success-900: hsl(158 76% 15%);
+    --color-success-950: hsl(158 76% 10%);
+    --color-success-975: hsl(158 76% 7%);
+    --color-success-1000: hsl(158 76% 5%);
+
+    --color-warning-100: hsl(53 100% 95%);
+    --color-warning-125: hsl(53 100% 93%);
+    --color-warning-150: hsl(53 100% 90%);
+    --color-warning-200: hsl(53 100% 85%);
+    --color-warning-300: hsl(53 100% 75%);
+    --color-warning-400: hsl(53 100% 65%);
+    --color-warning-500: hsl(53, 100%, 47%);
+    --color-warning-600: hsl(53 100% 45%);
+    --color-warning-700: hsl(53 100% 35%);
+    --color-warning-800: hsl(53 100% 25%);
+    --color-warning-900: hsl(53 100% 15%);
+    --color-warning-950: hsl(53 100% 10%);
+    --color-warning-975: hsl(53 100% 7%);
+    --color-warning-1000: hsl(53 100% 5%);
+
+    --color-error-100: hsl(4 100% 95%);
+    --color-error-125: hsl(4 100% 93%);
+    --color-error-150: hsl(4 100% 90%);
+    --color-error-200: hsl(4 100% 85%);
+    --color-error-300: hsl(4 100% 75%);
+    --color-error-400: hsl(4 100% 65%);
+    --color-error-500: hsl(4, 73%, 51%);
+    --color-error-600: hsl(4 100% 45%);
+    --color-error-700: hsl(4 100% 35%);
+    --color-error-800: hsl(4 100% 25%);
+    --color-error-900: hsl(4 100% 15%);
+    --color-error-950: hsl(4 100% 10%);
+    --color-error-975: hsl(4 100% 7%);
+    --color-error-1000: hsl(4 100% 5%);
+
+
+
+    // Universal semantic colors
+    --color-component-bg-100: var(--color-grey-100);
+    --color-component-bg-200: var(--color-grey-200);
+    --color-component-bg-300: var(--color-grey-300);
+    --color-component-border-100: var(--color-grey-200);
+    --color-component-border-200: var(--color-grey-300);
+    --color-component-border-300: var(--color-grey-400);
+    --color-text-100: var(--clr-global-font-color);
+    --color-text-200: var(--clr-global-font-color-secondary);
+    --color-text-300: var(--color-grey-400);
+    --clr-global-font-color: hsl(198, 0%, 40%);
+    --clr-list-item-color: var(--clr-global-font-color);
+    --color-text-inverse: white;
+    --color-text-active: var(--color-primary-800);
+
+    // Component-specific colors
+    --color-scrollbar-bg: var(--color-weight-150);
+    --color-scrollbar-thumb: var(--color-weight-300);
+    --color-scrollbar-thumb-hover: var(--color-weight-400);
+
+    --color-top-bar-bg: white;
+    --color-card-border: var(--color-weight-200);
+    --color-card-bg: hsl(0 0% 99%);
+
+    --color-left-nav-bg: var(--color-weight-100);
+    --color-left-nav-text: var(--color-text);
+    --color-left-nav-text-hover: var(--color-primary-700);
+    --color-surface-bg: white;
+    --color-page-header: hsl(0 0% 98%);
+    --color-page-header-item-bg: var(--color-weight-125);
+
+    --color-button-bg: hsl(0 0% 98%);
+    --color-button-hover-bg: var(--color-weight-100);
+    --color-button-ghost-bg: white;
+    --color-button-ghost-text: var(--color-text-100);
+    --color-button-ghost-hover-text: var(--color-primary-700);
+    --color-button-ghost-hover-bg: var(--color-primary-100);
+    --color-button-small-bg: var(--color-weight-150);
+    --color-button-small-hover-bg: var(--color-weight-200);
+    --color-button-small-text: var(--color-weight-700);
+
+    --color-channel-switcher-bg: var(--color-weight-150);
+    --color-channel-switcher-hover-bg: var(--color-weight-125);
+
+
+    --color-icon-button: var(--color-grey-600);
+    --color-icon-button-hover: var(--color-primary-600);
+    --color-form-input-bg: white;
+    --color-form-input-focus: var(--color-primary-100);
+
+    --color-chip-warning-border: var(--color-warning-500);
+    --color-chip-warning-text: var(--color-warning-800);
+    --color-chip-warning-bg: var(--color-warning-150);
+    --color-chip-success-border: var(--color-success-200);
+    --color-chip-success-text: var(--color-success-800);
+    --color-chip-success-bg: var(--color-success-150);
+    --color-chip-error-border: var(--color-error-200);
+    --color-chip-error-text: var(--color-error-800);
+    --color-chip-error-bg: var(--color-error-150);
+
+    --color-json-editor-background-color: var(--color-grey-200);
+    --color-json-editor-text: var(--color-grey-600);
+    --color-json-editor-string: var(--color-secondary-600);
+    --color-json-editor-number: var(--color-primary-700);
+    --color-json-editor-boolean: var(--color-primary-700);
+    --color-json-editor-null: var(--color-grey-500);
+    --color-json-editor-key: var(--color-success-800);
+    --color-json-editor-error: var(--color-error-700);
+
+    --color-table-header-border: var(--color-weight-200);
+    --color-table-row-hover-bg: var(--color-weight-100);
+    --color-table-row-active-bg: var(--color-primary-100);
+    --color-table-row-separator: var(--color-weight-100);
+    --data-table-filter-box-shadow: inset -1px 6px 5px 0px rgb(165 165 165 / 8%);
+
+    --color-split-view-separator-border: var(--color-weight-150);
+    --color-split-view-separator-resize-border: var(--color-primary-400);
+
+    --color-dropdown-item-focus-outline: rgba(77, 207, 255, 0.53);
+
+
+    // Layout
+    --layout-content-max-width: 1400px;
+    --left-nav-width: 0px;
+    --surface-width: 100vw;
+    --surface-margin-left: 8px;
+
+    // Login page
+    --login-wrapper-inner-bg: var(--color-white);
+    --login-page-bg: url(data:image/gif;base64,R0lGODlhFAAhAKIAABwcHBsbGxcXFx0dHRUVFRkZGR4eHhQUFCH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ2NzI5LCAyMDEyLzA1LzAzLTEzOjQwOjAzICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgRWxlbWVudHMgMTIuMCBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjhBOTg1NDlCNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjhBOTg1NDlDNjMwNDExRUFBNEUwQ0M2RDdENUQ3RTBFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OEE5ODU0OTk2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEE5ODU0OUE2MzA0MTFFQUE0RTBDQzZEN0Q1RDdFMEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQAAAAAACwAAAAAFAAhAAADfSi23M7igEcZOIfUSvApm1N42RAuQ0cqZ0Ri0xa8nlaltAdSY44RJsfAt3q4iLDGDFlj4Ji6RQ/6GwypqyOtwO12BQKv+EawnRq93dlwLa0NWtZpSYptniRzZfpSP9o0QBVaNHJKUHYoKkh6BnxIaoBMgnBYGAp0lgCLlgQJADs=);
+    --color-login-gradient-top: var(--color-primary-800);
+    --color-login-gradient-bottom: black;
+
+
+    // Border radius
+    --clr-global-borderradius: 4px;
+    --border-radius-sm: calc(var(--clr-global-borderradius) / 2);
+    --border-radius: var(--clr-global-borderradius);
+    --border-radius-lg: calc(var(--space-unit) * 3);
+    --border-radius-img: var(--clr-global-borderradius);
+    --border-radius-input: var(--clr-global-borderradius);
+
+    // typography
+    --font-size-xs: 12px;
+    --font-size-sm: 14px;
+    --font-size-base: 16px;
+    --font-size-lg: 18px;
+    --font-size-xl: 20px;
+    --cds-global-typography-body-line-height: 24px;
+    --cds-alias-typography-body-line-height: 16px;
+    --cds-alias-typography-body-letter-spacing: normal;
+    --cds-alias-typography-display-letter-spacing: normal;
+    --cds-alias-typography-secondary-font-size: 13px;
+    --cds-alias-typography-font-size-3: var(--font-size-sm);
+    --cds-global-typography-font-size-4: var(--cds-alias-typography-secondary-font-size);
+
+    // spacing
+    --space-unit: 8px;
+
+    // clarity styles
+    --clr-link-visited-color: var(--color-weight-700);
+    --clr-link-hover-color: var(--color-weight-700);
+    --clr-link-active-color: var(--color-weight-700);
+    --clr-link-color: var(--color-weight-700);
+    --clr-list-item-color: var(--color-weight-700);
+
+    @media screen and (min-width: $breakpoint-small) {
+        //--left-nav-width: 100px;
+        //--surface-width: calc(100vw - 100px);
+        //--surface-margin-left: 4px;
+    }
+
+    @media screen and (min-width: $breakpoint-medium) {
+        --left-nav-width: 250px;
+        --surface-width: calc(100vw - 250px);
+        --surface-margin-left: calc(var(--space-unit) * 4);
+    }
+
+    @media screen and (min-width: $breakpoint-large) {
+        --left-nav-width: 300px;
+        --surface-width: calc(100vw - 300px);
+        --surface-margin-left: calc(var(--space-unit) * 6);
+    }
+}

package/static/styles/ui-extension-theme.scss

@@ -1,13 +1,13 @@
-// This file is used to compile the theme.min.css file which can be used
-// by ui extensions to get the same styles as the main app.
-
-@import "global/sass-overrides";
-@import "global/clarity";
-@import "global/buttons";
-@import "global/forms";
-@import "global/overrides";
-@import "global/utilities";
-@import "fonts";
-@import "global/global";
-@import 'theme/default';
-@import 'theme/dark';
+// This file is used to compile the theme.min.css file which can be used
+// by ui extensions to get the same styles as the main app.
+
+@import "global/sass-overrides";
+@import "global/clarity";
+@import "global/buttons";
+@import "global/forms";
+@import "global/overrides";
+@import "global/utilities";
+@import "fonts";
+@import "global/global";
+@import 'theme/default';
+@import 'theme/dark';