cats-ui-lib 2.0.41 → 2.2.0

package/styles/_variables.scss

@@ -89,4 +89,124 @@
   // 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;
+}