@oxide/design-system 0.0.1

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@oxide/design-system",
+  "version": "0.0.1",
+  "description": "Home of reusable design assets and token for oxide internal sites",
+  "main": "index.js",
+  "scripts": {
+    "build:themes": "./scripts/build_themes.sh",
+    "build": "run-s build:*",
+    "prebuild:tokens": "token-transformer --preserveRawValue ./styles/tokens.json ./styles/main.json global,colors,core,main"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "style-dictionary": "^3.7.1",
+    "token-transformer": "^0.0.26",
+    "ts-node": "^10.9.1"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
+    "@types/react": "^18.0.18",
+    "esbuild-register": "^3.3.3",
+    "eslint": "^8.23.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "ts-dedent": "^2.2.0"
+  },
+  "files": [
+    "styles/dist/*.css",
+    "styles/dist/tailwind-tokens.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oxidecomputer/design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/oxidecomputer/design-system/issues"
+  },
+  "homepage": "https://github.com/oxidecomputer/design-system#readme"
+}

package/styles/dist/blue.css

@@ -0,0 +1,587 @@
+/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
+
+.blue-theme {
+	
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+							--surface-default-rgb: var(--base-neutral-0-rgb);
+							--surface-default: rgb(var(--surface-default-rgb));
+						
+
+							--surface-hover-rgb: var(--base-neutral-50-rgb);
+							--surface-hover: rgb(var(--surface-hover-rgb));
+						
+
+							--surface-raise-rgb: var(--base-neutral-50-rgb);
+							--surface-raise: rgb(var(--surface-raise-rgb));
+						
+
+							--surface-raise-hover-rgb: var(--base-neutral-100-rgb);
+							--surface-raise-hover: rgb(var(--surface-raise-hover-rgb));
+						
+
+							--surface-secondary-rgb: var(--base-neutral-100-rgb);
+							--surface-secondary: rgb(var(--surface-secondary-rgb));
+						
+
+							--surface-secondary-hover-rgb: var(--base-neutral-200-rgb);
+							--surface-secondary-hover: rgb(var(--surface-secondary-hover-rgb));
+						
+
+							--surface-tertiary-rgb: var(--base-neutral-200-rgb);
+							--surface-tertiary: rgb(var(--surface-tertiary-rgb));
+						
+
+							--surface-disabled-rgb: var(--base-neutral-100-rgb);
+							--surface-disabled: rgb(var(--surface-disabled-rgb));
+						
+--surface-scrim: rgba(var(--base-neutral-0-rgb), 0.6);
+
+							--surface-accent-rgb: var(--theme-accent-800-rgb);
+							--surface-accent: rgb(var(--surface-accent-rgb));
+						
+
+							--surface-accent-hover-rgb: var(--theme-accent-700-rgb);
+							--surface-accent-hover: rgb(var(--surface-accent-hover-rgb));
+						
+
+							--surface-accent-secondary-rgb: var(--theme-accent-200-rgb);
+							--surface-accent-secondary: rgb(var(--surface-accent-secondary-rgb));
+						
+
+							--surface-accent-secondary-hover-rgb: var(--theme-accent-300-rgb);
+							--surface-accent-secondary-hover: rgb(var(--surface-accent-secondary-hover-rgb));
+						
+
+							--surface-destructive-rgb: var(--theme-destructive-800-rgb);
+							--surface-destructive: rgb(var(--surface-destructive-rgb));
+						
+
+							--surface-destructive-hover-rgb: var(--theme-destructive-700-rgb);
+							--surface-destructive-hover: rgb(var(--surface-destructive-hover-rgb));
+						
+
+							--surface-destructive-secondary-rgb: var(--theme-destructive-200-rgb);
+							--surface-destructive-secondary: rgb(var(--surface-destructive-secondary-rgb));
+						
+
+							--surface-destructive-secondary-hover-rgb: var(--theme-destructive-300-rgb);
+							--surface-destructive-secondary-hover: rgb(var(--surface-destructive-secondary-hover-rgb));
+						
+
+							--surface-notice-rgb: var(--theme-notice-800-rgb);
+							--surface-notice: rgb(var(--surface-notice-rgb));
+						
+
+							--surface-notice-hover-rgb: var(--theme-notice-700-rgb);
+							--surface-notice-hover: rgb(var(--surface-notice-hover-rgb));
+						
+
+							--surface-notice-secondary-rgb: var(--theme-notice-200-rgb);
+							--surface-notice-secondary: rgb(var(--surface-notice-secondary-rgb));
+						
+
+							--surface-notice-secondary-hover-rgb: var(--theme-notice-300-rgb);
+							--surface-notice-secondary-hover: rgb(var(--surface-notice-secondary-hover-rgb));
+						
+
+							--surface-success-rgb: var(--theme-success-800-rgb);
+							--surface-success: rgb(var(--surface-success-rgb));
+						
+
+							--surface-success-secondary-rgb: var(--theme-success-200-rgb);
+							--surface-success-secondary: rgb(var(--surface-success-secondary-rgb));
+						
+
+							--surface-error-rgb: var(--theme-error-800-rgb);
+							--surface-error: rgb(var(--surface-error-rgb));
+						
+
+							--surface-error-secondary-rgb: var(--theme-error-200-rgb);
+							--surface-error-secondary: rgb(var(--surface-error-secondary-rgb));
+						
+
+							--surface-inverse-rgb: var(--content-default-rgb);
+							--surface-inverse: rgb(var(--surface-inverse-rgb));
+						
+
+							--surface-inverse-secondary-rgb: var(--content-secondary-rgb);
+							--surface-inverse-secondary: rgb(var(--surface-inverse-secondary-rgb));
+						
+
+							--surface-inverse-tertiary-rgb: var(--content-tertiary-rgb);
+							--surface-inverse-tertiary: rgb(var(--surface-inverse-tertiary-rgb));
+						
+
+							--content-default-rgb: var(--base-neutral-900-rgb);
+							--content-default: rgb(var(--content-default-rgb));
+						
+
+							--content-secondary-rgb: var(--base-neutral-800-rgb);
+							--content-secondary: rgb(var(--content-secondary-rgb));
+						
+
+							--content-tertiary-rgb: var(--base-neutral-700-rgb);
+							--content-tertiary: rgb(var(--content-tertiary-rgb));
+						
+
+							--content-quaternary-rgb: var(--base-neutral-600-rgb);
+							--content-quaternary: rgb(var(--content-quaternary-rgb));
+						
+
+							--content-quinary-rgb: var(--base-neutral-500-rgb);
+							--content-quinary: rgb(var(--content-quinary-rgb));
+						
+
+							--content-disabled-rgb: var(--base-neutral-500-rgb);
+							--content-disabled: rgb(var(--content-disabled-rgb));
+						
+
+							--content-accent-rgb: var(--theme-accent-800-rgb);
+							--content-accent: rgb(var(--content-accent-rgb));
+						
+
+							--content-accent-secondary-rgb: var(--theme-accent-700-rgb);
+							--content-accent-secondary: rgb(var(--content-accent-secondary-rgb));
+						
+
+							--content-accent-tertiary-rgb: var(--theme-accent-600-rgb);
+							--content-accent-tertiary: rgb(var(--content-accent-tertiary-rgb));
+						
+
+							--content-accent-disabled-rgb: var(--theme-accent-500-rgb);
+							--content-accent-disabled: rgb(var(--content-accent-disabled-rgb));
+						
+
+							--content-destructive-rgb: var(--theme-destructive-800-rgb);
+							--content-destructive: rgb(var(--content-destructive-rgb));
+						
+
+							--content-destructive-secondary-rgb: var(--theme-destructive-700-rgb);
+							--content-destructive-secondary: rgb(var(--content-destructive-secondary-rgb));
+						
+
+							--content-destructive-tertiary-rgb: var(--theme-destructive-600-rgb);
+							--content-destructive-tertiary: rgb(var(--content-destructive-tertiary-rgb));
+						
+
+							--content-destructive-disabled-rgb: var(--theme-destructive-500-rgb);
+							--content-destructive-disabled: rgb(var(--content-destructive-disabled-rgb));
+						
+
+							--content-success-rgb: var(--theme-success-800-rgb);
+							--content-success: rgb(var(--content-success-rgb));
+						
+
+							--content-success-secondary-rgb: var(--theme-success-700-rgb);
+							--content-success-secondary: rgb(var(--content-success-secondary-rgb));
+						
+
+							--content-success-tertiary-rgb: var(--theme-success-600-rgb);
+							--content-success-tertiary: rgb(var(--content-success-tertiary-rgb));
+						
+
+							--content-success-disabled-rgb: var(--theme-success-500-rgb);
+							--content-success-disabled: rgb(var(--content-success-disabled-rgb));
+						
+
+							--content-error-rgb: var(--theme-error-800-rgb);
+							--content-error: rgb(var(--content-error-rgb));
+						
+
+							--content-error-secondary-rgb: var(--theme-error-700-rgb);
+							--content-error-secondary: rgb(var(--content-error-secondary-rgb));
+						
+
+							--content-error-tertiary-rgb: var(--theme-error-600-rgb);
+							--content-error-tertiary: rgb(var(--content-error-tertiary-rgb));
+						
+
+							--content-error-disabled-rgb: var(--theme-error-500-rgb);
+							--content-error-disabled: rgb(var(--content-error-disabled-rgb));
+						
+
+							--content-notice-rgb: var(--theme-notice-800-rgb);
+							--content-notice: rgb(var(--content-notice-rgb));
+						
+
+							--content-notice-secondary-rgb: var(--theme-notice-700-rgb);
+							--content-notice-secondary: rgb(var(--content-notice-secondary-rgb));
+						
+
+							--content-notice-tertiary-rgb: var(--theme-notice-600-rgb);
+							--content-notice-tertiary: rgb(var(--content-notice-tertiary-rgb));
+						
+
+							--content-notice-disabled-rgb: var(--theme-notice-500-rgb);
+							--content-notice-disabled: rgb(var(--content-notice-disabled-rgb));
+						
+
+							--content-inverse-rgb: var(--surface-default-rgb);
+							--content-inverse: rgb(var(--content-inverse-rgb));
+						
+
+							--content-inverse-raise-rgb: var(--surface-raise-rgb);
+							--content-inverse-raise: rgb(var(--content-inverse-raise-rgb));
+						
+
+							--content-inverse-secondary-rgb: var(--surface-secondary-rgb);
+							--content-inverse-secondary: rgb(var(--content-inverse-secondary-rgb));
+						
+
+							--stroke-default-rgb: var(--base-neutral-300-rgb);
+							--stroke-default: rgb(var(--stroke-default-rgb));
+						
+
+							--stroke-secondary-rgb: var(--base-neutral-200-rgb);
+							--stroke-secondary: rgb(var(--stroke-secondary-rgb));
+						
+
+							--stroke-tertiary-rgb: var(--base-neutral-100-rgb);
+							--stroke-tertiary: rgb(var(--stroke-tertiary-rgb));
+						
+
+							--stroke-raise-rgb: var(--base-neutral-500-rgb);
+							--stroke-raise: rgb(var(--stroke-raise-rgb));
+						
+
+							--stroke-surface-rgb: var(--surface-default-rgb);
+							--stroke-surface: rgb(var(--stroke-surface-rgb));
+						
+
+							--stroke-accent-rgb: var(--theme-accent-800-rgb);
+							--stroke-accent: rgb(var(--stroke-accent-rgb));
+						
+
+							--stroke-accent-secondary-rgb: var(--theme-accent-600-rgb);
+							--stroke-accent-secondary: rgb(var(--stroke-accent-secondary-rgb));
+						
+
+							--stroke-accent-tertiary-rgb: var(--theme-accent-400-rgb);
+							--stroke-accent-tertiary: rgb(var(--stroke-accent-tertiary-rgb));
+						
+
+							--stroke-destructive-rgb: var(--theme-destructive-800-rgb);
+							--stroke-destructive: rgb(var(--stroke-destructive-rgb));
+						
+
+							--stroke-destructive-secondary-rgb: var(--theme-destructive-600-rgb);
+							--stroke-destructive-secondary: rgb(var(--stroke-destructive-secondary-rgb));
+						
+
+							--stroke-destructive-tertiary-rgb: var(--theme-destructive-400-rgb);
+							--stroke-destructive-tertiary: rgb(var(--stroke-destructive-tertiary-rgb));
+						
+
+							--stroke-success-rgb: var(--theme-success-800-rgb);
+							--stroke-success: rgb(var(--stroke-success-rgb));
+						
+
+							--stroke-success-secondary-rgb: var(--theme-success-600-rgb);
+							--stroke-success-secondary: rgb(var(--stroke-success-secondary-rgb));
+						
+
+							--stroke-success-tertiary-rgb: var(--theme-success-400-rgb);
+							--stroke-success-tertiary: rgb(var(--stroke-success-tertiary-rgb));
+						
+
+							--stroke-error-rgb: var(--theme-error-800-rgb);
+							--stroke-error: rgb(var(--stroke-error-rgb));
+						
+
+							--stroke-error-secondary-rgb: var(--theme-error-600-rgb);
+							--stroke-error-secondary: rgb(var(--stroke-error-secondary-rgb));
+						
+
+							--stroke-error-tertiary-rgb: var(--theme-error-400-rgb);
+							--stroke-error-tertiary: rgb(var(--stroke-error-tertiary-rgb));
+						
+
+							--stroke-notice-rgb: var(--theme-notice-800-rgb);
+							--stroke-notice: rgb(var(--stroke-notice-rgb));
+						
+
+							--stroke-notice-secondary-rgb: var(--theme-notice-600-rgb);
+							--stroke-notice-secondary: rgb(var(--stroke-notice-secondary-rgb));
+						
+
+							--stroke-notice-tertiary-rgb: var(--theme-notice-400-rgb);
+							--stroke-notice-tertiary: rgb(var(--stroke-notice-tertiary-rgb));
+						
+--chart-fill-area-primary: rgba(var(--theme-accent-700-rgb), 0.7019607843137254);
+--chart-fill-area-secondary: rgba(var(--theme-accent-600-rgb), 0.7019607843137254);
+--chart-fill-area-tertiary: rgba(var(--theme-accent-500-rgb), 0.7019607843137254);
+--chart-fill-area-quaternary: rgba(var(--theme-accent-400-rgb), 0.2);
+
+							--chart-fill-item-primary-rgb: var(--theme-accent-700-rgb);
+							--chart-fill-item-primary: rgb(var(--chart-fill-item-primary-rgb));
+						
+
+							--chart-fill-item-secondary-rgb: var(--theme-accent-600-rgb);
+							--chart-fill-item-secondary: rgb(var(--chart-fill-item-secondary-rgb));
+						
+
+							--chart-fill-item-tertiary-rgb: var(--theme-accent-500-rgb);
+							--chart-fill-item-tertiary: rgb(var(--chart-fill-item-tertiary-rgb));
+						
+
+							--chart-fill-item-quaternary-rgb: var(--theme-accent-400-rgb);
+							--chart-fill-item-quaternary: rgb(var(--chart-fill-item-quaternary-rgb));
+						
+
+							--chart-fill-error-primary-rgb: var(--theme-destructive-700-rgb);
+							--chart-fill-error-primary: rgb(var(--chart-fill-error-primary-rgb));
+						
+
+							--chart-fill-error-secondary-rgb: var(--theme-destructive-600-rgb);
+							--chart-fill-error-secondary: rgb(var(--chart-fill-error-secondary-rgb));
+						
+
+							--chart-fill-error-tertiary-rgb: var(--theme-destructive-500-rgb);
+							--chart-fill-error-tertiary: rgb(var(--chart-fill-error-tertiary-rgb));
+						
+
+							--chart-fill-error-quaternary-rgb: var(--theme-destructive-400-rgb);
+							--chart-fill-error-quaternary: rgb(var(--chart-fill-error-quaternary-rgb));
+						
+
+							--chart-fill-inactive-rgb: var(--base-neutral-50-rgb);
+							--chart-fill-inactive: rgb(var(--chart-fill-inactive-rgb));
+						
+
+							--chart-stroke-line-rgb: var(--theme-accent-700-rgb);
+							--chart-stroke-line: rgb(var(--chart-stroke-line-rgb));
+						
+
+							--chart-stroke-line-secondary-rgb: var(--base-yellow-600-rgb);
+							--chart-stroke-line-secondary: rgb(var(--chart-stroke-line-secondary-rgb));
+						
+
+							--chart-stroke-line-tertiary-rgb: var(--base-red-600-rgb);
+							--chart-stroke-line-tertiary: rgb(var(--chart-stroke-line-tertiary-rgb));
+						
+
+							--chart-stroke-line-quaternary-rgb: var(--base-blue-600-rgb);
+							--chart-stroke-line-quaternary: rgb(var(--chart-stroke-line-quaternary-rgb));
+						
+--chart-stroke-y-axis: rgba(var(--stroke-default-rgb), 0.4);
+--chart-stroke-item: rgba(var(--theme-accent-700-rgb), 0.4);
+
+							--chart-stroke-item-inactive-rgb: var(--base-neutral-200-rgb);
+							--chart-stroke-item-inactive: rgb(var(--chart-stroke-item-inactive-rgb));
+						
+--chart-stroke-error: rgba(var(--theme-destructive-700-rgb), 0.4);
+
+							--theme-accent-100-rgb: var(--base-blue-100-rgb);
+							--theme-accent-100: rgb(var(--theme-accent-100-rgb));
+						
+
+							--theme-accent-200-rgb: var(--base-blue-200-rgb);
+							--theme-accent-200: rgb(var(--theme-accent-200-rgb));
+						
+
+							--theme-accent-300-rgb: var(--base-blue-300-rgb);
+							--theme-accent-300: rgb(var(--theme-accent-300-rgb));
+						
+
+							--theme-accent-400-rgb: var(--base-blue-400-rgb);
+							--theme-accent-400: rgb(var(--theme-accent-400-rgb));
+						
+
+							--theme-accent-500-rgb: var(--base-blue-500-rgb);
+							--theme-accent-500: rgb(var(--theme-accent-500-rgb));
+						
+
+							--theme-accent-600-rgb: var(--base-blue-600-rgb);
+							--theme-accent-600: rgb(var(--theme-accent-600-rgb));
+						
+
+							--theme-accent-700-rgb: var(--base-blue-700-rgb);
+							--theme-accent-700: rgb(var(--theme-accent-700-rgb));
+						
+
+							--theme-accent-800-rgb: var(--base-blue-800-rgb);
+							--theme-accent-800: rgb(var(--theme-accent-800-rgb));
+						
+
+							--theme-destructive-100-rgb: var(--base-red-100-rgb);
+							--theme-destructive-100: rgb(var(--theme-destructive-100-rgb));
+						
+
+							--theme-destructive-200-rgb: var(--base-red-200-rgb);
+							--theme-destructive-200: rgb(var(--theme-destructive-200-rgb));
+						
+
+							--theme-destructive-300-rgb: var(--base-red-300-rgb);
+							--theme-destructive-300: rgb(var(--theme-destructive-300-rgb));
+						
+
+							--theme-destructive-400-rgb: var(--base-red-400-rgb);
+							--theme-destructive-400: rgb(var(--theme-destructive-400-rgb));
+						
+
+							--theme-destructive-500-rgb: var(--base-red-500-rgb);
+							--theme-destructive-500: rgb(var(--theme-destructive-500-rgb));
+						
+
+							--theme-destructive-600-rgb: var(--base-red-600-rgb);
+							--theme-destructive-600: rgb(var(--theme-destructive-600-rgb));
+						
+
+							--theme-destructive-700-rgb: var(--base-red-700-rgb);
+							--theme-destructive-700: rgb(var(--theme-destructive-700-rgb));
+						
+
+							--theme-destructive-800-rgb: var(--base-red-800-rgb);
+							--theme-destructive-800: rgb(var(--theme-destructive-800-rgb));
+						
+
+							--theme-success-100-rgb: var(--base-green-100-rgb);
+							--theme-success-100: rgb(var(--theme-success-100-rgb));
+						
+
+							--theme-success-200-rgb: var(--base-green-200-rgb);
+							--theme-success-200: rgb(var(--theme-success-200-rgb));
+						
+
+							--theme-success-300-rgb: var(--base-green-300-rgb);
+							--theme-success-300: rgb(var(--theme-success-300-rgb));
+						
+
+							--theme-success-400-rgb: var(--base-green-400-rgb);
+							--theme-success-400: rgb(var(--theme-success-400-rgb));
+						
+
+							--theme-success-500-rgb: var(--base-green-500-rgb);
+							--theme-success-500: rgb(var(--theme-success-500-rgb));
+						
+
+							--theme-success-600-rgb: var(--base-green-600-rgb);
+							--theme-success-600: rgb(var(--theme-success-600-rgb));
+						
+
+							--theme-success-700-rgb: var(--base-green-700-rgb);
+							--theme-success-700: rgb(var(--theme-success-700-rgb));
+						
+
+							--theme-success-800-rgb: var(--base-green-800-rgb);
+							--theme-success-800: rgb(var(--theme-success-800-rgb));
+						
+
+							--theme-error-100-rgb: var(--base-red-100-rgb);
+							--theme-error-100: rgb(var(--theme-error-100-rgb));
+						
+
+							--theme-error-200-rgb: var(--base-red-200-rgb);
+							--theme-error-200: rgb(var(--theme-error-200-rgb));
+						
+
+							--theme-error-300-rgb: var(--base-red-300-rgb);
+							--theme-error-300: rgb(var(--theme-error-300-rgb));
+						
+
+							--theme-error-400-rgb: var(--base-red-400-rgb);
+							--theme-error-400: rgb(var(--theme-error-400-rgb));
+						
+
+							--theme-error-500-rgb: var(--base-red-500-rgb);
+							--theme-error-500: rgb(var(--theme-error-500-rgb));
+						
+
+							--theme-error-600-rgb: var(--base-red-600-rgb);
+							--theme-error-600: rgb(var(--theme-error-600-rgb));
+						
+
+							--theme-error-700-rgb: var(--base-red-700-rgb);
+							--theme-error-700: rgb(var(--theme-error-700-rgb));
+						
+
+							--theme-error-800-rgb: var(--base-red-800-rgb);
+							--theme-error-800: rgb(var(--theme-error-800-rgb));
+						
+
+							--theme-notice-100-rgb: var(--base-yellow-100-rgb);
+							--theme-notice-100: rgb(var(--theme-notice-100-rgb));
+						
+
+							--theme-notice-200-rgb: var(--base-yellow-200-rgb);
+							--theme-notice-200: rgb(var(--theme-notice-200-rgb));
+						
+
+							--theme-notice-300-rgb: var(--base-yellow-300-rgb);
+							--theme-notice-300: rgb(var(--theme-notice-300-rgb));
+						
+
+							--theme-notice-400-rgb: var(--base-yellow-400-rgb);
+							--theme-notice-400: rgb(var(--theme-notice-400-rgb));
+						
+
+							--theme-notice-500-rgb: var(--base-yellow-500-rgb);
+							--theme-notice-500: rgb(var(--theme-notice-500-rgb));
+						
+
+							--theme-notice-600-rgb: var(--base-yellow-600-rgb);
+							--theme-notice-600: rgb(var(--theme-notice-600-rgb));
+						
+
+							--theme-notice-700-rgb: var(--base-yellow-700-rgb);
+							--theme-notice-700: rgb(var(--theme-notice-700-rgb));
+						
+
+							--theme-notice-800-rgb: var(--base-yellow-800-rgb);
+							--theme-notice-800: rgb(var(--theme-notice-800-rgb));
+						
+
+	--border-radius: 0.125rem;
+--border-radius-lg: 0.1875rem;
+--border-radius-full: 624.9375rem;
+}