@vsn-ux/gaia-styles 0.1.1

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@vsn-ux/gaia-styles",
+  "version": "0.1.1",
+  "type": "module",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "dev-lib": "node ./build-component-styles.js --watch",
+    "build-tokens": "tz build",
+    "build-storybook": "storybook build",
+    "build-lib": "node ./build-component-styles.js --clean",
+    "commitlint": "commitlint --edit",
+    "prepare": "husky"
+  },
+  "exports": {
+    "./tailwindcss": "./src/styles/tailwind.css",
+    "./tailwindcss/theme.css": "./src/styles/theme.css",
+    "./tailwindcss/base.css": "./src/styles/base.css",
+    "./tailwindcss/components.css": "./src/styles/components.css",
+    "./design-tokens.json": "./src/design-tokens/dtcg-tokens.json",
+    "./font/*": "./src/font/*",
+    "./*": "./dist/*"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.6.1",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@terrazzo/cli": "^0.5.0",
+    "@terrazzo/plugin-css": "^0.5.0",
+    "@terrazzo/plugin-js": "^0.5.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "chokidar": "^4.0.3",
+    "glob": "^11.0.1",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "lucide-react": "^0.473.0",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "semantic-release": "^24.2.2",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^4.0.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  },
+  "files": [
+    "dist/",
+    "src/design-tokens/",
+    "src/font/",
+    "src/styles/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
+  }
+}

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

