squarex-ui-component-lib 1.0.4 → 1.0.5

package/src/tokens/css/variables-dark.css

@@ -0,0 +1,480 @@
+/**
+ * Design Tokens - Auto-generated
+ * DO NOT EDIT DIRECTLY
+ * Generated from /tokens/ source files
+ */
+
+[data-theme="dark"] {
+  --gray-100: #ededed;
+  --gray-150: #e4e4e4;
+  --gray-200: #dbdbdb;
+  --gray-300: #cacaca;
+  --gray-400: #b8b8b8;
+  --gray-500: #a6a6a6;
+  --gray-600: #858585;
+  --gray-700: #646464;
+  --gray-800: #424242;
+  --gray-900: #323232;
+  --gray-950: #212121;
+  --gray-1000: #111111;
+  --gray-050: #f6f6f6;
+  --alphas-white-50: #ffffff0a;
+  --alphas-white-100: #ffffff14;
+  --alphas-white-150: #ffffff26;
+  --alphas-white-200: #ffffff33;
+  --alphas-white-300: #ffffff4d;
+  --alphas-white-350: #ffffff59;
+  --alphas-white-400: #ffffff66;
+  --alphas-white-500: #ffffff80;
+  --alphas-white-600: #ffffff99;
+  --alphas-white-700: #ffffffb3;
+  --alphas-white-800: #ffffffcc;
+  --alphas-black-100: #0c0c0d0d;
+  --alphas-black-200: #0c0c0d1a;
+  --alphas-black-300: #0c0c0d33;
+  --alphas-black-400: #0c0c0d66;
+  --alphas-black-500: #0c0c0db3;
+  --alphas-black-600: #0c0c0dcc;
+  --alphas-black-700: #0c0c0dd9;
+  --alphas-black-800: #0c0c0de6;
+  --alphas-black-900: #0c0c0df2;
+  --alphas-purple-100: #8851bf14;
+  --alphas-purple-200: #8851bf29;
+  --alphas-violet-100: #4432bf14;
+  --alphas-violet-200: #4432bf29;
+  --alphas-gray-100: #a6a6a629;
+  --alphas-gray-200: #a6a6a63d;
+  --alphas-slate-100: #76849414;
+  --alphas-slate-200: #76849429;
+  --alphas-green-100: #14ae5c14;
+  --alphas-green-200: #14ae5c29;
+  --alphas-red-100: #ec221f14;
+  --alphas-red-200: #ec221f29;
+  --alphas-yellow-100: #e5a00014;
+  --alphas-yellow-200: #e5a00029;
+  --purple-100: #e7dcf2;
+  --purple-150: #dbcbec;
+  --purple-200: #cfb9e5;
+  --purple-300: #b897d9;
+  --purple-400: #a074cc;
+  --purple-500: #8851bf;
+  --purple-600: #6d4199;
+  --purple-700: #523173;
+  --purple-800: #36204c;
+  --purple-900: #291839;
+  --purple-950: #1b1026;
+  --purple-1000: #0e0813;
+  --purple-050: #f3eef9;
+  --red-100: #fbd3d2;
+  --red-150: #f9bdbc;
+  --red-200: #f7a7a5;
+  --red-300: #f47a79;
+  --red-400: #f04e4c;
+  --red-500: #ec221f;
+  --red-600: #bd1b19;
+  --red-700: #8e1413;
+  --red-800: #5e0e0c;
+  --red-900: #470a09;
+  --red-950: #2f0706;
+  --red-1000: #180303;
+  --red-050: #fde9e9;
+  --yellow-50: #fefae6;
+  --yellow-100: #fef4ce;
+  --yellow-150: #fdefb5;
+  --yellow-200: #fdea9d;
+  --yellow-300: #fcdf6c;
+  --yellow-400: #fbd53b;
+  --yellow-500: #faca0a;
+  --yellow-600: #c8a208;
+  --yellow-700: #967906;
+  --yellow-800: #645104;
+  --yellow-900: #4b3d03;
+  --yellow-950: #322802;
+  --yellow-1000: #191401;
+  --green-100: #d0efde;
+  --green-150: #b8e7ce;
+  --green-200: #a1dfbe;
+  --green-300: #72ce9d;
+  --green-400: #43be7d;
+  --green-500: #14ae5c;
+  --green-600: #108b4a;
+  --green-700: #0c6837;
+  --green-800: #084625;
+  --green-900: #06341c;
+  --green-950: #042312;
+  --green-1000: #021109;
+  --green-050: #e7f7ef;
+  --violet-100: #dad6f2;
+  --violet-150: #c7c1ec;
+  --violet-200: #b4ade5;
+  --violet-300: #8f84d9;
+  --violet-400: #695bcc;
+  --violet-500: #4432bf;
+  --violet-600: #362899;
+  --violet-700: #291e73;
+  --violet-800: #1b144c;
+  --violet-900: #140f39;
+  --violet-950: #0e0a26;
+  --violet-1000: #070513;
+  --violet-050: #eceaf9;
+  --slate-100: #e4e6ea;
+  --slate-150: #d6dadf;
+  --slate-200: #c8ced4;
+  --slate-300: #adb5bf;
+  --slate-400: #919da9;
+  --slate-500: #768494;
+  --slate-600: #5e6a76;
+  --slate-700: #474f59;
+  --slate-800: #2f353b;
+  --slate-900: #23282c;
+  --slate-950: #181a1e;
+  --slate-1000: #0c0d0f;
+  --slate-050: #f1f3f4;
+  --white-1000: #ffffff;
+  --black-1000: #000000;
+  --blue-50: #e7f3fe;
+  --blue-100: #cee8fd;
+  --blue-150: #b6ddfc;
+  --blue-200: #9ed1fb;
+  --blue-300: #6dbaf9;
+  --blue-400: #3da3f7;
+  --blue-500: #0c8cf5;
+  --blue-600: #0a70c4;
+  --blue-700: #075493;
+  --blue-800: #053862;
+  --blue-900: #042a4a;
+  --blue-950: #021c31;
+  --blue-1000: #010e19;
+  --space-0: 0;
+  --space-100: 4;
+  --space-150: 6;
+  --space-200: 8;
+  --space-300: 12;
+  --space-400: 16;
+  --space-500: 20;
+  --space-600: 24;
+  --space-800: 32;
+  --space-1200: 48;
+  --space-1600: 64;
+  --space-2400: 96;
+  --space-4000: 160;
+  --space-negative-100: -4;
+  --space-negative-200: -8;
+  --space-negative-300: -12;
+  --space-negative-400: -16;
+  --space-negative-600: -24;
+  --space-050: 2;
+  --radius-100: 4;
+  --radius-200: 8;
+  --radius-400: 12;
+  --radius-500: 16;
+  --radius-full: 9999;
+  --depth-0: 0;
+  --depth-100: 4;
+  --depth-200: 8;
+  --depth-400: 16;
+  --depth-800: 32;
+  --depth-1200: 48;
+  --depth-025: 1;
+  --depth-negative-025: -1;
+  --depth-negative-100: -4;
+  --depth-negative-200: -8;
+  --depth-negative-400: -16;
+  --depth-negative-800: -32;
+  --depth-negative-1200: -48;
+  --stroke-small: 1;
+  --stroke-medium: 1.5;
+  --stroke-large: 2;
+  --blur-100: 4;
+  --icon-default-default: #ededed;
+  --icon-default-secondary: #b8b8b8;
+  --icon-default-tertiary: #424242;
+  --icon-brand-purple-default: #e7dcf2;
+  --icon-brand-purple-secondary: #a074cc;
+  --icon-brand-purple-tertiary: #523173;
+  --icon-brand-purple-on-brand-default: #291839;
+  --icon-brand-purple-on-brand-secondary: #e7dcf2;
+  --icon-brand-purple-on-brand-tertiary: #e7dcf2;
+  --icon-action-violet-default: #c7c1ec;
+  --icon-action-violet-secondary: #b4ade5;
+  --icon-action-violet-tertiary: #8f84d9;
+  --icon-action-violet-on-brand-default: #140f39;
+  --icon-action-violet-on-brand-secondary: #dad6f2;
+  --icon-action-violet-on-brand-tertiary: #dad6f2;
+  --icon-success-default: #72ce9d;
+  --icon-success-secondary: #108b4a;
+  --icon-success-tertiary: #084625;
+  --icon-success-on-success-default: #e7f7ef;
+  --icon-success-on-success-secondary: #e7f7ef;
+  --icon-success-on-positive-tertiary: #e7f7ef;
+  --icon-warning-default: #fdea9d;
+  --icon-warning-secondary: #fbd53b;
+  --icon-warning-tertiary: #c8a208;
+  --icon-warning-on-warning-default: #191401;
+  --icon-warning-on-warning-secondary: #fefae6;
+  --icon-warning-on-warning-tertiary: #fefae6;
+  --icon-danger-default: #f7a7a5;
+  --icon-danger-secondary: #f04e4c;
+  --icon-danger-tertiary: #ec221f;
+  --icon-danger-on-danger-default: #470a09;
+  --icon-danger-on-danger-secondary: #fde9e9;
+  --icon-danger-on-danger-tertiary: #fde9e9;
+  --icon-utilities-text-on-overlay: #ffffff;
+  --icon-disabled-on-disabled-secondary: #323232;
+  --icon-disabled-on-disabled-default: #646464;
+  --icon-disabled-default: #424242;
+  --icon-disabled-secondary: #323232;
+  --icon-info-default: #6dbaf9;
+  --icon-info-secondary: #0a70c4;
+  --icon-info-tertiary: #053862;
+  --icon-info-on-info-default: #010e19;
+  --icon-info-on-info-secondary: #e7f3fe;
+  --icon-info-on-info-tertiary: #e7f3fe;
+  --icon-neutral-default: #ededed;
+  --icon-neutral-secondary: #b8b8b8;
+  --icon-neutral-tertiary: #858585;
+  --icon-neutral-on-neutral-default: #323232;
+  --icon-neutral-on-neutral-secondary: #ededed;
+  --icon-neutral-on-neutral-tertiary: #e4e4e4;
+  --family-sans: Host Grotesk;
+  --weight-light-italic: Light Italic;
+  --weight-regular-italic: Italic;
+  --weight-bold-italic: Bold Italic;
+  --weight-thin-italic: Thin Italic;
+  --weight-extralight-italic: Extra Light Italic;
+  --weight-medium-italic: Medium Italic;
+  --weight-semibold-italic: Semi Bold Italic;
+  --weight-extra-bold-italic: Extra Bold Italic;
+  --weight-black-italic: Black Italic;
+  --weight-thin: 100;
+  --weight-extra-light: 200;
+  --weight-light: 300;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --weight-extra-bold: 800;
+  --weight-black: 900;
+  --scale-11: 72;
+  --scale-10: 64;
+  --scale-09: 48;
+  --scale-08: 40;
+  --scale-07: 32;
+  --scale-06: 24;
+  --scale-05: 20;
+  --scale-04: 16;
+  --scale-03: 14;
+  --scale-02: 12;
+  --scale-01: 10;
+  --title-page-font-family: Host Grotesk;
+  --title-page-font-weight: 700;
+  --title-page-size-small: 32;
+  --title-page-size-base: 40;
+  --title-page-size-large: 48;
+  --subtitle-font-family: Host Grotesk;
+  --subtitle-size-base: 32;
+  --subtitle-font-weight: 400;
+  --subtitle-size-large: 40;
+  --subtitle-size-small: 24;
+  --body-font-family: Host Grotesk;
+  --body-font-style-italic: Italic;
+  --body-size-s: 14;
+  --body-font-weight-regular: 400;
+  --body-size-m: 16;
+  --body-size-xs: 12;
+  --body-font-weight-strong: 500;
+  --body-size-l: 20;
+  --heading-font-family: Host Grotesk;
+  --heading-size-base: 24;
+  --heading-font-weight: 500;
+  --heading-size-large: 32;
+  --heading-size-small: 20;
+  --title-hero-font-family: Host Grotesk;
+  --title-hero-size: 72;
+  --title-hero-font-weight: 700;
+  --subheading-font-family: Host Grotesk;
+  --subheading-size-small: 16;
+  --subheading-size-base: 20;
+  --subheading-size-large: 24;
+  --subheading-font-weight: 400;
+  --single-line-font-family: Host Grotesk;
+  --single-line-font-style-italic: Italic;
+  --single-line-size-xxs: 10;
+  --single-line-size-xs: 12;
+  --single-line-size-m: 16;
+  --single-line-font-weight-regular: 400;
+  --single-line-font-weight-strong: 500;
+  --single-line-size-s: 14;
+  --single-line-size-l: 20;
+  --blurs-blur-soft: 2;
+  --blurs-blur-light: 4;
+  --blurs-blur-medium: 8;
+  --blurs-blur-heavy: 12;
+  --blurs-blur-intense: 24;
+  --elevations-xs: 1;
+  --elevations-s: 2;
+  --elevations-m: 4;
+  --elevations-l: 8;
+  --elevations-xl: 16;
+  --background-action-violet-default: #b4ade5;
+  --background-action-violet-secondary: #695bcc;
+  --background-action-violet-default-hover: #8f84d9;
+  --background-action-violet-secondary-hover: #4432bf;
+  --background-action-violet-tertiary: #362899;
+  --background-action-violet-tertiary-hover: #695bcc;
+  --background-action-violet-subtle-low: #4432bf14;
+  --background-action-violet-subtle-medium: #4432bf14;
+  --background-brand-purple-default: #b897d9;
+  --background-brand-purple-secondary: #6d4199;
+  --background-brand-purple-default-hover: #a074cc;
+  --background-brand-purple-secondary-hover: #523173;
+  --background-brand-purple-tertiary: #36204c;
+  --background-brand-purple-tertiary-hover: #523173;
+  --background-brand-purple-subtle-low: #8851bf14;
+  --background-brand-purple-subtle-medium: #8851bf14;
+  --background-success-default: #72ce9d;
+  --background-success-secondary: #0c6837;
+  --background-success-hover: #43be7d;
+  --background-success-secondary-hover: #06341c;
+  --background-success-tertiary: #06341c;
+  --background-success-tertiary-hover: #021109;
+  --background-success-subtle-low: #021109;
+  --background-success-subtle-medium: #021109;
+  --background-warning-default: #fcdf6c;
+  --background-warning-secondary: #c8a208;
+  --background-warning-hover: #fbd53b;
+  --background-warning-secondary-hover: #967906;
+  --background-warning-tertiary: #645104;
+  --background-warning-tertiary-hover: #4b3d03;
+  --background-warning-subtle-low: #4b3d03;
+  --background-warning-subtle-medium: #4b3d03;
+  --background-danger-default: #f9bdbc;
+  --background-danger-secondary: #8e1413;
+  --background-danger-hover: #f7a7a5;
+  --background-danger-secondary-hover: #5e0e0c;
+  --background-danger-tertiary: #470a09;
+  --background-danger-tertiary-hover: #180303;
+  --background-danger-subtle-low: #180303;
+  --background-danger-subtle-medium: #180303;
+  --background-disabled-default: #424242;
+  --background-disabled-secondary: #323232;
+  --background-utilities-scrim: #00000026;
+  --background-utilities-overlay: #00000080;
+  --background-utilities-blanket: #000000b3;
+  --background-utilities-bg-on-sq-glass: #ffffff0d;
+  --background-utilities-bg-on-sq-glass-on-glass: #ffffff0d;
+  --background-utilities-default-hover: #00000033;
+  --background-neutral-default: #cacaca;
+  --background-neutral-default-hover: #b8b8b8;
+  --background-neutral-secondary: #858585;
+  --background-neutral-secondary-hover: #646464;
+  --background-neutral-tertiary: #323232;
+  --background-neutral-tertiary-hover: #424242;
+  --background-neutral-subtle-low: #a6a6a629;
+  --background-neutral-subtle-medium: #a6a6a63d;
+  --background-default-glass: #ffffff0a;
+  --background-default-on-glass: #ffffff26;
+  --background-default-on-glass-secondary: #ffffff0a;
+  --background-default-on-glass-tertiary: #ffffff26;
+  --background-default-on-glass-hover: #ffffff14;
+  --background-default-default: #424242;
+  --background-default-default-hover: #323232;
+  --background-default-on-glass-(web): #2e2e2e63;
+  --background-info-default: #9ed1fb;
+  --background-info-secondary: #075493;
+  --background-info-tertiary: #042a4a;
+  --background-info-default-hover: #6dbaf9;
+  --background-info-secondary-hover: #0a70c4;
+  --background-info-tertiary-hover: #053862;
+  --background-info-subtle-low: #053862;
+  --background-info-subtle-medium: #053862;
+  --text-default-default: #ededed;
+  --text-default-secondary: #b8b8b8;
+  --text-default-tertiary: #858585;
+  --text-brand-purple-default: #e7dcf2;
+  --text-brand-purple-secondary: #b897d9;
+  --text-brand-purple-tertiary: #a074cc;
+  --text-brand-purple-on-brand-default: #291839;
+  --text-brand-purple-on-brand-secondary: #e7dcf2;
+  --text-brand-purple-on-brand-tertiary: #cfb9e5;
+  --text-success-default: #a1dfbe;
+  --text-success-secondary: #43be7d;
+  --text-success-tertiary: #108b4a;
+  --text-success-on-success-default: #06341c;
+  --text-success-on-success-secondary: #d0efde;
+  --text-success-on-success-tertiary: #a1dfbe;
+  --text-warning-default: #fdea9d;
+  --text-warning-secondary: #fbd53b;
+  --text-warning-tertiary: #c8a208;
+  --text-warning-on-warning-default: #4b3d03;
+  --text-warning-on-warning-secondary: #fef4ce;
+  --text-warning-on-warning-tertiary: #fdea9d;
+  --text-danger-default: #f7a7a5;
+  --text-danger-secondary: #f04e4c;
+  --text-danger-tertiary: #ec221f;
+  --text-danger-on-danger-default: #470a09;
+  --text-danger-on-danger-secondary: #fbd3d2;
+  --text-danger-on-danger-tertiary: #f9bdbc;
+  --text-disabled-on-disabled-default: #646464;
+  --text-disabled-on-disabled-secondary: #323232;
+  --text-disabled-default: #646464;
+  --text-disabled-secondary: #424242;
+  --text-utilities-text-on-overlay: #ffffff;
+  --text-neutral-on-neutral-default: #323232;
+  --text-neutral-on-neutral-secondary: #ededed;
+  --text-neutral-on-neutral-tertiary: #e4e4e4;
+  --text-neutral-default: #ededed;
+  --text-neutral-secondary: #b8b8b8;
+  --text-neutral-tertiary: #858585;
+  --text-action-violet-default: #c7c1ec;
+  --text-action-violet-secondary: #b4ade5;
+  --text-action-violet-tertiary: #8f84d9;
+  --text-action-violet-on-brand-default: #140f39;
+  --text-action-violet-on-brand-secondary: #dad6f2;
+  --text-action-violet-on-brand-tertiary: #c7c1ec;
+  --text-info-default: #6dbaf9;
+  --text-info-secondary: #0a70c4;
+  --text-info-tertiary: #053862;
+  --text-info-on-info-default: #042a4a;
+  --text-info-on-info-secondary: #cee8fd;
+  --text-info-on-info-tertiary: #9ed1fb;
+  --border-success-default: #a1dfbe;
+  --border-success-secondary: #43be7d;
+  --border-success-tertiary: #108b4a;
+  --border-warning-default: #fdea9d;
+  --border-warning-secondary: #fbd53b;
+  --border-warning-tertiary: #c8a208;
+  --border-danger-default: #f47a79;
+  --border-danger-secondary: #f04e4c;
+  --border-danger-tertiary: #ec221f;
+  --border-danger-on-danger-default: #f7a7a5;
+  --border-disabled-default: #646464;
+  --border-utilities-swatch: #ffffff3d;
+  --border-default-default: #646464;
+  --border-default-secondary: #323232;
+  --border-default-tertiary: #111111;
+  --border-default-subtle-low: #ffffff4d;
+  --border-default-subtle-medium: #a6a6a63d;
+  --border-default-subtle-high: #ffffff14;
+  --border-info-default: #6dbaf9;
+  --border-info-secondary: #0a70c4;
+  --border-info-tertiary: #053862;
+  --border-action-violet-default: #b4ade5;
+  --border-action-violet-secondary: #695bcc;
+  --border-action-violet-tertiary: #291e73;
+  --border-action-violet-on-brand-default: #140f39;
+  --border-action-violet-on-brand-secondary: #8f84d9;
+  --border-action-violet-on-brand-tertiary: #dad6f2;
+  --border-brand-purple-default: #6d4199;
+  --border-brand-purple-secondary: #36204c;
+  --border-brand-purple-tertiary: #291839;
+  --border-brand-purple-on-brand-default: #291839;
+  --border-brand-purple-on-brand-secondary: #e7dcf2;
+  --border-brand-purple-on-brand-tertiary: #e7dcf2;
+  --border-neutral-default: #ededed;
+  --border-neutral-secondary: #b8b8b8;
+  --border-neutral-tertiary: #424242;
+  --border-neutral-on-neutral-default: #323232;
+  --border-neutral-on-neutral-secondary: #ededed;
+  --border-neutral-on-neutral-tertiary: #e4e4e4;
+}