oneslash-design-system 1.8.5 → 2.0.0

package/dist/themes/forest.css

@@ -0,0 +1,165 @@
+/* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
+/* Theme "forest". Variables hold RGB channels: use rgb(var(--os-color-…) / <alpha>). */
+@import "../tokens.css";
+:root {
+  --os-mode: light;
+  --os-color-text-primary: 28 34 19;
+  --os-color-text-secondary: 81 94 60;
+  --os-color-text-disabled: 138 150 112;
+  --os-color-text-contrast: 255 255 255;
+  --os-color-accent-main: 28 34 19;
+  --os-color-accent-dark: 42 51 30;
+  --os-color-accent-light: 58 71 43;
+  --os-color-accent-contrast: 231 236 218;
+  --os-color-primary-main: 69 69 69;
+  --os-color-primary-dark: 38 38 38;
+  --os-color-primary-light: 136 136 136;
+  --os-color-primary-contrast: 255 255 255;
+  --os-color-secondary-main: 110 122 90;
+  --os-color-secondary-dark: 93 104 73;
+  --os-color-secondary-light: 130 141 107;
+  --os-color-error-main: 211 47 47;
+  --os-color-error-dark: 178 35 35;
+  --os-color-error-light: 242 119 119;
+  --os-color-error-alertBg: 242 196 196;
+  --os-color-error-contrast: 255 255 255;
+  --os-color-error-fill: 178 35 35;
+  --os-color-error-onFill: 255 255 255;
+  --os-color-error-text: 178 35 35;
+  --os-color-error-textHover: 178 35 35;
+  --os-color-error-tint: 242 119 119;
+  --os-color-warning-main: 239 108 0;
+  --os-color-warning-dark: 168 70 0;
+  --os-color-warning-light: 255 167 50;
+  --os-color-warning-alertBg: 245 213 176;
+  --os-color-warning-contrast: 255 255 255;
+  --os-color-warning-fill: 168 70 0;
+  --os-color-warning-onFill: 255 255 255;
+  --os-color-warning-text: 168 70 0;
+  --os-color-warning-textHover: 168 70 0;
+  --os-color-warning-tint: 255 167 50;
+  --os-color-info-main: 0 135 212;
+  --os-color-info-dark: 0 107 171;
+  --os-color-info-light: 44 193 255;
+  --os-color-info-alertBg: 184 217 240;
+  --os-color-info-contrast: 255 255 255;
+  --os-color-info-fill: 0 107 171;
+  --os-color-info-onFill: 255 255 255;
+  --os-color-info-text: 0 104 163;
+  --os-color-info-textHover: 0 104 163;
+  --os-color-info-tint: 44 193 255;
+  --os-color-success-main: 50 135 54;
+  --os-color-success-dark: 42 107 45;
+  --os-color-success-light: 103 193 107;
+  --os-color-success-alertBg: 196 226 197;
+  --os-color-success-contrast: 255 255 255;
+  --os-color-success-fill: 42 107 45;
+  --os-color-success-onFill: 255 255 255;
+  --os-color-success-text: 42 107 45;
+  --os-color-success-textHover: 42 107 45;
+  --os-color-success-tint: 103 193 107;
+  --os-color-background-default: 217 229 199;
+  --os-color-background-accent100: 226 236 212;
+  --os-color-background-accent200: 235 241 224;
+  --os-color-background-accent300: 244 247 236;
+  --os-color-background-elevated: 217 229 199;
+  --os-color-background-overlay: 244 247 236;
+  --os-color-action-active: 136 136 136;
+  --os-color-action-hover: 243 243 243;
+  --os-color-action-selected: 227 227 227;
+  --os-color-action-disabledBackground: 209 209 209;
+  --os-color-action-disabled: 176 176 176;
+  --os-color-actionBackground-enabled: 255 255 255;
+  --os-color-actionBackground-hovered: 255 255 255;
+  --os-color-actionBackground-selected: 255 255 255;
+  --os-color-actionBackground-disabled: 238 238 238;
+  --os-color-actionOutlinedBorder-enabled: 136 136 136;
+  --os-color-actionOutlinedBorder-hovered: 205 205 205;
+  --os-color-actionOutlinedBorder-selected: 232 232 232;
+  --os-color-actionOutlinedBorder-disabled: 176 176 176;
+  --os-color-misc-divider: 209 209 209;
+  --os-color-misc-scrim: 0 0 0;
+  --os-color-misc-tooltipBg: 66 79 52;
+  --os-color-misc-tooltipText: 217 229 199;
+}
+.dark {
+  --os-mode: dark;
+  --os-color-text-primary: 217 229 199;
+  --os-color-text-secondary: 157 170 133;
+  --os-color-text-disabled: 109 121 86;
+  --os-color-text-contrast: 0 0 0;
+  --os-color-accent-main: 231 236 218;
+  --os-color-accent-dark: 214 222 195;
+  --os-color-accent-light: 242 245 234;
+  --os-color-accent-contrast: 28 34 19;
+  --os-color-primary-main: 213 213 213;
+  --os-color-primary-dark: 233 233 233;
+  --os-color-primary-light: 154 154 154;
+  --os-color-primary-contrast: 0 0 0;
+  --os-color-secondary-main: 110 122 90;
+  --os-color-secondary-dark: 93 104 73;
+  --os-color-secondary-light: 130 141 107;
+  --os-color-error-main: 231 76 76;
+  --os-color-error-dark: 178 35 35;
+  --os-color-error-light: 242 119 119;
+  --os-color-error-alertBg: 92 26 26;
+  --os-color-error-contrast: 255 255 255;
+  --os-color-error-fill: 231 76 76;
+  --os-color-error-onFill: 0 0 0;
+  --os-color-error-text: 242 119 119;
+  --os-color-error-textHover: 242 119 119;
+  --os-color-error-tint: 178 35 35;
+  --os-color-warning-main: 255 140 10;
+  --os-color-warning-dark: 204 83 2;
+  --os-color-warning-light: 255 167 50;
+  --os-color-warning-alertBg: 92 46 10;
+  --os-color-warning-contrast: 255 255 255;
+  --os-color-warning-fill: 255 140 10;
+  --os-color-warning-onFill: 0 0 0;
+  --os-color-warning-text: 255 140 10;
+  --os-color-warning-textHover: 255 167 50;
+  --os-color-warning-tint: 204 83 2;
+  --os-color-info-main: 0 175 255;
+  --os-color-info-dark: 0 107 171;
+  --os-color-info-light: 44 193 255;
+  --os-color-info-alertBg: 10 58 92;
+  --os-color-info-contrast: 255 255 255;
+  --os-color-info-fill: 0 175 255;
+  --os-color-info-onFill: 0 0 0;
+  --os-color-info-text: 0 175 255;
+  --os-color-info-textHover: 44 193 255;
+  --os-color-info-tint: 0 107 171;
+  --os-color-success-main: 66 165 71;
+  --os-color-success-dark: 42 107 45;
+  --os-color-success-light: 103 193 107;
+  --os-color-success-alertBg: 26 74 29;
+  --os-color-success-contrast: 255 255 255;
+  --os-color-success-fill: 66 165 71;
+  --os-color-success-onFill: 0 0 0;
+  --os-color-success-text: 66 165 71;
+  --os-color-success-textHover: 103 193 107;
+  --os-color-success-tint: 42 107 45;
+  --os-color-background-default: 28 34 19;
+  --os-color-background-accent100: 39 48 27;
+  --os-color-background-accent200: 54 66 40;
+  --os-color-background-accent300: 66 79 52;
+  --os-color-background-elevated: 39 48 27;
+  --os-color-background-overlay: 39 48 27;
+  --os-color-action-active: 23 23 23;
+  --os-color-action-hover: 61 61 61;
+  --os-color-action-selected: 78 78 78;
+  --os-color-action-disabledBackground: 60 60 60;
+  --os-color-action-disabled: 56 56 56;
+  --os-color-actionBackground-enabled: 255 255 255;
+  --os-color-actionBackground-hovered: 255 255 255;
+  --os-color-actionBackground-selected: 255 255 255;
+  --os-color-actionBackground-disabled: 56 56 56;
+  --os-color-actionOutlinedBorder-enabled: 123 123 123;
+  --os-color-actionOutlinedBorder-hovered: 47 47 47;
+  --os-color-actionOutlinedBorder-selected: 64 64 64;
+  --os-color-actionOutlinedBorder-disabled: 56 56 56;
+  --os-color-misc-divider: 64 64 64;
+  --os-color-misc-scrim: 0 0 0;
+  --os-color-misc-tooltipBg: 244 247 236;
+  --os-color-misc-tooltipText: 28 34 19;
+}

