@solid-design-system/tokens 5.6.0 → 6.0.0-next.1
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/README.md +3 -1
- package/dist/theme.js +1 -0
- package/dist/themes/tailwind.css +293 -0
- package/dist/themes/ui-dark/ui-dark.css +201 -0
- package/dist/themes/ui-light/ui-light.css +143 -0
- package/dist/themes/vb/vb.css +200 -0
- package/dist/tokens.scss +132 -147
- package/package.json +14 -5
- package/dist/tokens.tailwind.json +0 -712
package/README.md
CHANGED
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
# @solid-design-system/tokens
|
|
7
7
|
|
|
8
|
-
The Solid Design System Tokens package provides a collection of design tokens for colors, typography and spacing. It ensures design consistency and collaboration between our designers and developers when building components for the Solid Design System.
|
|
8
|
+
The Solid Design System Tokens package provides a collection of themes, design tokens for colors, typography and spacing. It ensures design consistency and collaboration between our designers and developers when building components for the Solid Design System.
|
|
9
|
+
|
|
10
|
+
Themes can be used for different purposes such as dark and light mode or to align with a specific brand. For further information on how to work with themes go to [Multi theming documentation](link).
|
|
9
11
|
|
|
10
12
|
Check out the [full documentation](https://solid-design-system.fe.union-investment.de/docs/) for detailed information.
|
package/dist/theme.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default {"base":[{"name":"animate-bounce-once","value":"bounce-once var(--sd-duration-medium, 300ms) ease-in-out;"},{"name":"animate-grow","value":"grow linear;"},{"name":"animate-loader-current","value":"wave 1.3s infinite, loader-color-current 2.6s infinite;"},{"name":"animate-loader-primary","value":"wave 1.3s infinite, loader-color-primary 2.6s infinite;"},{"name":"animate-loader-white","value":"wave 1.3s infinite, loader-color-white 2.6s infinite;"},{"name":"aspect-16/10","value":"var(--sd-aspect-16\\/10);"},{"name":"aspect-21/9","value":"var(--sd-aspect-21\\/9);"},{"name":"aspect-2/1","value":"var(--sd-aspect-2\\/1);"},{"name":"aspect-3/2","value":"var(--sd-aspect-3\\/2);"},{"name":"aspect-3/4","value":"var(--sd-aspect-3\\/4);"},{"name":"aspect-4/3","value":"var(--sd-aspect-4\\/3);"},{"name":"aspect-4/5","value":"var(--sd-aspect-4\\/5);"},{"name":"aspect-5/4","value":"var(--sd-aspect-5\\/4);"},{"name":"aspect-6/5","value":"var(--sd-aspect-6\\/5);"},{"name":"aspect-golden-ratio","value":"var(--sd-aspect-golden-ratio);"},{"name":"aspect-square","value":"var(--sd-aspect-square);"},{"name":"aspect-video","value":"var(--sd-aspect-video);"},{"name":"background-color-accent-300","value":"var(--sd-color-background-accent-300, var(--sd-color-accent-300));"},{"name":"background-color-accent-500","value":"var(--sd-color-background-accent-500, var(--sd-color-accent-500));"},{"name":"background-color-accent-550","value":"var(--sd-color-background-accent-550, var(--sd-color-accent-550));"},{"name":"background-color-accent-700","value":"var(--sd-color-background-accent-700, var(--sd-color-accent-700));"},{"name":"background-color-accent","value":"var(--sd-color-background-accent, var(--sd-color-accent));"},{"name":"background-color-error-400","value":"var(--sd-color-background-error-400, var(--sd-color-error-400));"},{"name":"background-color-error","value":"var(--sd-color-background-error, var(--sd-color-error));"},{"name":"background-color-info","value":"var(--sd-color-background-info, var(--sd-color-info));"},{"name":"background-color-neutral-100","value":"var(--sd-color-background-neutral-100, var(--sd-color-neutral-100));"},{"name":"background-color-neutral-200","value":"var(--sd-color-background-neutral-200, var(--sd-color-neutral-200));"},{"name":"background-color-neutral-300","value":"var(--sd-color-background-neutral-300, var(--sd-color-neutral-300));"},{"name":"background-color-neutral-400","value":"var(--sd-color-background-neutral-400, var(--sd-color-neutral-400));"},{"name":"background-color-neutral-500","value":"var(--sd-color-background-neutral-500, var(--sd-color-neutral-500));"},{"name":"background-color-neutral-600","value":"var(--sd-color-background-neutral-600, var(--sd-color-neutral-600));"},{"name":"background-color-neutral-800","value":"var(--sd-color-background-neutral-800, var(--sd-color-neutral-800));"},{"name":"background-color-primary-100","value":"var(--sd-color-background-primary-100, var(--sd-color-primary-100));"},{"name":"background-color-primary-200","value":"var(--sd-color-background-primary-200, var(--sd-color-primary-200));"},{"name":"background-color-primary-300","value":"var(--sd-color-background-primary-300, var(--sd-color-primary-300));"},{"name":"background-color-primary-500","value":"var(--sd-color-background-primary-500, var(--sd-color-primary-500));"},{"name":"background-color-primary-800","value":"var(--sd-color-background-primary-800, var(--sd-color-primary-800));"},{"name":"background-color-primary","value":"var(--sd-color-background-primary, var(--sd-color-primary));"},{"name":"background-color-success","value":"var(--sd-color-background-success, var(--sd-color-success));"},{"name":"background-color-warning","value":"var(--sd-color-background-warning, var(--sd-color-warning));"},{"name":"background-color-white","value":"var(--sd-color-background-white, var(--sd-color-white));"},{"name":"border-color-accent-550","value":"var(--sd-color-border-accent-550, var(--sd-color-accent-550));"},{"name":"border-color-accent","value":"var(--sd-color-border-accent, var(--sd-color-accent));"},{"name":"border-color-error-400","value":"var(--sd-color-border-error-400, var(--sd-color-error-400));"},{"name":"border-color-error","value":"var(--sd-color-border-error, var(--sd-color-error));"},{"name":"border-color-neutral-400","value":"var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));"},{"name":"border-color-neutral-500","value":"var(--sd-color-border-neutral-500, var(--sd-color-neutral-500));"},{"name":"border-color-neutral-600","value":"var(--sd-color-border-neutral-600, var(--sd-color-neutral-600));"},{"name":"border-color-neutral-800","value":"var(--sd-color-border-neutral-800, var(--sd-color-neutral-800));"},{"name":"border-color-primary-100","value":"var(--sd-color-border-primary-100, var(--sd-color-primary-100));"},{"name":"border-color-primary-200","value":"var(--sd-color-border-primary-200, var(--sd-color-primary-200));"},{"name":"border-color-primary-400","value":"var(--sd-color-border-primary-400, var(--sd-color-primary-400));"},{"name":"border-color-primary-500","value":"var(--sd-color-border-primary-500, var(--sd-color-primary-500));"},{"name":"border-color-primary-800","value":"var(--sd-color-border-primary-800, var(--sd-color-primary-800));"},{"name":"border-color-primary","value":"var(--sd-color-border-primary, var(--sd-color-primary));"},{"name":"border-color-success","value":"var(--sd-color-border-success, var(--sd-color-success));"},{"name":"border-color-white","value":"var(--sd-color-border-white, var(--sd-color-white));"},{"name":"border-width-2","value":"var(--sd-border-width-2);"},{"name":"border-width-4","value":"var(--sd-border-width-4);"},{"name":"border-width-6","value":"var(--sd-border-width-6);"},{"name":"border-width-default","value":"var(--sd-border-width);"},{"name":"drop-shadow-sm","value":"var(--sd-drop-shadow-sm);"},{"name":"drop-shadow","value":"var(--sd-drop-shadow);"},{"name":"fill-accent-550","value":"var(--sd-color-icon-fill-accent-550, var(--sd-color-accent-550));"},{"name":"fill-accent","value":"var(--sd-color-icon-fill-accent, var(--sd-color-accent));"},{"name":"fill-error-400","value":"var(--sd-color-icon-fill-error-400, var(--sd-color-error-400));"},{"name":"fill-error","value":"var(--sd-color-icon-fill-error, var(--sd-color-error));"},{"name":"fill-neutral-400","value":"var(--sd-color-icon-fill-neutral-400, var(--sd-color-neutral-400));"},{"name":"fill-neutral-500","value":"var(--sd-color-icon-fill-neutral-500, var(--sd-color-neutral-500));"},{"name":"fill-neutral-600","value":"var(--sd-color-icon-fill-neutral-600, var(--sd-color-neutral-600));"},{"name":"fill-neutral-800","value":"var(--sd-color-icon-fill-neutral-800, var(--sd-color-neutral-800));"},{"name":"fill-primary-100","value":"var(--sd-color-icon-fill-primary-100, var(--sd-color-primary-100));"},{"name":"fill-primary-200","value":"var(--sd-color-icon-fill-primary-200, var(--sd-color-primary-200));"},{"name":"fill-primary-400","value":"var(--sd-color-icon-fill-primary-400, var(--sd-color-primary-400));"},{"name":"fill-primary-500","value":"var(--sd-color-icon-fill-primary-500, var(--sd-color-primary-500));"},{"name":"fill-primary-800","value":"var(--sd-color-icon-fill-primary-800, var(--sd-color-primary-800));"},{"name":"fill-primary","value":"var(--sd-color-icon-fill-primary, var(--sd-color-primary));"},{"name":"fill-risk-high","value":"var(--sd-color-icon-fill-risk-high, var(--sd-color-risk-high));"},{"name":"fill-risk-increased","value":"var(--sd-color-icon-fill-risk-increased, var(--sd-color-risk-increased));"},{"name":"fill-risk-low","value":"var(--sd-color-icon-fill-risk-low, var(--sd-color-risk-low));"},{"name":"fill-risk-moderate","value":"var(--sd-color-icon-fill-risk-moderate, var(--sd-color-risk-moderate));"},{"name":"fill-risk-veryhigh","value":"var(--sd-color-icon-fill-risk-veryhigh, var(--sd-color-risk-veryhigh));"},{"name":"fill-success","value":"var(--sd-color-icon-fill-success, var(--sd-color-success));"},{"name":"fill-white","value":"var(--sd-color-icon-fill-white, var(--sd-color-white));"},{"name":"font-primary","value":"var(--sd-font-primary);"},{"name":"font-weight-bold","value":"var(--sd-font-weight-bold);"},{"name":"font-weight-normal","value":"var(--sd-font-weight-normal);"},{"name":"opacity-0","value":"var(--sd-opacity-0);"},{"name":"opacity-100","value":"var(--sd-opacity-100);"},{"name":"opacity-10","value":"var(--sd-opacity-10);"},{"name":"opacity-20","value":"var(--sd-opacity-20);"},{"name":"opacity-30","value":"var(--sd-opacity-30);"},{"name":"opacity-50","value":"var(--sd-opacity-50);"},{"name":"opacity-55","value":"var(--sd-opacity-55);"},{"name":"opacity-5","value":"var(--sd-opacity-5);"},{"name":"opacity-60","value":"var(--sd-opacity-60);"},{"name":"opacity-70","value":"var(--sd-opacity-70);"},{"name":"opacity-75","value":"var(--sd-opacity-75);"},{"name":"opacity-80","value":"var(--sd-opacity-80);"},{"name":"opacity-85","value":"var(--sd-opacity-85);"},{"name":"opacity-90","value":"var(--sd-opacity-90);"},{"name":"outline-color-error","value":"var(--sd-border-color-error, var(--sd-color-error));"},{"name":"outline-color-primary","value":"var(--sd-border-color-primary, var(--sd-color-primary));"},{"name":"radius-default","value":"var(--sd-radius);"},{"name":"radius-full","value":"var(--sd-radius-full);"},{"name":"radius-lg","value":"var(--sd-radius-lg);"},{"name":"radius-md","value":"var(--sd-radius-md);"},{"name":"radius-none","value":"var(--sd-radius-none);"},{"name":"radius-sm","value":"var(--sd-radius-sm);"},{"name":"shadow-sm","value":"var(--sd-shadow-sm);"},{"name":"shadow","value":"var(--sd-shadow);"},{"name":"sizing-10","value":"var(--sd-sizing-10);"},{"name":"sizing-12","value":"var(--sd-sizing-12);"},{"name":"sizing-16","value":"var(--sd-sizing-16);"},{"name":"sizing-20","value":"var(--sd-sizing-20);"},{"name":"sizing-24","value":"var(--sd-sizing-24);"},{"name":"sizing-2","value":"var(--sd-sizing-2);"},{"name":"sizing-2.5","value":"var(--sd-sizing-2\\.5);"},{"name":"sizing-3","value":"var(--sd-sizing-3);"},{"name":"sizing-4","value":"var(--sd-sizing-4);"},{"name":"sizing-5","value":"var(--sd-sizing-5);"},{"name":"sizing-6","value":"var(--sd-sizing-6);"},{"name":"sizing-8","value":"var(--sd-sizing-8);"},{"name":"sizing-varspacing","value":"var(--tw-varspacing);"},{"name":"spacing-0.25","value":"var(--sd-spacing-0\\.25);"},{"name":"spacing-0.5","value":"var(--sd-spacing-0\\.5);"},{"name":"spacing-10","value":"var(--sd-spacing-10);"},{"name":"spacing-12","value":"var(--sd-spacing-12);"},{"name":"spacing-16","value":"var(--sd-spacing-16);"},{"name":"spacing-1","value":"var(--sd-spacing-1);"},{"name":"spacing-1.5","value":"var(--sd-spacing-1\\.5);"},{"name":"spacing-20","value":"var(--sd-spacing-20);"},{"name":"spacing-24","value":"var(--sd-spacing-24);"},{"name":"spacing-2","value":"var(--sd-spacing-2);"},{"name":"spacing-32","value":"var(--sd-spacing-32);"},{"name":"spacing-3","value":"var(--sd-spacing-3);"},{"name":"spacing-40","value":"var(--sd-spacing-40);"},{"name":"spacing-4","value":"var(--sd-spacing-4);"},{"name":"spacing-6","value":"var(--sd-spacing-6);"},{"name":"spacing-8","value":"var(--sd-spacing-8);"},{"name":"spacing-varspacing","value":"var(--tw-varspacing);"},{"name":"spacing","value":"var(--sd-spacing-1);"},{"name":"text-2xl","value":"var(--sd-text-2xl);"},{"name":"text-3xl","value":"var(--sd-text-3xl);"},{"name":"text-4xl","value":"var(--sd-text-4xl);"},{"name":"text-base","value":"var(--sd-text-base);"},{"name":"text-color-accent","value":"var(--sd-color-text-accent, var(--sd-color-accent));"},{"name":"text-color-black","value":"var(--sd-color-text-black, var(--sd-color-black));"},{"name":"text-color-error","value":"var(--sd-color-text-error, var(--sd-color-error));"},{"name":"text-color-neutral-500","value":"var(--sd-color-text-neutral-500, var(--sd-color-neutral-500));"},{"name":"text-color-neutral-600","value":"var(--sd-color-text-neutral-600, var(--sd-color-neutral-600));"},{"name":"text-color-neutral-700","value":"var(--sd-color-text-neutral-700, var(--sd-color-neutral-700));"},{"name":"text-color-primary-100","value":"var(--sd-color-text-primary-100, var(--sd-color-primary-100));"},{"name":"text-color-primary-200","value":"var(--sd-color-text-primary-200, var(--sd-color-primary-200));"},{"name":"text-color-primary-400","value":"var(--sd-color-text-primary-400, var(--sd-color-primary-400));"},{"name":"text-color-primary-500","value":"var(--sd-color-text-primary-500, var(--sd-color-primary-500));"},{"name":"text-color-primary-800","value":"var(--sd-color-text-primary-800, var(--sd-color-primary-800));"},{"name":"text-color-primary","value":"var(--sd-color-text-primary, var(--sd-color-primary));"},{"name":"text-color-success","value":"var(--sd-color-text-success, var(--sd-color-success));"},{"name":"text-color-white","value":"var(--sd-color-text-white, var(--sd-color-white));"},{"name":"text-lg","value":"var(--sd-text-lg);"},{"name":"text-sm","value":"var(--sd-text-sm);"},{"name":"text-xl","value":"var(--sd-text-xl);"},{"name":"transition-duration-fast","value":"var(--sd-duration-fast, 150ms);"},{"name":"transition-duration-medium","value":"var(--sd-duration-medium, 300ms);"},{"name":"transition-duration-slow","value":"var(--sd-duration-slow, 500ms);"},{"name":"transition-duration-x-slow","value":"var(--sd-duration-x-slow, 750ms);"}],"utilities":[{"name":"z-10","declarations":[{"prop":"z-index","value":"10"}]},{"name":"z-20","declarations":[{"prop":"z-index","value":"20"}]},{"name":"z-30","declarations":[{"prop":"z-index","value":"30"}]},{"name":"z-40","declarations":[{"prop":"z-index","value":"40"}]},{"name":"z-50","declarations":[{"prop":"z-index","value":"50"}]},{"name":"z-alert-group","declarations":[{"prop":"z-index","value":"var(--sd-z-index-alert-group, 950)"}]},{"name":"z-auto","declarations":[{"prop":"z-index","value":"auto"}]},{"name":"z-dialog","declarations":[{"prop":"z-index","value":"var(--sd-z-index-dialog, 800)"}]},{"name":"z-drawer","declarations":[{"prop":"z-index","value":"var(--sd-z-index-drawer, 700)"}]},{"name":"z-dropdown","declarations":[{"prop":"z-index","value":"var(--sd-z-index-dropdown, 900)"}]},{"name":"z-header","declarations":[{"prop":"z-index","value":"var(--sd-z-index-header, 600)"}]},{"name":"z-tooltip","declarations":[{"prop":"z-index","value":"var(--sd-z-index-tooltip, 1000)"}]},{"name":"varspacing-*","declarations":[{"prop":"--tw-varspacing","value":"--value(--spacing-*)"}]},{"name":"focus-outline","declarations":[{"prop":"outline-style","value":"solid"},{"prop":"outline-offset","value":"2px"},{"prop":"outline-width","value":"2px"},{"prop":"outline-color","value":"var(--outline-color-primary)"}]},{"name":"focus-outline-inverted","declarations":[{"prop":"outline-style","value":"solid"},{"prop":"outline-offset","value":"2px"},{"prop":"outline-width","value":"2px"},{"prop":"outline-color","value":"var(--outline-color-white)"}]}],"theme":[{"name":"sd-theme","value":"'ui-light';"},{"name":"sd-accordion-border-width","value":"var(--sd-spacing-0\\.25);"},{"name":"sd-accordion-padding-block","value":"var(--sd-spacing-3);"},{"name":"sd-aspect-16/10","value":"16 / 10;"},{"name":"sd-aspect-21/9","value":"21 / 9;"},{"name":"sd-aspect-2/1","value":"2 / 1;"},{"name":"sd-aspect-3/2","value":"3 / 2;"},{"name":"sd-aspect-3/4","value":"3 / 4;"},{"name":"sd-aspect-4/3","value":"4 / 3;"},{"name":"sd-aspect-4/5","value":"4 / 5;"},{"name":"sd-aspect-5/4","value":"5 / 4;"},{"name":"sd-aspect-6/5","value":"6 / 5;"},{"name":"sd-aspect-golden-ratio","value":"1.6180339887498948482 / 1;"},{"name":"sd-aspect-square","value":"1 / 1;"},{"name":"sd-aspect-video","value":"16 / 9;"},{"name":"sd-border-width-2","value":"0.125rem;"},{"name":"sd-border-width-4","value":"0.25rem;"},{"name":"sd-border-width-6","value":"0.375rem;"},{"name":"sd-border-width","value":"0.0625rem;"},{"name":"sd-button--size-lg-border-radius","value":"var(--sd-spacing-1);"},{"name":"sd-button--size-lg-font-size","value":"var(--sd-spacing-4);"},{"name":"sd-button--size-lg-icon-font-size","value":"var(--sd-spacing-6);"},{"name":"sd-button--size-lg-padding-block","value":"var(--sd-spacing-2);"},{"name":"sd-button--size-md-border-radius","value":"var(--sd-spacing-1);"},{"name":"sd-button--size-md-font-size","value":"var(--sd-spacing-4);"},{"name":"sd-button--size-md-padding-block","value":"var(--sd-spacing-2);"},{"name":"sd-color-accent-100","value":"#b6dfaa;"},{"name":"sd-color-accent-200","value":"#8ed082;"},{"name":"sd-color-accent-300","value":"#6cc254;"},{"name":"sd-color-accent-400","value":"#2d9d00;"},{"name":"sd-color-accent-500","value":"#25880e;"},{"name":"sd-color-accent-550","value":"#367b28;"},{"name":"sd-color-accent-600","value":"#316f24;"},{"name":"sd-color-accent-700","value":"#215725;"},{"name":"sd-color-accent-800","value":"#19411b;"},{"name":"sd-color-accent","value":"#2d9d00;"},{"name":"sd-color-black","value":"#181818;"},{"name":"sd-color-error-300","value":"#cc1937;"},{"name":"sd-color-error-400","value":"#ac1938;"},{"name":"sd-color-error","value":"#cc1937;"},{"name":"sd-color-info","value":"#1582d5;"},{"name":"sd-color-neutral-100","value":"#f6f6f6;"},{"name":"sd-color-neutral-200","value":"#e9e9e9;"},{"name":"sd-color-neutral-300","value":"#dadada;"},{"name":"sd-color-neutral-400","value":"#c3c3c3;"},{"name":"sd-color-neutral-500","value":"#aeaeae;"},{"name":"sd-color-neutral-600","value":"#888888;"},{"name":"sd-color-neutral-700","value":"#686868;"},{"name":"sd-color-neutral-800","value":"#515151;"},{"name":"sd-color-primary-100","value":"#ecf0f9;"},{"name":"sd-color-primary-200","value":"#e0e9f3;"},{"name":"sd-color-primary-300","value":"#c8d5e7;"},{"name":"sd-color-primary-400","value":"#99abd0;"},{"name":"sd-color-primary-500","value":"#466daf;"},{"name":"sd-color-primary-600","value":"#00358e;"},{"name":"sd-color-primary-700","value":"#132e6e;"},{"name":"sd-color-primary-750","value":"#0a204a;"},{"name":"sd-color-primary-800","value":"#051530;"},{"name":"sd-color-primary-900","value":"#020920;"},{"name":"sd-color-primary","value":"#00358e;"},{"name":"sd-color-risk-high","value":"#fa9b1e;"},{"name":"sd-color-risk-increased","value":"#fff000;"},{"name":"sd-color-risk-low","value":"#017dc3;"},{"name":"sd-color-risk-moderate","value":"#00a593;"},{"name":"sd-color-risk-veryhigh","value":"#ff0000;"},{"name":"sd-color-success","value":"#367b28;"},{"name":"sd-color-warning","value":"#bb8d20;"},{"name":"sd-color-white","value":"#ffffff;"},{"name":"sd-font-primary","value":"'Frutiger Neue fuer UI Web';"},{"name":"sd-font-weight-bold","value":"700;"},{"name":"sd-font-weight-normal","value":"400;"},{"name":"sd-header-padding-bottom","value":"0;"},{"name":"sd-navigation-item-border-radius-bottom","value":"0;"},{"name":"sd-navigation-item-border-radius-top","value":"0;"},{"name":"sd-navigation-item-font-size","value":"var(--sd-spacing-4);"},{"name":"sd-navigation-item__current-indicator-border-radius","value":"0;"},{"name":"sd-navigation-item__current-indicator-height","value":"var(--sd-spacing-1);"},{"name":"sd-opacity-0","value":"0%;"},{"name":"sd-opacity-100","value":"100%;"},{"name":"sd-opacity-10","value":"10%;"},{"name":"sd-opacity-20","value":"20%;"},{"name":"sd-opacity-30","value":"30%;"},{"name":"sd-opacity-50","value":"50%;"},{"name":"sd-opacity-55","value":"55%;"},{"name":"sd-opacity-5","value":"5%;"},{"name":"sd-opacity-60","value":"60%;"},{"name":"sd-opacity-70","value":"70%;"},{"name":"sd-opacity-75","value":"75%;"},{"name":"sd-opacity-80","value":"80%;"},{"name":"sd-opacity-85","value":"85%;"},{"name":"sd-opacity-90","value":"90%;"},{"name":"sd-radius-full","value":"624.9375rem;"},{"name":"sd-radius-lg","value":"0.5rem;"},{"name":"sd-radius-md","value":"0.375rem;"},{"name":"sd-radius-none","value":"0;"},{"name":"sd-radius-sm","value":"0.125rem;"},{"name":"sd-radius","value":"0.25rem;"},{"name":"sd-sizing-10","value":"2.5rem;"},{"name":"sd-sizing-12","value":"3rem;"},{"name":"sd-sizing-16","value":"4rem;"},{"name":"sd-sizing-20","value":"5rem;"},{"name":"sd-sizing-24","value":"6rem;"},{"name":"sd-sizing-2","value":"0.5rem;"},{"name":"sd-sizing-2.5","value":"0.625rem;"},{"name":"sd-sizing-3","value":"0.75rem;"},{"name":"sd-sizing-4","value":"1rem;"},{"name":"sd-sizing-5","value":"1.25rem;"},{"name":"sd-sizing-6","value":"1.5rem;"},{"name":"sd-sizing-8","value":"2rem;"},{"name":"sd-spacing-0.25","value":"0.0625rem;"},{"name":"sd-spacing-0.5","value":"0.125rem;"},{"name":"sd-spacing-10","value":"2.5rem;"},{"name":"sd-spacing-12","value":"3rem;"},{"name":"sd-spacing-16","value":"4rem;"},{"name":"sd-spacing-1","value":"0.25rem;"},{"name":"sd-spacing-1.5","value":"0.375rem;"},{"name":"sd-spacing-20","value":"5rem;"},{"name":"sd-spacing-24","value":"6rem;"},{"name":"sd-spacing-2","value":"0.5rem;"},{"name":"sd-spacing-32","value":"8rem;"},{"name":"sd-spacing-3","value":"0.75rem;"},{"name":"sd-spacing-40","value":"10rem;"},{"name":"sd-spacing-4","value":"1rem;"},{"name":"sd-spacing-6","value":"1.5rem;"},{"name":"sd-spacing-8","value":"2rem;"},{"name":"sd-text-2xl","value":"1.75rem;"},{"name":"sd-text-3xl","value":"2rem;"},{"name":"sd-text-4xl","value":"2.5rem;"},{"name":"sd-text-base","value":"1rem;"},{"name":"sd-text-lg","value":"1.25rem;"},{"name":"sd-text-sm","value":"0.875rem;"},{"name":"sd-text-xl","value":"1.5rem;"}]}
|
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
@custom-variant hover (&:hover:not([disabled]));
|
|
2
|
+
@custom-variant focus (&:focus:not([disabled]));
|
|
3
|
+
@custom-variant active (&:active:not([disabled]));
|
|
4
|
+
|
|
5
|
+
@theme inline {
|
|
6
|
+
--animate-bounce-once: bounce-once var(--sd-duration-medium, 300ms) ease-in-out;
|
|
7
|
+
--animate-grow: grow linear;
|
|
8
|
+
--animate-loader-current: wave 1.3s infinite, loader-color-current 2.6s infinite;
|
|
9
|
+
--animate-loader-primary: wave 1.3s infinite, loader-color-primary 2.6s infinite;
|
|
10
|
+
--animate-loader-white: wave 1.3s infinite, loader-color-white 2.6s infinite;
|
|
11
|
+
--aspect-16\/10: var(--sd-aspect-16\/10);
|
|
12
|
+
--aspect-21\/9: var(--sd-aspect-21\/9);
|
|
13
|
+
--aspect-2\/1: var(--sd-aspect-2\/1);
|
|
14
|
+
--aspect-3\/2: var(--sd-aspect-3\/2);
|
|
15
|
+
--aspect-3\/4: var(--sd-aspect-3\/4);
|
|
16
|
+
--aspect-4\/3: var(--sd-aspect-4\/3);
|
|
17
|
+
--aspect-4\/5: var(--sd-aspect-4\/5);
|
|
18
|
+
--aspect-5\/4: var(--sd-aspect-5\/4);
|
|
19
|
+
--aspect-6\/5: var(--sd-aspect-6\/5);
|
|
20
|
+
--aspect-golden-ratio: var(--sd-aspect-golden-ratio);
|
|
21
|
+
--aspect-square: var(--sd-aspect-square);
|
|
22
|
+
--aspect-video: var(--sd-aspect-video);
|
|
23
|
+
--background-color-accent-300: var(--sd-color-background-accent-300, var(--sd-color-accent-300));
|
|
24
|
+
--background-color-accent-500: var(--sd-color-background-accent-500, var(--sd-color-accent-500));
|
|
25
|
+
--background-color-accent-550: var(--sd-color-background-accent-550, var(--sd-color-accent-550));
|
|
26
|
+
--background-color-accent-700: var(--sd-color-background-accent-700, var(--sd-color-accent-700));
|
|
27
|
+
--background-color-accent: var(--sd-color-background-accent, var(--sd-color-accent));
|
|
28
|
+
--background-color-error-400: var(--sd-color-background-error-400, var(--sd-color-error-400));
|
|
29
|
+
--background-color-error: var(--sd-color-background-error, var(--sd-color-error));
|
|
30
|
+
--background-color-info: var(--sd-color-background-info, var(--sd-color-info));
|
|
31
|
+
--background-color-neutral-100: var(--sd-color-background-neutral-100, var(--sd-color-neutral-100));
|
|
32
|
+
--background-color-neutral-200: var(--sd-color-background-neutral-200, var(--sd-color-neutral-200));
|
|
33
|
+
--background-color-neutral-300: var(--sd-color-background-neutral-300, var(--sd-color-neutral-300));
|
|
34
|
+
--background-color-neutral-400: var(--sd-color-background-neutral-400, var(--sd-color-neutral-400));
|
|
35
|
+
--background-color-neutral-500: var(--sd-color-background-neutral-500, var(--sd-color-neutral-500));
|
|
36
|
+
--background-color-neutral-600: var(--sd-color-background-neutral-600, var(--sd-color-neutral-600));
|
|
37
|
+
--background-color-neutral-800: var(--sd-color-background-neutral-800, var(--sd-color-neutral-800));
|
|
38
|
+
--background-color-primary-100: var(--sd-color-background-primary-100, var(--sd-color-primary-100));
|
|
39
|
+
--background-color-primary-200: var(--sd-color-background-primary-200, var(--sd-color-primary-200));
|
|
40
|
+
--background-color-primary-300: var(--sd-color-background-primary-300, var(--sd-color-primary-300));
|
|
41
|
+
--background-color-primary-500: var(--sd-color-background-primary-500, var(--sd-color-primary-500));
|
|
42
|
+
--background-color-primary-800: var(--sd-color-background-primary-800, var(--sd-color-primary-800));
|
|
43
|
+
--background-color-primary: var(--sd-color-background-primary, var(--sd-color-primary));
|
|
44
|
+
--background-color-success: var(--sd-color-background-success, var(--sd-color-success));
|
|
45
|
+
--background-color-warning: var(--sd-color-background-warning, var(--sd-color-warning));
|
|
46
|
+
--background-color-white: var(--sd-color-background-white, var(--sd-color-white));
|
|
47
|
+
--border-color-accent-550: var(--sd-color-border-accent-550, var(--sd-color-accent-550));
|
|
48
|
+
--border-color-accent: var(--sd-color-border-accent, var(--sd-color-accent));
|
|
49
|
+
--border-color-error-400: var(--sd-color-border-error-400, var(--sd-color-error-400));
|
|
50
|
+
--border-color-error: var(--sd-color-border-error, var(--sd-color-error));
|
|
51
|
+
--border-color-neutral-400: var(--sd-color-border-neutral-400, var(--sd-color-neutral-400));
|
|
52
|
+
--border-color-neutral-500: var(--sd-color-border-neutral-500, var(--sd-color-neutral-500));
|
|
53
|
+
--border-color-neutral-600: var(--sd-color-border-neutral-600, var(--sd-color-neutral-600));
|
|
54
|
+
--border-color-neutral-800: var(--sd-color-border-neutral-800, var(--sd-color-neutral-800));
|
|
55
|
+
--border-color-primary-100: var(--sd-color-border-primary-100, var(--sd-color-primary-100));
|
|
56
|
+
--border-color-primary-200: var(--sd-color-border-primary-200, var(--sd-color-primary-200));
|
|
57
|
+
--border-color-primary-400: var(--sd-color-border-primary-400, var(--sd-color-primary-400));
|
|
58
|
+
--border-color-primary-500: var(--sd-color-border-primary-500, var(--sd-color-primary-500));
|
|
59
|
+
--border-color-primary-800: var(--sd-color-border-primary-800, var(--sd-color-primary-800));
|
|
60
|
+
--border-color-primary: var(--sd-color-border-primary, var(--sd-color-primary));
|
|
61
|
+
--border-color-success: var(--sd-color-border-success, var(--sd-color-success));
|
|
62
|
+
--border-color-white: var(--sd-color-border-white, var(--sd-color-white));
|
|
63
|
+
--border-width-2: var(--sd-border-width-2);
|
|
64
|
+
--border-width-4: var(--sd-border-width-4);
|
|
65
|
+
--border-width-6: var(--sd-border-width-6);
|
|
66
|
+
--border-width-default: var(--sd-border-width);
|
|
67
|
+
--drop-shadow-sm: var(--sd-drop-shadow-sm);
|
|
68
|
+
--drop-shadow: var(--sd-drop-shadow);
|
|
69
|
+
--fill-accent-550: var(--sd-color-icon-fill-accent-550, var(--sd-color-accent-550));
|
|
70
|
+
--fill-accent: var(--sd-color-icon-fill-accent, var(--sd-color-accent));
|
|
71
|
+
--fill-error-400: var(--sd-color-icon-fill-error-400, var(--sd-color-error-400));
|
|
72
|
+
--fill-error: var(--sd-color-icon-fill-error, var(--sd-color-error));
|
|
73
|
+
--fill-neutral-400: var(--sd-color-icon-fill-neutral-400, var(--sd-color-neutral-400));
|
|
74
|
+
--fill-neutral-500: var(--sd-color-icon-fill-neutral-500, var(--sd-color-neutral-500));
|
|
75
|
+
--fill-neutral-600: var(--sd-color-icon-fill-neutral-600, var(--sd-color-neutral-600));
|
|
76
|
+
--fill-neutral-800: var(--sd-color-icon-fill-neutral-800, var(--sd-color-neutral-800));
|
|
77
|
+
--fill-primary-100: var(--sd-color-icon-fill-primary-100, var(--sd-color-primary-100));
|
|
78
|
+
--fill-primary-200: var(--sd-color-icon-fill-primary-200, var(--sd-color-primary-200));
|
|
79
|
+
--fill-primary-400: var(--sd-color-icon-fill-primary-400, var(--sd-color-primary-400));
|
|
80
|
+
--fill-primary-500: var(--sd-color-icon-fill-primary-500, var(--sd-color-primary-500));
|
|
81
|
+
--fill-primary-800: var(--sd-color-icon-fill-primary-800, var(--sd-color-primary-800));
|
|
82
|
+
--fill-primary: var(--sd-color-icon-fill-primary, var(--sd-color-primary));
|
|
83
|
+
--fill-risk-high: var(--sd-color-icon-fill-risk-high, var(--sd-color-risk-high));
|
|
84
|
+
--fill-risk-increased: var(--sd-color-icon-fill-risk-increased, var(--sd-color-risk-increased));
|
|
85
|
+
--fill-risk-low: var(--sd-color-icon-fill-risk-low, var(--sd-color-risk-low));
|
|
86
|
+
--fill-risk-moderate: var(--sd-color-icon-fill-risk-moderate, var(--sd-color-risk-moderate));
|
|
87
|
+
--fill-risk-veryhigh: var(--sd-color-icon-fill-risk-veryhigh, var(--sd-color-risk-veryhigh));
|
|
88
|
+
--fill-success: var(--sd-color-icon-fill-success, var(--sd-color-success));
|
|
89
|
+
--fill-white: var(--sd-color-icon-fill-white, var(--sd-color-white));
|
|
90
|
+
--font-primary: var(--sd-font-primary);
|
|
91
|
+
--font-weight-bold: var(--sd-font-weight-bold);
|
|
92
|
+
--font-weight-normal: var(--sd-font-weight-normal);
|
|
93
|
+
--opacity-0: var(--sd-opacity-0);
|
|
94
|
+
--opacity-100: var(--sd-opacity-100);
|
|
95
|
+
--opacity-10: var(--sd-opacity-10);
|
|
96
|
+
--opacity-20: var(--sd-opacity-20);
|
|
97
|
+
--opacity-30: var(--sd-opacity-30);
|
|
98
|
+
--opacity-50: var(--sd-opacity-50);
|
|
99
|
+
--opacity-55: var(--sd-opacity-55);
|
|
100
|
+
--opacity-5: var(--sd-opacity-5);
|
|
101
|
+
--opacity-60: var(--sd-opacity-60);
|
|
102
|
+
--opacity-70: var(--sd-opacity-70);
|
|
103
|
+
--opacity-75: var(--sd-opacity-75);
|
|
104
|
+
--opacity-80: var(--sd-opacity-80);
|
|
105
|
+
--opacity-85: var(--sd-opacity-85);
|
|
106
|
+
--opacity-90: var(--sd-opacity-90);
|
|
107
|
+
--outline-color-error: var(--sd-border-color-error, var(--sd-color-error));
|
|
108
|
+
--outline-color-primary: var(--sd-border-color-primary, var(--sd-color-primary));
|
|
109
|
+
--radius-default: var(--sd-radius);
|
|
110
|
+
--radius-full: var(--sd-radius-full);
|
|
111
|
+
--radius-lg: var(--sd-radius-lg);
|
|
112
|
+
--radius-md: var(--sd-radius-md);
|
|
113
|
+
--radius-none: var(--sd-radius-none);
|
|
114
|
+
--radius-sm: var(--sd-radius-sm);
|
|
115
|
+
--shadow-sm: var(--sd-shadow-sm);
|
|
116
|
+
--shadow: var(--sd-shadow);
|
|
117
|
+
--sizing-10: var(--sd-sizing-10);
|
|
118
|
+
--sizing-12: var(--sd-sizing-12);
|
|
119
|
+
--sizing-16: var(--sd-sizing-16);
|
|
120
|
+
--sizing-20: var(--sd-sizing-20);
|
|
121
|
+
--sizing-24: var(--sd-sizing-24);
|
|
122
|
+
--sizing-2: var(--sd-sizing-2);
|
|
123
|
+
--sizing-2\.5: var(--sd-sizing-2\.5);
|
|
124
|
+
--sizing-3: var(--sd-sizing-3);
|
|
125
|
+
--sizing-4: var(--sd-sizing-4);
|
|
126
|
+
--sizing-5: var(--sd-sizing-5);
|
|
127
|
+
--sizing-6: var(--sd-sizing-6);
|
|
128
|
+
--sizing-8: var(--sd-sizing-8);
|
|
129
|
+
--sizing-varspacing: var(--tw-varspacing);
|
|
130
|
+
--spacing-0\.25: var(--sd-spacing-0\.25);
|
|
131
|
+
--spacing-0\.5: var(--sd-spacing-0\.5);
|
|
132
|
+
--spacing-10: var(--sd-spacing-10);
|
|
133
|
+
--spacing-12: var(--sd-spacing-12);
|
|
134
|
+
--spacing-16: var(--sd-spacing-16);
|
|
135
|
+
--spacing-1: var(--sd-spacing-1);
|
|
136
|
+
--spacing-1\.5: var(--sd-spacing-1\.5);
|
|
137
|
+
--spacing-20: var(--sd-spacing-20);
|
|
138
|
+
--spacing-24: var(--sd-spacing-24);
|
|
139
|
+
--spacing-2: var(--sd-spacing-2);
|
|
140
|
+
--spacing-32: var(--sd-spacing-32);
|
|
141
|
+
--spacing-3: var(--sd-spacing-3);
|
|
142
|
+
--spacing-40: var(--sd-spacing-40);
|
|
143
|
+
--spacing-4: var(--sd-spacing-4);
|
|
144
|
+
--spacing-6: var(--sd-spacing-6);
|
|
145
|
+
--spacing-8: var(--sd-spacing-8);
|
|
146
|
+
--spacing-varspacing: var(--tw-varspacing);
|
|
147
|
+
--spacing: var(--sd-spacing-1);
|
|
148
|
+
--text-2xl: var(--sd-text-2xl);
|
|
149
|
+
--text-3xl: var(--sd-text-3xl);
|
|
150
|
+
--text-4xl: var(--sd-text-4xl);
|
|
151
|
+
--text-base: var(--sd-text-base);
|
|
152
|
+
--text-color-accent: var(--sd-color-text-accent, var(--sd-color-accent));
|
|
153
|
+
--text-color-black: var(--sd-color-text-black, var(--sd-color-black));
|
|
154
|
+
--text-color-error: var(--sd-color-text-error, var(--sd-color-error));
|
|
155
|
+
--text-color-neutral-500: var(--sd-color-text-neutral-500, var(--sd-color-neutral-500));
|
|
156
|
+
--text-color-neutral-600: var(--sd-color-text-neutral-600, var(--sd-color-neutral-600));
|
|
157
|
+
--text-color-neutral-700: var(--sd-color-text-neutral-700, var(--sd-color-neutral-700));
|
|
158
|
+
--text-color-primary-100: var(--sd-color-text-primary-100, var(--sd-color-primary-100));
|
|
159
|
+
--text-color-primary-200: var(--sd-color-text-primary-200, var(--sd-color-primary-200));
|
|
160
|
+
--text-color-primary-400: var(--sd-color-text-primary-400, var(--sd-color-primary-400));
|
|
161
|
+
--text-color-primary-500: var(--sd-color-text-primary-500, var(--sd-color-primary-500));
|
|
162
|
+
--text-color-primary-800: var(--sd-color-text-primary-800, var(--sd-color-primary-800));
|
|
163
|
+
--text-color-primary: var(--sd-color-text-primary, var(--sd-color-primary));
|
|
164
|
+
--text-color-success: var(--sd-color-text-success, var(--sd-color-success));
|
|
165
|
+
--text-color-white: var(--sd-color-text-white, var(--sd-color-white));
|
|
166
|
+
--text-lg: var(--sd-text-lg);
|
|
167
|
+
--text-sm: var(--sd-text-sm);
|
|
168
|
+
--text-xl: var(--sd-text-xl);
|
|
169
|
+
--transition-duration-fast: var(--sd-duration-fast, 150ms);
|
|
170
|
+
--transition-duration-medium: var(--sd-duration-medium, 300ms);
|
|
171
|
+
--transition-duration-slow: var(--sd-duration-slow, 500ms);
|
|
172
|
+
--transition-duration-x-slow: var(--sd-duration-x-slow, 750ms);
|
|
173
|
+
@keyframes bounce-once {
|
|
174
|
+
0% {
|
|
175
|
+
transform: translateY(0);
|
|
176
|
+
}
|
|
177
|
+
50% {
|
|
178
|
+
transform: translateY(-18px);
|
|
179
|
+
}
|
|
180
|
+
100% {
|
|
181
|
+
transform: translateY(0);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
@keyframes grow {
|
|
185
|
+
0% {
|
|
186
|
+
width: 0%;
|
|
187
|
+
}
|
|
188
|
+
100% {
|
|
189
|
+
width: 100%;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
@keyframes loader-color-current {
|
|
193
|
+
0%, 100% {
|
|
194
|
+
color: currentColor;
|
|
195
|
+
}
|
|
196
|
+
50% {
|
|
197
|
+
color: currentColor;
|
|
198
|
+
opacity: 20%;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
@keyframes loader-color-primary {
|
|
202
|
+
0%, 100% {
|
|
203
|
+
color: var(--sd-color-icon-fill-primary, var(--sd-color-primary));
|
|
204
|
+
}
|
|
205
|
+
50% {
|
|
206
|
+
color: var(--sd-color-icon-fill-primary, var(--sd-color-primary));
|
|
207
|
+
opacity: 20%;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
@keyframes loader-color-white {
|
|
211
|
+
0%, 100% {
|
|
212
|
+
color: var(--sd-color-icon-fill-white, var(--sd-color-white));;
|
|
213
|
+
}
|
|
214
|
+
50% {
|
|
215
|
+
color: var(--sd-color-icon-fill-white, var(--sd-color-white));;
|
|
216
|
+
opacity: 20%;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
@keyframes wave {
|
|
220
|
+
0%, 40%, 100% {
|
|
221
|
+
transform: initial;
|
|
222
|
+
}
|
|
223
|
+
20% {
|
|
224
|
+
transform: translateY(-4px);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
@utility z-10 {
|
|
230
|
+
z-index: 10;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
@utility z-20 {
|
|
234
|
+
z-index: 20;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@utility z-30 {
|
|
238
|
+
z-index: 30;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
@utility z-40 {
|
|
242
|
+
z-index: 40;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
@utility z-50 {
|
|
246
|
+
z-index: 50;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
@utility z-alert-group {
|
|
250
|
+
z-index: var(--sd-z-index-alert-group, 950);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
@utility z-auto {
|
|
254
|
+
z-index: auto;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
@utility z-dialog {
|
|
258
|
+
z-index: var(--sd-z-index-dialog, 800);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
@utility z-drawer {
|
|
262
|
+
z-index: var(--sd-z-index-drawer, 700);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
@utility z-dropdown {
|
|
266
|
+
z-index: var(--sd-z-index-dropdown, 900);
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
@utility z-header {
|
|
270
|
+
z-index: var(--sd-z-index-header, 600);
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
@utility z-tooltip {
|
|
274
|
+
z-index: var(--sd-z-index-tooltip, 1000);
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
@utility varspacing-* {
|
|
278
|
+
--tw-varspacing: --value(--spacing-*);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
@utility focus-outline {
|
|
282
|
+
outline-style: solid;
|
|
283
|
+
outline-offset: 2px;
|
|
284
|
+
outline-width: 2px;
|
|
285
|
+
outline-color: var(--outline-color-primary);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
@utility focus-outline-inverted {
|
|
289
|
+
outline-style: solid;
|
|
290
|
+
outline-offset: 2px;
|
|
291
|
+
outline-width: 2px;
|
|
292
|
+
outline-color: var(--outline-color-white);
|
|
293
|
+
}
|
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
.sd-theme-ui-dark {
|
|
2
|
+
color-scheme: dark;
|
|
3
|
+
|
|
4
|
+
--sd-theme: 'ui-dark';
|
|
5
|
+
--sd-accordion-border-width: var(--sd-spacing-0\.25);
|
|
6
|
+
--sd-accordion-color-background: var(--sd-color-primary);
|
|
7
|
+
--sd-accordion-color-text: var(--sd-color-white);
|
|
8
|
+
--sd-accordion-padding-block: var(--sd-spacing-3);
|
|
9
|
+
--sd-accordion__chevron-color: var(--sd-color-white);
|
|
10
|
+
--sd-aspect-16\/10: 16 / 10;
|
|
11
|
+
--sd-aspect-21\/9: 21 / 9;
|
|
12
|
+
--sd-aspect-2\/1: 2 / 1;
|
|
13
|
+
--sd-aspect-3\/2: 3 / 2;
|
|
14
|
+
--sd-aspect-3\/4: 3 / 4;
|
|
15
|
+
--sd-aspect-4\/3: 4 / 3;
|
|
16
|
+
--sd-aspect-4\/5: 4 / 5;
|
|
17
|
+
--sd-aspect-5\/4: 5 / 4;
|
|
18
|
+
--sd-aspect-6\/5: 6 / 5;
|
|
19
|
+
--sd-aspect-golden-ratio: 1.6180339887498948482 / 1;
|
|
20
|
+
--sd-aspect-square: 1 / 1;
|
|
21
|
+
--sd-aspect-video: 16 / 9;
|
|
22
|
+
--sd-audio__timestamp-color-text: var(--sd-color-primary-400);
|
|
23
|
+
--sd-border-width-2: 0.125rem;
|
|
24
|
+
--sd-border-width-4: 0.25rem;
|
|
25
|
+
--sd-border-width-6: 0.375rem;
|
|
26
|
+
--sd-border-width: 0.0625rem;
|
|
27
|
+
--sd-brandshape--neutral-100-color-background: var(--sd-color-primary-750);
|
|
28
|
+
--sd-brandshape--neutral-100-color-border: rgba(255, 255, 255, 0);
|
|
29
|
+
--sd-brandshape--white-color-background: var(--sd-color-primary-900);
|
|
30
|
+
--sd-breadcrumb__separator-color: var(--sd-color-primary-400);
|
|
31
|
+
--sd-button--primary--active-color-text: var(--sd-color-primary-700);
|
|
32
|
+
--sd-button--primary--default-color-background: var(--sd-color-white);
|
|
33
|
+
--sd-button--primary--default-color-text: var(--sd-color-primary);
|
|
34
|
+
--sd-button--primary--hover-color-background: var(--sd-color-primary-100);
|
|
35
|
+
--sd-button--secondary--active-color-background: var(--sd-color-primary-500);
|
|
36
|
+
--sd-button--secondary--hover-color-background: var(--sd-color-primary-700);
|
|
37
|
+
--sd-button--size-lg-border-radius: var(--sd-spacing-1);
|
|
38
|
+
--sd-button--size-lg-font-size: var(--sd-spacing-4);
|
|
39
|
+
--sd-button--size-lg-icon-font-size: var(--sd-spacing-6);
|
|
40
|
+
--sd-button--size-lg-padding-block: var(--sd-spacing-2);
|
|
41
|
+
--sd-button--size-md-border-radius: var(--sd-spacing-1);
|
|
42
|
+
--sd-button--size-md-font-size: var(--sd-spacing-4);
|
|
43
|
+
--sd-button--size-md-padding-block: var(--sd-spacing-2);
|
|
44
|
+
--sd-button--tertiary--active-color-background: var(--sd-color-primary-500);
|
|
45
|
+
--sd-button--tertiary--hover-color-background: var(--sd-color-primary-700);
|
|
46
|
+
--sd-color-accent-100: #b6dfaa;
|
|
47
|
+
--sd-color-accent-200: #8ed082;
|
|
48
|
+
--sd-color-accent-300: #6cc254;
|
|
49
|
+
--sd-color-accent-400: #2d9d00;
|
|
50
|
+
--sd-color-accent-500: #25880e;
|
|
51
|
+
--sd-color-accent-550: #25880e;
|
|
52
|
+
--sd-color-accent-600: #316f24;
|
|
53
|
+
--sd-color-accent-700: #215725;
|
|
54
|
+
--sd-color-accent-800: #19411b;
|
|
55
|
+
--sd-color-accent: #2d9d00;
|
|
56
|
+
--sd-color-background-neutral-100: var(--sd-color-primary-750);
|
|
57
|
+
--sd-color-background-neutral-200: var(--sd-color-primary-700);
|
|
58
|
+
--sd-color-background-neutral-300: var(--sd-color-primary-700);
|
|
59
|
+
--sd-color-background-neutral-400: var(--sd-color-neutral-600);
|
|
60
|
+
--sd-color-background-neutral-500: var(--sd-color-neutral-600);
|
|
61
|
+
--sd-color-background-primary-100: var(--sd-color-primary-750);
|
|
62
|
+
--sd-color-background-primary-200: var(--sd-color-primary-750);
|
|
63
|
+
--sd-color-background-primary-300: var(--sd-color-primary-700);
|
|
64
|
+
--sd-color-background-primary-800: var(--sd-color-primary-200);
|
|
65
|
+
--sd-color-background-white: var(--sd-color-primary-900);
|
|
66
|
+
--sd-color-black: #181818;
|
|
67
|
+
--sd-color-border-neutral-400: var(--sd-color-primary-400);
|
|
68
|
+
--sd-color-border-neutral-800: var(--sd-color-white);
|
|
69
|
+
--sd-color-border-primary-500: var(--sd-color-primary-100);
|
|
70
|
+
--sd-color-border-primary-800: var(--sd-color-primary-200);
|
|
71
|
+
--sd-color-border-primary: var(--sd-color-white);
|
|
72
|
+
--sd-color-error-300: #ea586b;
|
|
73
|
+
--sd-color-error-400: #cc1937;
|
|
74
|
+
--sd-color-error: #ea586b;
|
|
75
|
+
--sd-color-icon-fill-neutral-500: var(--sd-color-neutral-600);
|
|
76
|
+
--sd-color-icon-fill-neutral-800: var(--sd-color-white);
|
|
77
|
+
--sd-color-icon-fill-primary-100: var(--sd-color-primary-500);
|
|
78
|
+
--sd-color-icon-fill-primary-200: var(--sd-color-primary-800);
|
|
79
|
+
--sd-color-icon-fill-primary-500: var(--sd-color-primary-200);
|
|
80
|
+
--sd-color-icon-fill-primary-800: var(--sd-color-white);
|
|
81
|
+
--sd-color-icon-fill-primary: var(--sd-color-white);
|
|
82
|
+
--sd-color-info: #1582d5;
|
|
83
|
+
--sd-color-neutral-100: #f6f6f6;
|
|
84
|
+
--sd-color-neutral-200: #e9e9e9;
|
|
85
|
+
--sd-color-neutral-300: #dadada;
|
|
86
|
+
--sd-color-neutral-400: #c3c3c3;
|
|
87
|
+
--sd-color-neutral-500: #aeaeae;
|
|
88
|
+
--sd-color-neutral-600: #888888;
|
|
89
|
+
--sd-color-neutral-700: #686868;
|
|
90
|
+
--sd-color-neutral-800: #515151;
|
|
91
|
+
--sd-color-primary-100: #ecf0f9;
|
|
92
|
+
--sd-color-primary-200: #e0e9f3;
|
|
93
|
+
--sd-color-primary-300: #c8d5e7;
|
|
94
|
+
--sd-color-primary-400: #99abd0;
|
|
95
|
+
--sd-color-primary-500: #466daf;
|
|
96
|
+
--sd-color-primary-600: #00358e;
|
|
97
|
+
--sd-color-primary-700: #132e6e;
|
|
98
|
+
--sd-color-primary-750: #0a204a;
|
|
99
|
+
--sd-color-primary-800: #051530;
|
|
100
|
+
--sd-color-primary-900: #020920;
|
|
101
|
+
--sd-color-primary: #00358e;
|
|
102
|
+
--sd-color-risk-high: #fa9b1e;
|
|
103
|
+
--sd-color-risk-increased: #fff000;
|
|
104
|
+
--sd-color-risk-low: #017dc3;
|
|
105
|
+
--sd-color-risk-moderate: #00a593;
|
|
106
|
+
--sd-color-risk-veryhigh: #ff0000;
|
|
107
|
+
--sd-color-success: #6cc254;
|
|
108
|
+
--sd-color-text-black: var(--sd-color-white);
|
|
109
|
+
--sd-color-text-neutral-500: var(--sd-color-neutral-600);
|
|
110
|
+
--sd-color-text-neutral-700: var(--sd-color-primary-400);
|
|
111
|
+
--sd-color-text-primary-100: var(--sd-color-primary-500);
|
|
112
|
+
--sd-color-text-primary-500: var(--sd-color-primary-200);
|
|
113
|
+
--sd-color-text-primary-800: var(--sd-color-white);
|
|
114
|
+
--sd-color-text-primary: var(--sd-color-white);
|
|
115
|
+
--sd-color-warning: #bb8d20;
|
|
116
|
+
--sd-color-white: #ffffff;
|
|
117
|
+
--sd-flag--neutral-500-color-background: var(--sd-color-primary-750);
|
|
118
|
+
--sd-font-primary: 'Frutiger Neue fuer UI Web';
|
|
119
|
+
--sd-font-weight-bold: 700;
|
|
120
|
+
--sd-font-weight-normal: 400;
|
|
121
|
+
--sd-form-control-color-border: var(--sd-color-primary-200);
|
|
122
|
+
--sd-header-color-background: var(--sd-color-primary);
|
|
123
|
+
--sd-header-padding-bottom: 0;
|
|
124
|
+
--sd-informational-gradient--white-color-background: var(--sd-color-primary-800);
|
|
125
|
+
--sd-interactive--active-color-text: var(--sd-color-primary-400);
|
|
126
|
+
--sd-loader--neutral-500-color-icon-fill: var(--sd-color-primary-400);
|
|
127
|
+
--sd-loader--neutral-600-color-icon-fill: var(--sd-color-primary-400);
|
|
128
|
+
--sd-navigation-item--current-color: var(--sd-color-white);
|
|
129
|
+
--sd-navigation-item-border-radius-bottom: 0;
|
|
130
|
+
--sd-navigation-item-border-radius-top: 0;
|
|
131
|
+
--sd-navigation-item-color: var(--sd-color-white);
|
|
132
|
+
--sd-navigation-item-font-size: var(--sd-spacing-4);
|
|
133
|
+
--sd-navigation-item__current-indicator-border-radius: 0;
|
|
134
|
+
--sd-navigation-item__current-indicator-height: var(--sd-spacing-1);
|
|
135
|
+
--sd-opacity-0: 0%;
|
|
136
|
+
--sd-opacity-100: 100%;
|
|
137
|
+
--sd-opacity-10: 10%;
|
|
138
|
+
--sd-opacity-20: 20%;
|
|
139
|
+
--sd-opacity-30: 30%;
|
|
140
|
+
--sd-opacity-50: 50%;
|
|
141
|
+
--sd-opacity-55: 55%;
|
|
142
|
+
--sd-opacity-5: 5%;
|
|
143
|
+
--sd-opacity-60: 60%;
|
|
144
|
+
--sd-opacity-70: 70%;
|
|
145
|
+
--sd-opacity-75: 75%;
|
|
146
|
+
--sd-opacity-80: 80%;
|
|
147
|
+
--sd-opacity-85: 85%;
|
|
148
|
+
--sd-opacity-90: 90%;
|
|
149
|
+
--sd-overlay-color-background: rgba(5, 21, 48, 0.9);
|
|
150
|
+
--sd-panel-color-border: var(--sd-color-primary-400);
|
|
151
|
+
--sd-radius-full: 624.9375rem;
|
|
152
|
+
--sd-radius-lg: 0.5rem;
|
|
153
|
+
--sd-radius-md: 0.375rem;
|
|
154
|
+
--sd-radius-none: 0;
|
|
155
|
+
--sd-radius-sm: 0.125rem;
|
|
156
|
+
--sd-radius: 0.25rem;
|
|
157
|
+
--sd-sizing-10: 2.5rem;
|
|
158
|
+
--sd-sizing-12: 3rem;
|
|
159
|
+
--sd-sizing-16: 4rem;
|
|
160
|
+
--sd-sizing-20: 5rem;
|
|
161
|
+
--sd-sizing-24: 6rem;
|
|
162
|
+
--sd-sizing-2: 0.5rem;
|
|
163
|
+
--sd-sizing-2\.5: 0.625rem;
|
|
164
|
+
--sd-sizing-3: 0.75rem;
|
|
165
|
+
--sd-sizing-4: 1rem;
|
|
166
|
+
--sd-sizing-5: 1.25rem;
|
|
167
|
+
--sd-sizing-6: 1.5rem;
|
|
168
|
+
--sd-sizing-8: 2rem;
|
|
169
|
+
--sd-spacing-0\.25: 0.0625rem;
|
|
170
|
+
--sd-spacing-0\.5: 0.125rem;
|
|
171
|
+
--sd-spacing-10: 2.5rem;
|
|
172
|
+
--sd-spacing-12: 3rem;
|
|
173
|
+
--sd-spacing-16: 4rem;
|
|
174
|
+
--sd-spacing-1: 0.25rem;
|
|
175
|
+
--sd-spacing-1\.5: 0.375rem;
|
|
176
|
+
--sd-spacing-20: 5rem;
|
|
177
|
+
--sd-spacing-24: 6rem;
|
|
178
|
+
--sd-spacing-2: 0.5rem;
|
|
179
|
+
--sd-spacing-32: 8rem;
|
|
180
|
+
--sd-spacing-3: 0.75rem;
|
|
181
|
+
--sd-spacing-40: 10rem;
|
|
182
|
+
--sd-spacing-4: 1rem;
|
|
183
|
+
--sd-spacing-6: 1.5rem;
|
|
184
|
+
--sd-spacing-8: 2rem;
|
|
185
|
+
--sd-tag--selected--default-color-background: var(--sd-color-white);
|
|
186
|
+
--sd-tag--selected--default-color-text: var(--sd-color-primary);
|
|
187
|
+
--sd-text-2xl: 1.75rem;
|
|
188
|
+
--sd-text-3xl: 2rem;
|
|
189
|
+
--sd-text-4xl: 2.5rem;
|
|
190
|
+
--sd-text-base: 1rem;
|
|
191
|
+
--sd-text-lg: 1.25rem;
|
|
192
|
+
--sd-text-sm: 0.875rem;
|
|
193
|
+
--sd-text-xl: 1.5rem;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.sd-theme-ui-dark {
|
|
197
|
+
--sd-shadow-sm: 0.5px 0.5px 0.5px var(--sd-color-neutral-800);
|
|
198
|
+
--sd-shadow: 0 0 0 transparent;
|
|
199
|
+
--sd-drop-shadow-sm: 0.5px 0.5px 0.5px var(--sd-color-neutral-800);
|
|
200
|
+
--sd-drop-shadow: 0 0 0 0 transparent;
|
|
201
|
+
}
|