@@ -0,0 +1,504 @@
+{
+  "color": {
+    "$type": "color",
+    "white": {
+      "$value": "#FFFFFF"
+    },
+    "cyan": {
+      "60": {
+        "$value": "#377EA0"
+      },
+      "70": {
+        "$value": "#2A6480"
+      },
+      "80": {
+        "$value": "#1F4E66"
+      },
+      "90": {
+        "$value": "#133445"
+      }
+    },
+    "orange": {
+      "10": {
+        "$value": "#FCF0E7"
+      },
+      "20": {
+        "$value": "#FAE0CE"
+      },
+      "30": {
+        "$value": "#F5C3A1"
+      },
+      "40": {
+        "$value": "#F2A676"
+      },
+      "60": {
+        "$value": "#BB5822"
+      }
+    },
+    "neutral": {
+      "$value": "{color.neutral.30}",
+      "10": {
+        "$value": "#F2F3F5"
+      },
+      "20": {
+        "$value": "#E2E4E9"
+      },
+      "30": {
+        "$value": "#CCCFD7"
+      },
+      "50": {
+        "$value": "#8F95A4"
+      },
+      "60": {
+        "$value": "#6F7687"
+      }
+    },
+    "blue": {
+      "10": {
+        "$value": "#EDF4FE"
+      },
+      "40": {
+        "$value": "#93BBF9"
+      },
+      "70": {
+        "$value": "#1F4DDB"
+      }
+    },
+    "green": {
+      "10": {
+        "$value": "#EEF5EE"
+      },
+      "40": {
+        "$value": "#9BC59B"
+      },
+      "70": {
+        "$value": "#2E6B31"
+      }
+    },
+    "red": {
+      "10": {
+        "$value": "#FCF1EE"
+      },
+      "40": {
+        "$value": "#ECA79E"
+      },
+      "70": {
+        "$value": "#B0241D"
+      }
+    },
+    "grey": {
+      "10": {
+        "$value": "#F2F2F2"
+      },
+      "40": {
+        "$value": "#B9B9B9"
+      }
+    },
+    "lime": {
+      "10": {
+        "$value": "#EDF6DD"
+      },
+      "40": {
+        "$value": "#A5C656"
+      }
+    },
+    "teal": {
+      "10": {
+        "$value": "#ECF5F4"
+      },
+      "20": {
+        "$value": "#D5E8E6"
+      },
+      "30": {
+        "$value": "#B4D7D4"
+      },
+      "40": {
+        "$value": "#92C3C0"
+      },
+      "50": {
+        "$value": "#51A39E"
+      },
+      "60": {
+        "$value": "#3A837E"
+      },
+      "70": {
+        "$value": "#2C6764"
+      },
+      "80": {
+        "$value": "#21514E"
+      },
+      "90": {
+        "$value": "#143734"
+      },
+      "100": {
+        "$value": "#081F1F"
+      }
+    },
+    "indigo": {
+      "10": {
+        "$value": "#F0F2FE"
+      },
+      "40": {
+        "$value": "#ADB4F9"
+      }
+    },
+    "purple": {
+      "10": {
+        "$value": "#F3F1FE"
+      },
+      "40": {
+        "$value": "#C3ACF9"
+      }
+    },
+    "pink": {
+      "10": {
+        "$value": "#FBEEFC"
+      },
+      "40": {
+        "$value": "#E79DEE"
+      }
+    },
+    "rose": {
+      "10": {
+        "$value": "#FCF0F4"
+      },
+      "40": {
+        "$value": "#EFA1BD"
+      }
+    },
+    "yellow": {
+      "10": {
+        "$value": "#FDF5AE"
+      },
+      "40": {
+        "$value": "#E1B402"
+      }
+    },
+    "primary": {
+      "$value": "{color.cyan.80}",
+      "60": {
+        "$value": "{color.cyan.60}"
+      },
+      "70": {
+        "$value": "{color.cyan.70}"
+      },
+      "90": {
+        "$value": "{color.cyan.90}"
+      }
+    },
+    "secondary": {
+      "$value": "{color.orange.20}",
+      "10": {
+        "$value": "{color.orange.10}"
+      },
+      "30": {
+        "$value": "{color.orange.30}"
+      }
+    },
+    "utility": {
+      "blue": {
+        "$value": "{color.blue.40}",
+        "light": {
+          "$value": "{color.blue.10}"
+        }
+      },
+      "green": {
+        "$value": "{color.green.40}",
+        "light": {
+          "$value": "{color.green.10}"
+        }
+      },
+      "grey": {
+        "$value": "{color.grey.40}",
+        "light": {
+          "$value": "{color.grey.10}"
+        }
+      },
+      "indigo": {
+        "$value": "{color.indigo.40}",
+        "light": {
+          "$value": "{color.indigo.10}"
+        }
+      },
+      "lime": {
+        "$value": "{color.lime.40}",
+        "light": {
+          "$value": "{color.lime.10}"
+        }
+      },
+      "orange": {
+        "$value": "{color.orange.40}",
+        "light": {
+          "$value": "{color.orange.10}"
+        }
+      },
+      "pink": {
+        "$value": "{color.pink.40}",
+        "light": {
+          "$value": "{color.pink.10}"
+        }
+      },
+      "purple": {
+        "$value": "{color.purple.40}",
+        "light": {
+          "$value": "{color.purple.10}"
+        }
+      },
+      "red": {
+        "$value": "{color.red.40}",
+        "light": {
+          "$value": "{color.red.10}"
+        }
+      },
+      "rose": {
+        "$value": "{color.rose.40}",
+        "light": {
+          "$value": "{color.rose.10}"
+        }
+      },
+      "teal": {
+        "$value": "{color.teal.40}",
+        "light": {
+          "$value": "{color.teal.10}"
+        }
+      },
+      "yellow": {
+        "$value": "{color.yellow.40}",
+        "light": {
+          "$value": "{color.yellow.10}"
+        }
+      }
+    },
+    "error": {
+      "$value": "{color.red.70}",
+      "light": {
+        "$value": "{color.utility.red.light}"
+      }
+    },
+    "success": {
+      "$value": "{color.green.70}",
+      "light": {
+        "$value": "{color.utility.green.light}"
+      }
+    },
+    "warning": {
+      "$value": "{color.orange.60}",
+      "light": {
+        "$value": "{color.utility.orange.light}"
+      }
+    },
+    "information": {
+      "$value": "{color.blue.70}",
+      "light": {
+        "$value": "{color.utility.blue.light}"
+      }
+    },
+    "text": {
+      "headings": {
+        "$value": "{color.primary.90}"
+      },
+      "body": {
+        "$value": "{color.primary.90}"
+      },
+      "action": {
+        "$value": "{color.primary}"
+      },
+      "action-hover": {
+        "$value": "{color.primary.90}"
+      },
+      "disabled": {
+        "$value": "{color.utility.grey}"
+      },
+      "disable-selected": {
+        "$value": "{color.neutral.60}"
+      },
+      "information": {
+        "$value": "{color.primary.90}"
+      },
+      "success": {
+        "$value": "{color.primary.90}"
+      },
+      "warning": {
+        "$value": "{color.primary.90}"
+      },
+      "error": {
+        "$value": "{color.primary.90}"
+      },
+      "on-action": {
+        "$value": "{color.secondary.10}"
+      },
+      "on-disabled": {
+        "$value": "{color.primary.70}"
+      }
+    },
+    "surface": {
+      "page": {
+        "$value": "{color.neutral.10}"
+      },
+      "primary": {
+        "$value": "{color.white}"
+      },
+      "disabled": {
+        "$value": "{color.neutral.20}"
+      },
+      "information": {
+        "$value": "{color.information.light}"
+      },
+      "success": {
+        "$value": "{color.success.light}"
+      },
+      "warning": {
+        "$value": "{color.utility.orange.light}"
+      },
+      "error": {
+        "$value": "{color.utility.red.light}"
+      },
+      "action": {
+        "$value": "{color.primary}"
+      },
+      "action-hover": {
+        "$value": "{color.primary.90}"
+      },
+      "action-hover-2": {
+        "$value": "{color.orange.20}"
+      },
+      "disable-selected": {
+        "$value": "{color.neutral.50}"
+      }
+    },
+    "border": {
+      "primary": {
+        "$value": "{color.neutral.30}"
+      },
+      "secondary": {
+        "$value": "{color.secondary.30}"
+      },
+      "disabled": {
+        "$value": "{color.neutral}"
+      },
+      "information": {
+        "$value": "{color.information}"
+      },
+      "success": {
+        "$value": "{color.success}"
+      },
+      "warning": {
+        "$value": "{color.warning}"
+      },
+      "error": {
+        "$value": "{color.error}"
+      },
+      "action": {
+        "$value": "{color.primary}"
+      },
+      "action-hover": {
+        "$value": "{color.primary.60}"
+      },
+      "action-hover-2": {
+        "$value": "{color.secondary.30}"
+      },
+      "focus": {
+        "$value": "{color.primary}"
+      }
+    }
+  },
+  "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}"
+      },
+      "sm": {
+        "$value": "{size.12}"
+      },
+      "md": {
+        "$value": "{size.14}"
+      },
+      "lg": {
+        "$value": "{size.16}"
+      },
+      "xl": {
+        "$value": "{size.20}"
+      },
+      "2xl": {
+        "$value": "{size.24}"
+      },
+      "3xl": {
+        "$value": "{size.36}"
+      }
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "$value": "4px",
+    "round": {
+      "$type": "dimension",
+      "$value": "99999px"
+    },
+    "sharp": {
+      "$type": "dimension",
+      "$value": "0.28px"
+    }
+  },
+  "font-family": {
+    "$type": "fontFamily",
+    "$value": "Inter"
+  }
+}