package/dist/tokens.css

@@ -0,0 +1,19 @@
+/* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
+:root {
+  --os-radius-inline: 2px;
+  --os-radius-control: 8px;
+  --os-radius-container: 12px;
+  --os-radius-full: 9999px;
+  --os-shadow-overlay: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --os-z-overlay: 50;
+  --os-z-tooltip: 1000;
+  --os-duration-fast: 150ms;
+  --os-duration-slide: 200ms;
+  --os-duration-pop: 220ms;
+  --os-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --os-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
+  --os-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --os-spacing-small: 4px;
+  --os-spacing-medium: 8px;
+  --os-spacing-large: 16px;
+}

package/dist/typography.css

@@ -0,0 +1,81 @@
+/* Generated from designTokens.js by scripts/build-tokens.js. Do not edit. */
+@theme inline {
+  --font-inter: Inter, sans-serif;
+  --text-h1: 96px;
+  --text-h1--line-height: 115px;
+  --text-h1--letter-spacing: -1.5px;
+  --text-h1--font-weight: 400;
+  --font-weight-h1: 400;
+  --leading-h1: 115px;
+  --tracking-h1: -1.5px;
+  --text-h2: 60px;
+  --text-h2--line-height: 72px;
+  --text-h2--letter-spacing: -0.5px;
+  --text-h2--font-weight: 400;
+  --font-weight-h2: 400;
+  --leading-h2: 72px;
+  --tracking-h2: -0.5px;
+  --text-h3: 48px;
+  --text-h3--line-height: 58px;
+  --text-h3--letter-spacing: 0px;
+  --text-h3--font-weight: 400;
+  --font-weight-h3: 400;
+  --leading-h3: 58px;
+  --tracking-h3: 0px;
+  --text-h4: 34px;
+  --text-h4--line-height: 41px;
+  --text-h4--letter-spacing: 0.3px;
+  --text-h4--font-weight: 400;
+  --font-weight-h4: 400;
+  --leading-h4: 41px;
+  --tracking-h4: 0.3px;
+  --text-h5: 24px;
+  --text-h5--line-height: 29px;
+  --text-h5--letter-spacing: 0px;
+  --text-h5--font-weight: 400;
+  --font-weight-h5: 400;
+  --leading-h5: 29px;
+  --tracking-h5: 0px;
+  --text-h6: 20px;
+  --text-h6--line-height: 30px;
+  --text-h6--letter-spacing: 0.2px;
+  --text-h6--font-weight: 400;
+  --font-weight-h6: 400;
+  --leading-h6: 30px;
+  --tracking-h6: 0.2px;
+  --text-subtitle1: 16px;
+  --text-subtitle1--line-height: 24px;
+  --text-subtitle1--letter-spacing: 0.2px;
+  --text-subtitle1--font-weight: 400;
+  --font-weight-subtitle1: 400;
+  --leading-subtitle1: 24px;
+  --tracking-subtitle1: 0.2px;
+  --text-subtitle2: 14px;
+  --text-subtitle2--line-height: 21px;
+  --text-subtitle2--letter-spacing: 0.1px;
+  --text-subtitle2--font-weight: 400;
+  --font-weight-subtitle2: 400;
+  --leading-subtitle2: 21px;
+  --tracking-subtitle2: 0.1px;
+  --text-body1: 16px;
+  --text-body1--line-height: 24px;
+  --text-body1--letter-spacing: 0.2px;
+  --text-body1--font-weight: 400;
+  --font-weight-body1: 400;
+  --leading-body1: 24px;
+  --tracking-body1: 0.2px;
+  --text-body2: 14px;
+  --text-body2--line-height: 21px;
+  --text-body2--letter-spacing: 0.2px;
+  --text-body2--font-weight: 400;
+  --font-weight-body2: 400;
+  --leading-body2: 21px;
+  --tracking-body2: 0.2px;
+  --text-caption: 12px;
+  --text-caption--line-height: 18px;
+  --text-caption--letter-spacing: 0.5px;
+  --text-caption--font-weight: 400;
+  --font-weight-caption: 400;
+  --leading-caption: 18px;
+  --tracking-caption: 0.5px;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.8.5",
+  "version": "2.0.0",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,20 +18,31 @@
       "types": "./dist/designTokens.d.ts",
       "default": "./dist/designTokens.js"
     },
