Styling Update + 0.0.16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voxel51/voodo",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Voxel51's official design ontology (VOODO) system",
   "type": "module",
   "author": "Voxel Engineering <engineering@voxel51.com>",

src/components/Button/Button.tsx

@@ -12,8 +12,9 @@ import {
   ElementState,
   Radius,
   Size,
+  TextColor,
   textColorClass,
-  Variant,
+  Variant
 } from "@/types";
 import { cn } from "@/util/classes";
 
@@ -31,8 +32,7 @@ const variantStyles: Record<Variant, string> = {
   [Variant.Primary]: clsx(
     bgColorClass(ActionColor.PrimaryDefault),
     bgColorClass(ActionColor.PrimaryHover, ElementState.Hover),
-    bgColorClass(ActionColor.PrimaryFocus, ElementState.Active),
-    textColorClass(ActionColor.PrimaryText)
+    bgColorClass(ActionColor.PrimaryFocus, ElementState.Active)
   ),
   [Variant.Secondary]: clsx(
     "border-1",
@@ -41,25 +41,40 @@ const variantStyles: Record<Variant, string> = {
     borderColorClass(BorderColor.Focus, ElementState.Hover),  // design calls for focus color on hover
     borderColorClass(BorderColor.Focus, ElementState.Active),
     borderColorClass(BorderColor.Disabled, ElementState.Disabled),
-    bgColorClass(ActionColor.SecondaryFocus, ElementState.Active),
-    textColorClass(ActionColor.SecondaryText),
+    bgColorClass(ActionColor.SecondaryFocus, ElementState.Active)
   ),
   [Variant.Success]: clsx(
     bgColorClass(ActionColor.SuccessDefault),
     bgColorClass(ActionColor.SuccessHover, ElementState.Hover),
-    bgColorClass(ActionColor.SuccessFocus, ElementState.Active),
-    textColorClass(ActionColor.SuccessText)
+    bgColorClass(ActionColor.SuccessFocus, ElementState.Active)
   ),
   [Variant.Danger]: clsx(
     bgColorClass(ActionColor.DangerDefault),
     bgColorClass(ActionColor.DangerHover, ElementState.Hover),
-    bgColorClass(ActionColor.DangerFocus, ElementState.Active),
-    textColorClass(ActionColor.DangerText)
+    bgColorClass(ActionColor.DangerFocus, ElementState.Active)
   ),
   [Variant.Icon]: clsx(
+    "px-2.5 py-2.5",
     "bg-transparent",
+    bgColorClass(BackgroundColor.CardElevated, ElementState.Hover)
+  ),
+  [Variant.Borderless]: clsx(
+    "bg-transparent",
+    "border-0",
     bgColorClass(BackgroundColor.CardElevated, ElementState.Hover),
-    textColorClass(ActionColor.IconDefault),
+    radiusStyles(Radius.Full),
+  ),
+};
+
+const variantTextStyles: Record<Variant, string> = {
+  [Variant.Primary]: textColorClass(ActionColor.PrimaryText),
+  [Variant.Secondary]: textColorClass(ActionColor.SecondaryText),
+  [Variant.Success]: textColorClass(ActionColor.SuccessText),
+  [Variant.Danger]: textColorClass(ActionColor.DangerText),
+  [Variant.Icon]: textColorClass(ActionColor.IconDefault),
+  [Variant.Borderless]: clsx(
+    textColorClass(TextColor.Secondary),
+    textColorClass(ActionColor.PrimaryText, ElementState.Hover)
   ),
 };
 
@@ -95,14 +110,14 @@ export const Button: FC<ButtonProps> = ({
         "transition-colors",
         "hover:cursor-pointer",
         "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none",
-        variantStyles[variant],
         sizeStyles[size],
+        variantStyles[variant],
         borderless && "border-0",
         className
       )}
       {...props}
     >
-      <div className="flex flex-nowrap items-center justify-center gap-x-sm">
+      <div className={clsx("flex flex-nowrap items-center justify-center gap-x-sm", variantTextStyles[variant])}>
         {LeadingIcon && (
           <span className={clsx(iconStyles[size])}>
             <LeadingIcon />

src/components/FormField/FormField.tsx

@@ -28,7 +28,7 @@ export const FormField: FC<FormFieldProps> = ({
         {label && (
           <Stack orientation={Orientation.Row} spacing={Spacing.Sm}>
             <Label>
-              <Text>{label}</Text>
+              <Text color={TextColor.Primary}>{label}</Text>
             </Label>
 
             {description && (

src/components/Input/Input.tsx

@@ -58,7 +58,7 @@ export const inputStyle = ({
 }): string =>
   cn(
     "w-full",
-    bgColorClass(BackgroundColor.Background),
+    bgColorClass(BackgroundColor.Transparent),
     textColorClass(TextColor.Primary),
     "placeholder:text-content-text-tertiary",
     "transition-colors",

src/components/Toast/Toast.tsx

@@ -18,6 +18,8 @@ import {
 } from "@/types";
 import { cn } from "@/util/classes";
 
+type ToastVariant = Exclude<Variant, Variant.Borderless>;
+
 export interface ToastProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
   "title"
@@ -28,10 +30,10 @@ export interface ToastProps extends Omit<
   icon?: FC;
   open?: boolean;
   title?: ReactNode;
-  variant?: Variant;
+  variant?: ToastVariant;
 }
 
-const variantStyles: Record<Variant, string> = {
+const variantStyles: Record<ToastVariant, string> = {
   [Variant.Primary]: textColorClass(TextColor.Primary),
   [Variant.Secondary]: textColorClass(TextColor.Secondary),
   [Variant.Success]: textColorClass(IconColor.Success),

src/components/Toggle/Toggle.tsx

@@ -99,12 +99,11 @@ export const Toggle: FC<ToggleProps> = ({
           "transition-colors",
           // when hovered
           "hover:bg-[#999999]", // TODO - current scheme doesn't have a light grey
-          // when focused
           "focus:outline-none",
-          "focus:ring-1",
-          "focus:ring-action-primary-primary",
-          "focus:ring-offset-2",
-          // when disabled
+          "focus:ring-0",
+          "focus-visible:outline-none",
+          "focus-visible:ring-0",
+            // when disabled
           "disabled:opacity-50",
           "disabled:cursor-not-allowed",
           // when checked
@@ -119,6 +118,10 @@ export const Toggle: FC<ToggleProps> = ({
         <span
           className={cn(
             "pointer-events-none",
+            // center the thumb vertically
+            "absolute",
+            "top-1/2",
+            "-translate-y-1/2",
             "inline-block",
             "rounded-full",
             "bg-content-bg-card-1",

src/theme/tokens/colors.ts

@@ -16,9 +16,9 @@ export const colors = {
       bg: {
         background: "#18191A",
         card: {
-          1: "#1E1F20",
-          2: "#232526",
-          elevated: "#2F3234",
+          1: "#0D0D0D",
+          2: "#262626",
+          elevated: "#333333",
         },
         muted: "#1F2021",
         popover: "#141618",
@@ -37,16 +37,16 @@ export const colors = {
         warning: "#FCCB58",
       },
       border: {
-        default: "#2F3234",
+        default: "#404040",
         strong: "#3E4244",
-        hover: "#4A4C4E",
-        focus: "#6E6C6A",
+        hover: "#555555",
+        focus: "#B3B3B3",
         subtle: "#1E1F20",
         active: "#FF6D04",
         error: "#FF6767",
         success: "#7AB87C",
         warning: "#FCCB58",
-        disabled: "#1E1F20",
+        disabled: "#808080",
       },
       status: {
         approved: "#7AB87C",

src/types/color.ts

@@ -21,6 +21,7 @@ export enum ActionColor {
 }
 
 export enum BackgroundColor {
+  Transparent = "bg-transparent",
   Background = "bg-background",
   Card1 = "bg-card-1",
   Card2 = "bg-card-2",
@@ -101,6 +102,7 @@ export type Color =
   | TextColor;
 
 const textColorMap: Record<Color, string> = {
+
   [ActionColor.IconDefault]: "text-transparent",
   [ActionColor.PrimaryDefault]: "text-action-primary-primary",
   [ActionColor.PrimaryHover]: "text-action-primary-secondary",
@@ -126,6 +128,7 @@ const textColorMap: Record<Color, string> = {
   [BackgroundColor.Muted]: "text-content-bg-muted",
   [BackgroundColor.Popover]: "text-content-bg-popover",
   [BackgroundColor.Secondary]: "text-content-bg-secondary",
+  [BackgroundColor.Transparent]: "text-transparent",
 
   [BrandColor.Accent]: "text-brand-accent",
   [BrandColor.Primary]: "text-brand-primary",
@@ -166,6 +169,7 @@ const textColorMap: Record<Color, string> = {
 };
 
 const backgroundColorMap: Record<Color, string> = {
+  [BackgroundColor.Transparent]: "bg-transparent",
   [ActionColor.IconDefault]: "bg-transparent",
   [ActionColor.PrimaryDefault]: "bg-action-primary-primary",
   [ActionColor.PrimaryHover]: "bg-action-primary-secondary",

src/types/variant.ts

@@ -4,6 +4,7 @@ export enum Variant {
   Success = "success",
   Danger = "danger",
   Icon = "icon",
+  Borderless = "borderless",
 }
 
 export default Variant;