fix: set default color * 3

Author: tenphi

src/components/actions/Button/Button.tsx

@@ -144,8 +144,8 @@ const ButtonElement = tasty({
         '[data-type="clear"] | [data-type="outline"] | [data-type="link"]':
           '#purple-text',
         '[data-type="link"] & pressed': '#purple',
-        '[data-type="neutral"]': '#dark.75',
-        '[data-type="neutral"] & hovered': '#dark.75',
+        '[data-type="neutral"]': '#dark-02',
+        '[data-type="neutral"] & hovered': '#dark-02',
         '[data-type="neutral"] & pressed': '#purple',
 
         // other
@@ -198,8 +198,8 @@ const ButtonElement = tasty({
       color: {
         '': '#white',
 
-        '[data-type="neutral"]': '#dark.75',
-        '[data-type="neutral"] & hovered': '#dark.75',
+        '[data-type="neutral"]': '#dark-02',
+        '[data-type="neutral"] & hovered': '#dark-02',
         '[data-type="secondary"]': '#danger',
         '[data-type="clear"] | [data-type="outline"] | [data-type="link"]':
           '#danger-text',

src/components/content/Paragraph.tsx

@@ -12,7 +12,7 @@ import { CubeTextProps, Text } from './Text';
 
 const DEFAULT_STYLES: Styles = {
   preset: 'p3',
-  color: '#dark.75',
+  color: '#dark-02',
   display: 'block',
 };
 

src/components/fields/ComboBox/ComboBox.tsx

@@ -82,8 +82,8 @@ const TriggerElement = tasty({
     radius: 'right',
     width: '4x',
     color: {
-      '': '#dark.75',
-      hovered: '#dark.75',
+      '': '#dark-02',
+      hovered: '#dark-02',
       pressed: '#purple',
       '[disabled]': '#dark.30',
     },

src/components/fields/Select/Select.tsx

@@ -170,8 +170,8 @@ const SelectElement = tasty({
     color: {
       '': '#white',
 
-      '[data-type="secondary"]': '#dark.75',
-      '[data-type="secondary"] & hovered': '#dark.75',
+      '[data-type="secondary"]': '#dark-02',
+      '[data-type="secondary"] & hovered': '#dark-02',
       '[data-type="clear"]': '#purple-text',
       '[data-type="secondary"] & pressed': '#purple',
 
@@ -219,8 +219,8 @@ const OptionElement = tasty({
       disabled: '#dark.0',
     },
     color: {
-      '': '#dark.75',
-      'hovered | focused': '#dark.75',
+      '': '#dark-02',
+      'hovered | focused': '#dark-02',
       'pressed | selected': '#purple',
       disabled: '#dark.3',
     },

src/components/form/FieldWrapper/FieldWrapper.tsx

@@ -58,7 +58,7 @@ const MessageElement = tasty({
   styles: {
     preset: 't3',
     color: {
-      '': '#dark.75',
+      '': '#dark-02',
       invalid: '#danger-text',
       valid: '#success-text',
       disabled: '#dark.40',

src/components/layout/Prefix.tsx

@@ -23,7 +23,7 @@ const PrefixElement = tasty({
     left: '@prefix-gap',
     top: '@prefix-gap',
     bottom: '@prefix-gap',
-    color: '#dark.75',
+    color: '#dark-02',
     height: '(100% - (2 * @prefix-gap))',
   },
 });

src/components/layout/Suffix.tsx

@@ -23,7 +23,7 @@ const SuffixElement = tasty({
     right: '@suffix-gap',
     top: '@suffix-gap',
     bottom: '@suffix-gap',
-    color: '#dark.75',
+    color: '#dark-02',
     height: '(100% - (2 * @suffix-gap))',
   },
 });

src/components/organisms/FileTabs/FileTabs.tsx

@@ -98,7 +98,7 @@ const TabElement = tasty(Action, {
       'disabled, disabled & hover': '#white',
     },
     color: {
-      '': '#dark.75',
+      '': '#dark-02',
       'disabled, hovered, hovered & disabled': '#dark',
     },
     cursor: {

src/components/organisms/Modal/Modal.tsx

@@ -227,7 +227,7 @@ export function Modal(allProps: CubeModalProps) {
                 qa="ModalCloseButton"
                 width="3x"
                 height="3x"
-                color={{ '': '#dark.75', hovered: '#purple' }}
+                color={{ '': '#dark-02', hovered: '#purple' }}
                 outline={{
                   '': '#purple-03.0',
                   'focused & focus-visible': '#purple-03',

src/components/overlays/Notification/Notification.tsx

@@ -60,7 +60,7 @@ const NotificationElement = tasty(Card, {
 
 const CloseButton = tasty(Action, {
   styles: {
-    color: { '': '#dark.75', hovered: '#purple' },
+    color: { '': '#dark-02', hovered: '#purple' },
     width: '5x',
     height: '5x',
     label: 'Close',