-    "./styles": "./dist/output.css"
+    "./themes/*": "./dist/themes/*",
+    "./tokens.css": "./dist/tokens.css",
+    "./theme.css": "./dist/theme.css",
+    "./theme-auto.css": "./dist/theme-auto.css",
+    "./typography.css": "./dist/typography.css",
+    "./tailwind": "./dist/tailwind-preset.js",
+    "./tailwind-auto": "./dist/tailwind-preset-auto.js"
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "next dev",
-    "build": "tsc && postcss index.css -o dist/output.css",
-    "build:css": "postcss index.css -o dist/output.css",
+    "build:tokens": "node scripts/build-tokens.js",
+    "build": "npm run build:tokens && tsc",
     "watch": "tsc --watch",
     "start": "next start",
     "lint": "next lint",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "pretest": "npm run build",
+    "test": "node --test scripts/*.test.js scripts/tokens/*.test.js",
+    "check:contrast": "node scripts/check-contrast.js",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
@@ -43,6 +54,7 @@
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
+    "@playwright/test": "1.64.1",
     "@storybook/addon-essentials": "8.6",
     "@storybook/react-vite": "8.6",
     "@types/node": "20.16.10",
@@ -52,6 +64,7 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",
+    "http-server": "14.1.1",
     "next": "14.2.13",
     "postcss": "^8",
     "postcss-cli": "^11.0.0",