@vsn-ux/gaia-styles 0.3.2 → 0.4.0

package/src/design-tokens/dtcg-tokens.json

@@ -4,6 +4,9 @@
     "white": {
       "$value": "#FFFFFF"
     },
+    "black": {
+      "$value": "#000000"
+    },
     "cyan": {
       "60": {
         "$value": "#377EA0"
@@ -157,6 +160,9 @@
       },
       "40": {
         "$value": "#C3ACF9"
+      },
+      "80": {
+        "$value": "#591ab5"
       }
     },
     "pink": {
@@ -316,7 +322,7 @@
         "$value": "{color.primary.90}"
       },
       "disabled": {
-        "$value": "{color.neutral}"
+        "$value": "{color.utility.grey}"
       },
       "disable-selected": {
         "$value": "{color.neutral.60}"
@@ -338,6 +344,9 @@
       },
       "on-disabled": {
         "$value": "{color.primary.70}"
+      },
+      "link-visited": {
+        "$value": "{color.purple.80}"
       }
     },
     "surface": {
@@ -372,12 +381,12 @@
         "$value": "{color.orange.20}"
       },
       "disable-selected": {
-        "$value": "{color.neutral.50}"
+        "$value": "{color.neutral.60}"
       }
     },
     "border": {
       "primary": {
-        "$value": "{color.neutral.30}"
+        "$value": "{color.neutral.60}"
       },
       "secondary": {
         "$value": "{color.secondary.30}"
@@ -443,89 +452,122 @@
       },
       "disabled": {
         "$value": "{color.neutral}"
+      },
+      "pictograms": {
+        "pictogram-fill": {
+          "$value": "{color.neutral}"
+        },
+        "pictogram-emphasis": {
+          "$value": "{color.neutral}"
+        }
+      }
+    },
+    "sequential-graph": {
+      "100": {
+        "$value": "{color.teal.100}"
+      },
+      "90": {
+        "$value": "{color.teal.90}"
+      },
+      "80": {
+        "$value": "{color.teal.80}"
+      },
+      "70": {
+        "$value": "{color.teal.70}"
+      },
+      "60": {
+        "$value": "{color.teal.60}"
+      },
+      "50": {
+        "$value": "{color.teal.50}"
+      },
+      "40": {
+        "$value": "{color.teal.40}"
+      },
+      "30": {
+        "$value": "{color.teal.30}"
+      },
+      "20": {
+        "$value": "{color.teal.20}"
+      },
+      "10": {
+        "$value": "{color.teal.10}"
+      }
+    },
+    "miscellaneous": {
+      "overlay": {
+        "$value": {
+          "colorSpace": "oklch",
+          "channels": [0.4949, 10.28, 270.77],
+          "alpha": 0.57
+        }
+      },
+      "skeleton-element": {
+        "$value": "{color.neutral.10}"
+      },
+      "skeleton-highlight": {
+        "$value": "{color.neutral.20}"
       }
     }
   },
   "size": {
     "$type": "dimension",
-    "0": {
-      "$value": "0px"
-    },
-    "2": {
-      "$value": "2px"
-    },
-    "4": {
-      "$value": "4px"
-    },
-    "8": {
-      "$value": "8px"
-    },
-    "10": {
-      "$value": "10px"
-    },
-    "11": {
-      "$value": "11px"
-    },
-    "12": {
-      "$value": "12px"
-    },
-    "14": {
-      "$value": "14px"
-    },
-    "16": {
-      "$value": "16px"
-    },
-    "20": {
-      "$value": "20px"
-    },
-    "24": {
-      "$value": "24px"
-    },
-    "32": {
-      "$value": "32px"
-    },
-    "36": {
-      "$value": "36px"
-    },
-    "40": {
-      "$value": "40px"
-    },
-    "48": {
-      "$value": "48px"
-    },
-    "64": {
-      "$value": "64px"
-    },
-    "80": {
-      "$value": "80px"
-    },
-    "96": {
-      "$value": "96px"
-    },
-    "160": {
-      "$value": "160px"
-    },
-    "font": {
-      "xs": {
-        "$value": "{size.11}"
+    "border-width": {
+      "none": {
+        "$value": "0px"
       },
       "sm": {
-        "$value": "{size.12}"
+        "$value": "1px"
       },
       "md": {
-        "$value": "{size.14}"
+        "$value": "2px"
       },
       "lg": {
-        "$value": "{size.16}"
+        "$value": "4px"
+      }
+    },
+    "spacing": {
+      "00": {
+        "$value": "0px"
+      },
+      "01": {
+        "$value": "0.125rem"
+      },
+      "02": {
+        "$value": "0.25rem"
+      },
+      "03": {
+        "$value": "0.5rem"
+      },
+      "04": {
+        "$value": "0.75rem"
+      },
+      "05": {
+        "$value": "1rem"
+      },
+      "06": {
+        "$value": "1.5rem"
+      },
+      "07": {
+        "$value": "2rem"
+      },
+      "08": {
+        "$value": "2.5rem"
+      },
+      "09": {
+        "$value": "3rem"
+      },
+      "10": {
+        "$value": "4rem"
       },
-      "xl": {
-        "$value": "{size.20}"
+      "11": {
+        "$value": "5rem"
       },
-      "2xl": {
-        "$value": "{size.24}"
+      "12": {
+        "$value": "6rem"
       },
-      "3xl": {
-        "$value": "{size.36}"
+      "13": {
+        "$value": "10rem"
       }
     }
   },
@@ -534,15 +576,93 @@
     "$value": "4px",
     "round": {
       "$type": "dimension",
-      "$value": "99999px"
+      "$value": "999px"
     },
     "sharp": {
       "$type": "dimension",
-      "$value": "0.28px"
+      "$value": "0.02rem"
     }
   },
-  "font-family": {
-    "$type": "fontFamily",
-    "$value": "Inter"
+  "font": {
+    "family": {
+      "primary": {
+        "$type": "fontFamily",
+        "$value": ["Inter", "-system-ui", "sans-serif"]
+      }
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "normal": {
+        "$value": "normal"
+      },
+      "medium": {
+        "$value": "medium"
+      },
+      "semibold": {
+        "$value": "semi-bold"
+      },
+      "bold": {
+        "$value": "bold"
+      }
+    }
+  },
+  "text": {
+    "$type": "typography",
+    "xs": {
+      "$value": {
+        "fontSize": "0.6875rem",
+        "fontStyle": "normal",
+        "tracking": "0.005rem",
+        "lineHeight": 1
+      }
+    },
+    "sm": {
+      "$value": {
+        "fontSize": "0.75rem",
+        "fontStyle": "normal",
+        "tracking": 0,
+        "lineHeight": 1.25
+      }
+    },
+    "md": {
+      "$value": {
+        "fontSize": "0.875rem",
+        "fontStyle": "normal",
+        "tracking": "-0.006rem",
+        "lineHeight": 1.25
+      }
+    },
+    "lg": {
+      "$value": {
+        "fontSize": "1rem",
+        "fontStyle": "normal",
+        "tracking": "-0.011rem",
+        "lineHeight": 1.5
+      }
+    },
+    "xl": {
+      "$value": {
+        "fontSize": "1.25rem",
+        "fontStyle": "normal",
+        "tracking": "-0.017rem",
+        "lineHeight": 2
+      }
+    },
+    "2xl": {
+      "$value": {
+        "fontSize": "1.5rem",
+        "fontStyle": "normal",
+        "tracking": "-0.019rem",
+        "lineHeight": 2.25
+      }
+    },
+    "3xl": {
+      "$value": {
+        "fontSize": "2.25rem",
+        "fontStyle": "normal",
+        "tracking": "-0.022rem",
+        "lineHeight": 3.5
+      }
+    }
   }
 }

package/src/styles/components/button.css

@@ -37,7 +37,7 @@
     }
 
     &:disabled {
-      @apply border-(--ga-color-border-disabled) bg-(--ga-color-surace-page) text-(--ga-color-text-disabled);
+      @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-page) text-(--ga-color-text-disabled);
     }
   }
 

package/src/styles/components/segmented-control.css

@@ -1,40 +1,28 @@
 .ga-segmented-control {
-  @apply text-md inline-flex h-10 items-center justify-center align-middle;
+  @apply text-md inline-flex items-center justify-center gap-1 rounded border border-(--ga-color-border-primary) p-0.5 align-middle;
 
   .ga-segmented-control__button {
-    @apply text-cyan-80 border-neutral-30 inline-flex h-10 items-center justify-center gap-2 border-t border-b border-l bg-white px-4 align-middle leading-1 font-medium;
+    @apply inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded border border-transparent bg-(--ga-color-surface-primary) px-4 align-middle leading-1 text-(--ga-color-text-action);
 
-    &:first-of-type {
-      @apply rounded-l;
+    &.ga-segmented-control__button--selected,
+    &:hover {
+      @apply border-(--ga-color-border-action);
     }
 
-    &:last-of-type {
-      @apply rounded-r border-r;
+    &:hover {
+      @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
     }
 
-    &.ga-segmented-control__button--selected {
-      @apply bg-cyan-80 text-orange-10 font-semibold;
+    &:focus-visible {
+      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
     }
 
-    &:not(
-        .ga-segmented-control__button--selected,
-        .ga-segmented-control__button--disabled,
-        :disabled
-      ) {
-      @apply cursor-pointer;
+    &.ga-segmented-control__button--icon-only {
+      @apply px-[0.5625rem];
 
       &:hover {
-        @apply bg-(--ga-color-surface-action-hover-2);
+        @apply text-(--ga-color-icon-action-hover);
       }
-
-      &:active {
-        @apply bg-white;
-      }
-    }
-
-    &.ga-segmented-control__button--disabled,
-    &:disabled {
-      @apply bg-neutral-10 border-neutral-30 text-grey-40;
     }
   }
 }

package/src/styles/components/switch.css

@@ -0,0 +1,76 @@
+.ga-switch {
+  @apply relative inline-flex items-center gap-3;
+
+  .ga-switch__marker {
+    @apply pointer-events-none absolute top-0 left-0 inline-block h-6 w-12 rounded-full border border-(--ga-color-border-action) bg-(--ga-color-surface-primary);
+  }
+
+  .ga-switch__check-icon {
+    @apply absolute top-0.75 left-1.5 text-(--ga-color-icon-on-primary) opacity-0 transition-opacity duration-300;
+  }
+
+  .ga-switch__slider {
+    @apply pointer-events-none absolute top-0.75 left-0.75 inline-block h-4 w-4 rounded-full bg-(--ga-color-surface-action) transition-transform duration-300;
+  }
+
+  .ga-switch__label {
+    @apply select-none;
+  }
+
+  input {
+    @apply inline-block h-6 w-12 cursor-pointer rounded-full opacity-0;
+
+    &:hover ~ .ga-switch__marker {
+      @apply bg-(--ga-color-surface-action-hover-2);
+
+      .ga-switch__slider {
+        @apply bg-(--ga-color-surface-action-hover);
+      }
+    }
+
+    &:checked {
+      ~ .ga-switch__marker {
+        @apply border-(--ga-color-border-action) bg-(--ga-color-surface-action);
+
+        .ga-switch__slider {
+          @apply translate-x-6 bg-(--ga-color-surface-primary);
+        }
+
+        .ga-switch__check-icon {
+          @apply opacity-100;
+        }
+      }
+
+      &:hover:not(:disabled) ~ .ga-switch__marker {
+        @apply bg-(--ga-color-surface-action-hover);
+
+        .ga-switch__slider {
+          @apply bg-(--ga-color-surface-action-hover-2);
+        }
+      }
+    }
+
+    &:focus-visible ~ .ga-switch__marker {
+      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+    }
+
+    &:disabled {
+      @apply cursor-not-allowed;
+
+      ~ .ga-switch__marker {
+        @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled);
+
+        .ga-switch__check-icon {
+          @apply text-(--ga-color-icon-on-disabled);
+        }
+        .ga-switch__slider {
+          @apply bg-(--ga-color-icon-on-disabled);
+        }
+      }
+    }
+  }
+
+  &.ga-switch--invalid input ~ .ga-switch__marker {
+    @apply outline-2 outline-offset-2 outline-(--ga-color-border-error);
+  }
+}

package/src/styles/components.css

@@ -11,6 +11,7 @@
 @import './components/radio.css';
 @import './components/segmented-control.css';
 @import './components/select.css';
+@import './components/switch.css';
 @import './components/tag.css';
 @import './components/text-area.css';
 @import './components/tooltip.css';

package/src/styles/theme.css

@@ -52,26 +52,26 @@
   --font-inter--font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
   --default-font-family: var(--font-inter);
 
-  --text-xs: var(--ga-size-font-xs);
-  --text-xs--line-height: calc(var(--spacing) * 4 * 1);
+  --text-xs: var(--ga-text-xs-font-size);
+  --text-xs--line-height: var(--ga-text-xs-line-height);
   --text-xs--letter-spacing: calc(var(--spacing) * 4 * 0.005);
-  --text-sm: var(--ga-size-font-sm);
-  --text-sm--line-height: calc(var(--spacing) * 4 * 1.25);
+  --text-sm: var(--ga-text-sm-font-size);
+  --text-sm--line-height: var(--ga-text-sm-line-height);
   --text-sm--letter-spacing: 0;
-  --text-md: var(--ga-size-font-md);
-  --text-md--line-height: calc(var(--spacing) * 4 * 1.25);
+  --text-md: var(--ga-text-md-font-size);
+  --text-md--line-height: var(--ga-text-md-line-height);
   --text-md--letter-spacing: calc(var(--spacing) * 4 * -0.006);
-  --text-lg: var(--ga-size-font-lg);
-  --text-lg--line-height: calc(var(--spacing) * 4 * 1.5);
+  --text-lg: var(--ga-text-lg-font-size);
+  --text-lg--line-height: var(--ga-text-lg-line-height);
   --text-lg--letter-spacing: calc(var(--spacing) * 4 * -0.011);
-  --text-xl: var(--ga-size-font-xl);
-  --text-xl--line-height: calc(var(--spacing) * 4 * 2);
+  --text-xl: var(--ga-text-xl-font-size);
+  --text-xl--line-height: var(--ga-text-xl-line-height);
   --text-xl--letter-spacing: calc(var(--spacing) * 4 * -0.017);
-  --text-2xl: var(--ga-size-font-2xl);
-  --text-2xl--line-height: calc(var(--spacing) * 4 * 2.25);
+  --text-2xl: var(--ga-text-2xl-font-size);
+  --text-2xl--line-height: var(--ga-text-2xl-line-height);
   --text-2xl--letter-spacing: calc(var(--spacing) * 4 * -0.019);
-  --text-3xl: var(--ga-size-font-3xl);
-  --text-3xl--line-height: calc(var(--spacing) * 4 * 3.5);
+  --text-3xl: var(--ga-text-3xl-font-size);
+  --text-3xl--line-height: var(--ga-text-3xl-line-height);
   --text-3xl--letter-spacing: calc(var(--spacing) * 4 * -0.022);
 
   --font-weight-normal: 400;