fix: styles (#577)

cube-js · Jan 21, 2025 · 5dbb99d · 5dbb99d
1 parent 2006cec
commit 5dbb99d
Show file tree

Hide file tree

Showing 24 changed files with 62 additions and 27 deletions.
diff --git a/.changeset/big-dragons-bathe.md b/.changeset/big-dragons-bathe.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Allow to pass numbers to {min/max}{Width/Height} styles.
diff --git a/.changeset/gorgeous-jars-grow.md b/.changeset/gorgeous-jars-grow.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix style property leakage in Panel component.
diff --git a/.changeset/hip-plums-cover.md b/.changeset/hip-plums-cover.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix transition aliases.
diff --git a/.changeset/neat-seas-reflect.md b/.changeset/neat-seas-reflect.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Change default font color to dark-02.
diff --git a/src/components/GlobalStyles.tsx b/src/components/GlobalStyles.tsx
@@ -30,7 +30,7 @@ const BODY_STYLES = {
   '-moz-osx-font-smoothing': 'grayscale',
   margin: '0',
   padding: '0',
-  color: 'rgba(20, 20, 70, .75)',
+  color: 'var(--dark-02-color)',
   'font-size': '14px',
   'line-height': '20px',
   'letter-spacing': '0.02em',

diff --git a/src/components/actions/Button/Button.tsx b/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',

diff --git a/src/components/content/Content.tsx b/src/components/content/Content.tsx
@@ -20,7 +20,7 @@ const ContentElement = tasty({
   styles: {
     gridArea: 'content',
     preset: 'p3',
-    color: '#dark.75',
+    color: '#dark-02',
     display: 'block',
     flow: 'column',
     gap: '2x',

diff --git a/src/components/content/Paragraph.tsx b/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',
 };
 

diff --git a/src/components/fields/Checkbox/Checkbox.tsx b/src/components/fields/Checkbox/Checkbox.tsx
@@ -81,6 +81,7 @@ const CheckboxWrapperElement = tasty({
     preset: 'default',
     cursor: 'pointer',
     width: 'max max-content',
+    color: '#dark-02',
   },
 });
 

diff --git a/src/components/fields/ComboBox/ComboBox.tsx b/src/components/fields/ComboBox/ComboBox.tsx
@@ -79,11 +79,11 @@ const TriggerElement = tasty({
     placeItems: 'center',
     placeContent: 'center',
     placeSelf: 'stretch',
-    radius: 'right',
+    radius: '(1r - 1bw) right',
     width: '4x',
     color: {
-      '': '#dark.75',
-      hovered: '#dark.75',
+      '': '#dark-02',
+      hovered: '#dark-02',
       pressed: '#purple',
       '[disabled]': '#dark.30',
     },

diff --git a/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx b/src/components/fields/DatePicker/DateRangeSeparatedPicker.tsx
@@ -40,6 +40,7 @@ const DateRangeDash = tasty({
   children: '––',
   styles: {
     padding: '0 .5x',
+    color: '#dark-03',
   },
 });
 

diff --git a/src/components/fields/Select/Select.tsx b/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',
     },

diff --git a/src/components/fields/Switch/Switch.tsx b/src/components/fields/Switch/Switch.tsx
@@ -45,6 +45,7 @@ const SwitchWrapperElement = tasty({
     },
     gap: '1x',
     width: 'max max-content',
+    color: '#dark-02',
   },
 });
 
@@ -61,6 +62,7 @@ const SwitchLabelElement = tasty({
     width: 'min-content',
     cursor: 'pointer',
     verticalAlign: 'baseline',
+    color: '#dark-02',
   },
 });
 

diff --git a/src/components/fields/TextInput/TextInputBase.tsx b/src/components/fields/TextInput/TextInputBase.tsx
@@ -72,8 +72,8 @@ export const INPUT_WRAPPER_STYLES: Styles = {
   radius: true,
   cursor: 'text',
   color: {
-    '': '#dark.85',
-    focused: '#dark.85',
+    '': '#dark-02',
+    focused: '#dark-02',
     invalid: '#danger-text',
     disabled: '#dark.30',
   },

diff --git a/src/components/form/FieldWrapper/FieldWrapper.tsx b/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',

diff --git a/src/components/layout/Panel.tsx b/src/components/layout/Panel.tsx
@@ -135,6 +135,8 @@ function Panel(props: CubePanelProps, ref: ForwardedRef<HTMLDivElement>) {
   ].forEach((style) => {
     if (style in props) {
       styles = { ...styles, [style]: props[style] };
+
+      delete otherProps[style];
     }
   });
 

diff --git a/src/components/layout/Prefix.tsx b/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))',
   },
 });

diff --git a/src/components/layout/Suffix.tsx b/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))',
   },
 });

diff --git a/src/components/organisms/FileTabs/FileTabs.tsx b/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: {

diff --git a/src/components/organisms/Modal/Modal.tsx b/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',

diff --git a/src/components/other/Calendar/CalendarGrid.tsx b/src/components/other/Calendar/CalendarGrid.tsx
@@ -9,6 +9,10 @@ const TableElement = tasty({
   as: 'table',
   styles: {
     borderCollapse: 'collapse',
+
+    HeadRow: {
+      color: '#dark-04',
+    },
   },
 });
 

diff --git a/src/components/overlays/Notification/Notification.tsx b/src/components/overlays/Notification/Notification.tsx
@@ -19,7 +19,7 @@ const NotificationElement = tasty(Card, {
   role: 'region',
   styles: {
     display: 'grid',
-    color: '#dark',
+    color: '#dark-02',
     padding: '.5x',
     shadow: '0 5px 15px #dark.10',
     border: false,
@@ -39,7 +39,7 @@ const NotificationElement = tasty(Card, {
       placeItems: 'center',
       preset: 't2',
       color: {
-        '': '#dark.75',
+        '': '#dark-02',
         ...Object.keys(THEMES).reduce((map, theme) => {
           map[`[data-theme="${theme}"]`] = THEMES[theme].color;
 
@@ -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',

diff --git a/src/tasty/styles/predefined.ts b/src/tasty/styles/predefined.ts
@@ -132,6 +132,11 @@ export function predefine() {
   defineStyleAlias('right', 'right', numberConverter);
   defineStyleAlias('bottom', 'bottom', numberConverter);
   defineStyleAlias('left', 'left', numberConverter);
+  // Dimensions
+  defineStyleAlias('minWidth', 'min-width', numberConverter);
+  defineStyleAlias('maxWidth', 'max-width', numberConverter);
+  defineStyleAlias('minHeight', 'min-height', numberConverter);
+  defineStyleAlias('maxHeight', 'max-height', numberConverter);
   // Style aliases
   defineStyleAlias('gridAreas', 'grid-template-areas');
   defineStyleAlias('gridColumns', 'grid-template-columns', columnsConverter);

diff --git a/src/tasty/styles/transition.ts b/src/tasty/styles/transition.ts
@@ -2,9 +2,9 @@ import { parseStyle } from '../utils/styles';
 
 const MAP = {
   fade: ['mask'],
-  move: ['transform'],
-  rotate: ['transform'],
-  scale: ['transform'],
+  translate: ['transform', 'translate'],
+  rotate: ['transform', 'rotate'],
+  scale: ['transform', 'scale'],
   placeSelf: ['transform', 'top', 'right', 'bottom', 'left'],
   fill: ['background-color'],
   border: ['border', 'box-shadow'],