cats-ui-lib 2.2.3 → 2.2.5

package/styles/_variables.scss

@@ -1,212 +1,126 @@
-:root {
-  --white: #ffffff;
-  --white-50: rgba(255, 255, 255, 0.582);
-
-  --black: #1f1f1f;
-  --default: #000000;
-  --black-900: #202224;
-  --pagination-text: var(--neutral-500);
-  --black-dust: #1a1a1a;
-
-  // NEUTRAL-COLOR
-  --neutral-cross: #d9d9d9;
-  --neutral-40: #d5d7da;
-  --neutral-50: #f0f0f0;
-  --neutral-100: #e6e7e8;
-  --neutral-200: #dadbdc;
-  --neutral-300: #c0c2c5;
-  --neutral-400: #81858a;
-  --neutral-500: #434a51;
-  --neutral-600: #040d17;
-  --neutral-900: #010306;
-
-  // BLUE COLOR
-  --blue-700: #1c60af;
-  --blue-600: #2680ea;
-  --blue-400: #92bff4;
-  --blue-100: #eaf3fd;
-  --blue-300: #c8dff9;
-  --blue-200: #dfecfc;
-  --blue-50: #f7fafe;
-  --blue-800: #1849d6;
-
-  // GREY COLOR
-  --grey-50: #e9eaeb;
-  --grey-100: #e2e8f0;
-  --grey-150: #d6d6d6;
-  --grey-200: #64748b;
-  --grey-300: #414651;
-  --grey-400: #8080808c;
-  --grey-600: #535862;
-  --light-grey: #81858a;
-  --dark-grey: #4a4a4a;
-
-  --green-50: #f7fbf7;
-  --green-100: #ecf4ec;
-  --green-200: #2a6a2d;
-  --green-400: #9bc69d;
-  --green-600: #388e3c;
-  --green-700: rgba(42, 106, 45, 1);
-
-  --red: #ff0000;
-  --red-50: #fdf7f7;
-  --red-100: #f0c9c9;
-  --red-200: #f7dfdf;
-  --red-300: #f2f2f2;
-  --red-700: #941e1e;
-
-  --yellow-50: #fffdf5;
-  --yellow-100: #fff5e6;
-  --yellow-200: #fff6da;
-  --yellow-300: #ffefc1;
-  --yellow-400: #fff9e7;
-  --yellow-500: #bf7200;
-  --yellow-600: #ffc107;
-  --yellow-700: #bf9105;
-  --yellow-800: #806003;
-  --yellow-900: #bf9105;
-
-  // Orange
-  --orange-50: rgba(255, 251, 245, 1);
-  --orange-100: #fff5e6;
-  --orange-200: #fff0d9;
-  --orange-600: #ff9800;
-  --orange-700: rgba(191, 114, 0, 1);
-
-  --box-shadow: #0a0d1208;
-  --box-shadow-100: #0000001f;
-  --box-shadow-200: #0a0d1214;
-  --grid-box-shadow: #0000000a;
-  --model-shadow: rgba(0, 0, 0, 0.08);
-  --canvas-shadow: #00000014;
-  // chunk shadow
-  --chunk-shadow: #0a0d120d;
-
-  --loader-border: #6f7b93;
-  --modal-bg: rgba(4, 13, 23, 0.3);
-  --checkbox-border: #0d6efd;
-
-  // FILTER COLOR
-  --filter-600: rgba(0, 0, 0, 0.644);
-  --feather-bg: #fafafa;
-
-
-  /* TEXT TOKENS */
-  --text-heading-primary: #040D17;
-  --text-heading-secondary: #434A51;
-  --text-heading-inverse: #FFFFFF;
-
-  --text-body-primary: #434A51;
-  --text-body-secondary: #81858A;
-  --text-body-muted: #C0C2C5;
-  --text-body-inversed: #FFFFFF;
-
-  --text-link-default: #2680EA;
-  --text-link-hover: #1C60AF;
-  --text-link-muted: #C8DFF9;
-  --text-link-inverse: #5CA0EF;
-
-  /* SURFACE TOKENS */
-  /* Background */
-  --surface-background-canvas: #FFFFFF;
-  --surface-background-default: #F0F0F0;
-  --surface-background-subtle: #E6E7E8;
-  --surface-background-blue: #F7FAFE;
-
-  /* Contextual */
-  --surface-contextual-green: #F7FBF7;
-  --surface-contextual-red: #FDF7F7;
-  --surface-contextual-yellow: #FFFDF5;
-
-  /* Decorative */
-  --surface-decorative-sage-green: #F3FCF9;
-  --surface-decorative-amber-brown: #F9F1F1;
-  --surface-decorative-teal: #EAFAFB;
-  --surface-decorative-pink: #F9EBF5;
-  --surface-decorative-orange: #FFFBF5;
-  --surface-decorative-purple: #F4F0FA;
-  --surface-decorative-blue: #F7FAFE;
-
-  /* Action */
-  --surface-action-default: #2680EA;
-  --surface-action-hover: #1C60AF;
-  --surface-action-muted: #E6E7E8;
-
-  /* BORDER TOKENS */
-  /* Core */
-  --border-core-default: #DADBDC;
-  --border-core-muted: #E6E7E8;
-  --border-core-strong: #C0C2C5;
-  --border-core-inverted: #81858A;
-
-  /* Interaction */
-  --border-interaction-default: #DFECFC;
-  --border-interaction-focus: #2680EA;
-
-  /* Semantics */
-  --border-semantics-red: #F7DFDF;
-  --border-semantics-green: #CDE2CE;
-  --border-semantics-yellow: #FFEFC1;
-
-  /* Decorative */
-  --border-decorative-purple: #D9C9ED;
-  --border-decorative-orange: #FFE5BF;
-  --border-decorative-pink: #EEC2E0;
-  --border-decorative-teal: #B0EDEE;
-  --border-decorative-amber-brown: #E5C1C5;
-  --border-decorative-sage-green: #A8E9D2;
-
-  /* ICON TOKENS */
-  --icons-main-primary: #040D17;
-  --icons-main-secondary: #434A51;
-  --icons-main-hover: #2680EA;
-  --icons-main-muted: #C0C2C5;
-  --icons-main-inverse: #FFFFFF;
-
-  /* SEMANTICS TOKENS */
-  /* Success */
-  --semantics-success-subtle: #6AAA6D;
-  --semantics-success-default: #388E3C;
-  --semantics-success-strong: #2A6A2D;
-
-  /* Error */
-  --semantics-error-subtle: #D45E5E;
-  --semantics-error-default: #FF0000;
-  --semantics-error-strong: #941E1E;
-
-  /* Warning */
-  --semantics-warning-subtle: #FFD145;
-  --semantics-warning-default: #FFC107;
-  --semantics-warning-strong: #BF9105;
-
-  /* ACCENT TOKENS */
-  /* Orange */
-  --accent-orange-subtle: #FFB240;
-  --accent-orange-default: #FF9800;
-  --accent-orange-strong: #BF7200;
-
-  /* Teal */
-  --accent-teal-subtle: #6ADEDF;
-  --accent-teal-default: #2AC7C9;
-  --accent-teal-strong: #23A4A6;
-
-  /* Purple */
-  --accent-purple-subtle: #976DCD;
-  --accent-purple-default: #8656C5;
-  --accent-purple-strong: #733FB7;
-
-  /* Amber Brown */
-  --accent-amber-brown-subtle: #DEAFB4;
-  --accent-amber-brown-default: #CF8A91;
-  --accent-amber-brown-strong: #C77880;
-
-  /* Sage Green */
-  --accent-sage-green-subtle: #33C994;
-  --accent-sage-green-default: #29A277;
-  --accent-sage-green-dark: #1F7A5A;
-
-  /* Pink */
-  --accent-pink-subtle: #D772B9;
-  --accent-pink-default: #D058AB;
-  --accent-pink-dark: #C83D9E;
-}
+:root {
+  --blue-100: #eaf3fd;
+  --box-shadow: #0a0d1208;
+  --box-shadow-200: #0a0d1214;
+  --canvas-shadow: #00000014;
+  --chunk-shadow: #0a0d120d;
+
+  /* TEXT TOKENS */
+  --text-heading-primary: #040d17;
+  --text-heading-secondary: #434a51;
+  --text-heading-inverse: #ffffff;
+
+  --text-body-primary: #434a51;
+  --text-body-secondary: #81858a;
+  --text-body-muted: #c0c2c5;
+  --text-body-inversed: #ffffff;
+
+  --text-link-default: #2680ea;
+  --text-link-hover: #1c60af;
+  --text-link-muted: #c8dff9;
+  --text-link-inverse: #5ca0ef;
+
+  /* SURFACE TOKENS */
+  /* Background */
+  --surface-background-canvas: #ffffff;
+  --surface-background-default: #f0f0f0;
+  --surface-background-subtle: #e6e7e8;
+  --surface-background-blue: #f7fafe;
+
+  /* Contextual */
+  --surface-contextual-green: #f7fbf7;
+  --surface-contextual-red: #fdf7f7;
+  --surface-contextual-yellow: #fffdf5;
+
+  /* Decorative */
+  --surface-decorative-sage-green: #f3fcf9;
+  --surface-decorative-amber-brown: #f9f1f1;
+  --surface-decorative-teal: #eafafb;
+  --surface-decorative-pink: #f9ebf5;
+  --surface-decorative-orange: #fffbf5;
+  --surface-decorative-purple: #f4f0fa;
+  --surface-decorative-blue: #f7fafe;
+
+  /* Action */
+  --surface-action-default: #2680ea;
+  --surface-action-hover: #1c60af;
+  --surface-action-muted: #e6e7e8;
+
+  /* BORDER TOKENS */
+  /* Core */
+  --border-core-default: #dadbdc;
+  --border-core-muted: #e6e7e8;
+  --border-core-strong: #c0c2c5;
+  --border-core-inverted: #81858a;
+
+  /* Interaction */
+  --border-interaction-default: #dfecfc;
+  --border-interaction-focus: #2680ea;
+
+  /* Semantics */
+  --border-semantics-red: #f7dfdf;
+  --border-semantics-green: #cde2ce;
+  --border-semantics-yellow: #ffefc1;
+
+  /* Decorative */
+  --border-decorative-purple: #d9c9ed;
+  --border-decorative-orange: #ffe5bf;
+  --border-decorative-pink: #eec2e0;
+  --border-decorative-teal: #b0edee;
+  --border-decorative-amber-brown: #e5c1c5;
+  --border-decorative-sage-green: #a8e9d2;
+
+  /* ICON TOKENS */
+  --icons-main-primary: #040d17;
+  --icons-main-secondary: #434a51;
+  --icons-main-hover: #2680ea;
+  --icons-main-muted: #c0c2c5;
+  --icons-main-inverse: #ffffff;
+
+  /* SEMANTICS TOKENS */
+  /* Success */
+  --semantics-success-subtle: #6aaa6d;
+  --semantics-success-default: #388e3c;
+  --semantics-success-strong: #2a6a2d;
+
+  /* Error */
+  --semantics-error-subtle: #d45e5e;
+  --semantics-error-default: #ff0000;
+  --semantics-error-strong: #941e1e;
+
+  /* Warning */
+  --semantics-warning-subtle: #ffd145;
+  --semantics-warning-default: #ffc107;
+  --semantics-warning-strong: #bf9105;
+
+  /* ACCENT TOKENS */
+  /* Orange */
+  --accent-orange-subtle: #ffb240;
+  --accent-orange-default: #ff9800;
+  --accent-orange-strong: #bf7200;
+
+  /* Teal */
+  --accent-teal-subtle: #6adedf;
+  --accent-teal-default: #2ac7c9;
+  --accent-teal-strong: #23a4a6;
+
+  /* Purple */
+  --accent-purple-subtle: #976dcd;
+  --accent-purple-default: #8656c5;
+  --accent-purple-strong: #733fb7;
+
+  /* Amber Brown */
+  --accent-amber-brown-subtle: #deafb4;
+  --accent-amber-brown-default: #cf8a91;
+  --accent-amber-brown-strong: #c77880;
+
+  /* Sage Green */
+  --accent-sage-green-subtle: #33c994;
+  --accent-sage-green-default: #29a277;
+  --accent-sage-green-dark: #1f7a5a;
+
+  /* Pink */
+  --accent-pink-subtle: #d772b9;
+  --accent-pink-default: #d058ab;
+  --accent-pink-dark: #c83d9e;
+}