package/src/font/inter.css

@@ -0,0 +1,56 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./Inter-Regular.woff2?v=4.0') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./Inter-Italic.woff2?v=4.0') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./Inter-Medium.woff2?v=4.0') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./Inter-MediumItalic.woff2?v=4.0') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./Inter-SemiBold.woff2?v=4.0') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./Inter-SemiBoldItalic.woff2?v=4.0') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./Inter-Bold.woff2?v=4.0') format('woff2');
+}
+@font-face {
+  font-family: 'Inter';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./Inter-BoldItalic.woff2?v=4.0') format('woff2');
+}

package/src/styles/all-no-reset-10pt.css

@@ -0,0 +1,12 @@
+@import '../../dist/design-tokens.css';
+
+@layer theme, base, components, utilities;
+
+@import './theme.css' layer(theme);
+@import './base.css' layer(base);
+@import './components.css' layer(components);
+
+@theme inline {
+  /* changing the spacing to match 10px root font size */
+  --spacing: 0.4rem;
+}

package/src/styles/all-no-reset.css

@@ -0,0 +1,7 @@
+@import '../../dist/design-tokens.css';
+
+@layer theme, base, components, utilities;
+
+@import './theme.css' layer(theme);
+@import './base.css' layer(base);
+@import './components.css' layer(components);

package/src/styles/all.css

@@ -0,0 +1,8 @@
+@import '../../dist/design-tokens.css';
+
+@layer theme, base, components, utilities;
+
+@import './theme.css' layer(theme);
+@import 'tailwindcss/preflight.css' layer(base);
+@import './base.css' layer(base);
+@import './components.css' layer(components);

package/src/styles/base.css

@@ -0,0 +1,3 @@
+body {
+  @apply text-cyan-90 font-inter;
+}

package/src/styles/components/avatar.css

@@ -0,0 +1,11 @@
+.ga-avatar {
+  @apply inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full border align-middle font-bold;
+
+  &.ga-avatar--small {
+    @apply h-6 w-6 text-sm;
+  }
+
+  &.ga-avatar--large {
+    @apply h-16 w-16 text-2xl;
+  }
+}