@datrix-team-product/website-ds 0.1.1 → 0.2.0

package/dist/components.css

@@ -72,12 +72,12 @@
   border-radius: var(--dx-radius-m);
   border: var(--dx-border-width-1) solid transparent;
   cursor: pointer;
-  min-height: var(--dx-space-60);
+  min-height: var(--dx-spacing-space-60);
   padding-inline: var(--dx-spacing-space-m);
   transition: background-color var(--dx-motion-duration-1) var(--dx-motion-easing-1), color var(--dx-motion-duration-1) var(--dx-motion-easing-1);
 }
-.dx-btn--sm { min-height: calc(var(--dx-space-60) - var(--dx-spacing-space-m)); }
-.dx-btn--lg { min-height: calc(var(--dx-space-60) + var(--dx-spacing-space-xs)); }
+.dx-btn--sm { min-height: calc(var(--dx-spacing-space-60) - var(--dx-spacing-space-m)); }
+.dx-btn--lg { min-height: calc(var(--dx-spacing-space-60) + var(--dx-spacing-space-xs)); }
 .dx-btn--primary { background: var(--dx-color-primary); color: var(--dx-color-text-inverse); }
 .dx-btn--primary:hover { background: var(--dx-color-primary-dark); }
 .dx-btn--secondary { background: transparent; color: var(--dx-color-primary); border-color: var(--dx-color-primary); }
@@ -164,7 +164,7 @@
   border: var(--dx-border-width-1) solid var(--dx-color-hairline);
   border-radius: var(--dx-radius-s);
   padding: var(--dx-spacing-space-s) var(--dx-spacing-space-m);
-  min-height: var(--dx-space-60);
+  min-height: var(--dx-spacing-space-60);
   box-sizing: border-box;
 }
 .dx-field__input:focus-visible {

package/dist/tokens.css

@@ -3,7 +3,7 @@
  */
 
 :root {
-  --dx-color-white: #f8f8f8; /** Observed on 13 template(s); 58010 occurrences. OKLCH oklch(0.979 0 89.9). */
+--dx-color-white: #f8f8f8; /** Observed on 13 template(s); 58010 occurrences. OKLCH oklch(0.979 0 89.9). */
   --dx-color-neutral-hex: #000000; /** Observed on 13 template(s); 37002 occurrences. OKLCH oklch(0 0 0). */
   --dx-color-hairline: #dddedf; /** Observed on 13 template(s); 31206 occurrences. OKLCH oklch(0.9 0.002 247.8). */
   --dx-color-neutral-dark: #3d3d3d; /** Observed on 13 template(s); 26400 occurrences. OKLCH oklch(0.36 0 89.9). */
@@ -116,6 +116,101 @@
   --dx-breakpoint-breakpoint-8: min-width:1281px; /** 4 occurrences across 0 templates. */
   --dx-breakpoint-breakpoint-9: min-width:481px; /** 3 occurrences across 0 templates. */
   --dx-breakpoint-breakpoint-10: min-width:768px; /** 2 occurrences across 0 templates. */
+
+  /* derived typography, aliases, ACSS-derived, library constants */
+  --dx-thirdParty-cmplz-text-color: #222222;
+  --dx-thirdParty-cmplz-banner-border-color: #f2f2f2;
+  --dx-zIndex-zIndex-1: 9999;
+  --dx-zIndex-zIndex-2: -1;
+  --dx-zIndex-zIndex-3: 999;
+  --dx-zIndex-zIndex-4: 1;
+  --dx-zIndex-zIndex-5: -2;
+  --dx-zIndex-zIndex-6: 9998;
+  --dx-zIndex-zIndex-7: 99;
+  --dx-zIndex-zIndex-8: 999999;
+  --dx-transitionDuration-transitionDuration-1: 0.3s;
+  --dx-transitionDuration-transitionDuration-2: 0.1s;
+  --dx-transitionDuration-transitionDuration-3: 0.2s;
+  --dx-transitionDuration-transitionDuration-4: 0.15s;
+  --dx-imageRatio-imageRatio-1: 3.19;
+  --dx-imageRatio-imageRatio-2: 1;
+  --dx-imageRatio-imageRatio-3: 1.78;
+  --dx-imageRatio-imageRatio-4: 1.5;
+  --dx-imageRatio-imageRatio-5: 1.77;
+  --dx-imageRatio-imageRatio-6: 0.98;
+  --dx-textTransform-textTransform-1: capitalize;
+  --dx-textTransform-textTransform-2: uppercase;
+  --dx-typography-heading-h4-family: Outfit;
+  --dx-typography-heading-h4-weight: 300;
+  --dx-typography-heading-h4-size: 1rem;
+  --dx-typography-heading-h4-line-height: 1.2rem;
+  --dx-typography-heading-h2-family: Outfit;
+  --dx-typography-heading-h2-weight: 600;
+  --dx-typography-heading-h2-size: 1.125rem;
+  --dx-typography-heading-h2-line-height: 1.35rem;
+  --dx-typography-heading-h3-family: Outfit;
+  --dx-typography-heading-h3-weight: 600;
+  --dx-typography-heading-h3-size: 1.25rem;
+  --dx-typography-heading-h3-line-height: 1.5rem;
+  --dx-typography-heading-h1-family: Outfit;
+  --dx-typography-heading-h1-weight: 200;
+  --dx-typography-heading-h1-size: 5.25rem;
+  --dx-typography-heading-h1-line-height: 6.319rem;
+  --dx-typography-body-14-family: Outfit;
+  --dx-typography-body-14-weight: 300;
+  --dx-typography-body-14-size: 0.875rem;
+  --dx-typography-body-14-line-height: 1.05rem;
+  --dx-typography-body-15-family: Outfit;
+  --dx-typography-body-15-weight: 300;
+  --dx-typography-body-15-size: 0.938rem;
+  --dx-typography-body-15-line-height: 1.119rem;
+  --dx-typography-body-16-family: Outfit;
+  --dx-typography-body-16-weight: 300;
+  --dx-typography-body-16-size: 1rem;
+  --dx-typography-body-16-line-height: 1rem;
+  --dx-typography-body-17-family: Outfit;
+  --dx-typography-body-17-weight: 300;
+  --dx-typography-body-17-size: 1.063rem;
+  --dx-typography-body-17-line-height: 1.269rem;
+  --dx-typography-body-18-family: Outfit;
+  --dx-typography-body-18-weight: 300;
+  --dx-typography-body-18-size: 1.125rem;
+  --dx-typography-body-18-line-height: 1.35rem;
+  --dx-typography-heading-display-family: Outfit;
+  --dx-typography-heading-display-weight: 200;
+  --dx-typography-heading-display-size: 3rem;
+  --dx-typography-heading-display-line-height: 3.6rem;
+  --dx-typography-heading-hero-family: Outfit;
+  --dx-typography-heading-hero-weight: 200;
+  --dx-typography-heading-hero-size: 5.625rem;
+  --dx-typography-heading-hero-line-height: 6.75rem;
+  --dx-typography-body-24-family: Outfit;
+  --dx-typography-body-24-weight: 600;
+  --dx-typography-body-24-size: 1.5rem;
+  --dx-typography-body-24-line-height: 1.8rem;
+  --dx-container-content: 128rem;
+  --dx-color-primary-dark: #032a7c;
+  --dx-radius-s: 1.3333333333rem;
+  --dx-radius-m: 2rem;
+  --dx-radius-l: 3rem;
+  --dx-radius-xl: 4.5rem;
+  --dx-focus-ring-width: 3px;
+  --dx-focus-ring-offset: 2px;
+  --dx-container-card-min: 280px;
+  --dx-container-form: 480px;
+  --dx-section-hero-padding: 12.656rem;
+  --dx-motion-duration-1: 0.3s;
+  --dx-motion-easing-1: ease-in-out;
+  --dx-elevation-shadow-1: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px;
+  --dx-radius-ordinal-1: 8.88889px;
+  --dx-border-width-1: 1px;
+  --dx-motion-duration-2: 0.1s;
+  --dx-motion-easing-2: cubic-bezier;
+  --dx-elevation-shadow-2: rgba(0, 0, 0, 0.1) 0px 10px 10px 0px;
+  --dx-radius-ordinal-2: 640px;
+  --dx-motion-duration-3: 0.2s;
+  --dx-motion-easing-3: linear;
+  --dx-radius-ordinal-3: 720px;
 }
 
 
@@ -236,6 +331,101 @@
   --dx-breakpoint-breakpoint-8: min-width:1281px; /** 4 occurrences across 0 templates. */
   --dx-breakpoint-breakpoint-9: min-width:481px; /** 3 occurrences across 0 templates. */
   --dx-breakpoint-breakpoint-10: min-width:768px; /** 2 occurrences across 0 templates. */
+
+  /* derived typography, aliases, ACSS-derived, library constants */
+  --dx-thirdParty-cmplz-text-color: #222222;
+  --dx-thirdParty-cmplz-banner-border-color: #f2f2f2;
+  --dx-zIndex-zIndex-1: 9999;
+  --dx-zIndex-zIndex-2: -1;
+  --dx-zIndex-zIndex-3: 999;
+  --dx-zIndex-zIndex-4: 1;
+  --dx-zIndex-zIndex-5: -2;
+  --dx-zIndex-zIndex-6: 9998;
+  --dx-zIndex-zIndex-7: 99;
+  --dx-zIndex-zIndex-8: 999999;
+  --dx-transitionDuration-transitionDuration-1: 0.3s;
+  --dx-transitionDuration-transitionDuration-2: 0.1s;
+  --dx-transitionDuration-transitionDuration-3: 0.2s;
+  --dx-transitionDuration-transitionDuration-4: 0.15s;
+  --dx-imageRatio-imageRatio-1: 3.19;
+  --dx-imageRatio-imageRatio-2: 1;
+  --dx-imageRatio-imageRatio-3: 1.78;
+  --dx-imageRatio-imageRatio-4: 1.5;
+  --dx-imageRatio-imageRatio-5: 1.77;
+  --dx-imageRatio-imageRatio-6: 0.98;
+  --dx-textTransform-textTransform-1: capitalize;
+  --dx-textTransform-textTransform-2: uppercase;
+  --dx-typography-heading-h4-family: Outfit;
+  --dx-typography-heading-h4-weight: 300;
+  --dx-typography-heading-h4-size: 1rem;
+  --dx-typography-heading-h4-line-height: 1.2rem;
+  --dx-typography-heading-h2-family: Outfit;
+  --dx-typography-heading-h2-weight: 600;
+  --dx-typography-heading-h2-size: 1.125rem;
+  --dx-typography-heading-h2-line-height: 1.35rem;
+  --dx-typography-heading-h3-family: Outfit;
+  --dx-typography-heading-h3-weight: 600;
+  --dx-typography-heading-h3-size: 1.25rem;
+  --dx-typography-heading-h3-line-height: 1.5rem;
+  --dx-typography-heading-h1-family: Outfit;
+  --dx-typography-heading-h1-weight: 200;
+  --dx-typography-heading-h1-size: 5.25rem;
+  --dx-typography-heading-h1-line-height: 6.319rem;
+  --dx-typography-body-14-family: Outfit;
+  --dx-typography-body-14-weight: 300;
+  --dx-typography-body-14-size: 0.875rem;
+  --dx-typography-body-14-line-height: 1.05rem;
+  --dx-typography-body-15-family: Outfit;
+  --dx-typography-body-15-weight: 300;
+  --dx-typography-body-15-size: 0.938rem;
+  --dx-typography-body-15-line-height: 1.119rem;
+  --dx-typography-body-16-family: Outfit;
+  --dx-typography-body-16-weight: 300;
+  --dx-typography-body-16-size: 1rem;
+  --dx-typography-body-16-line-height: 1rem;
+  --dx-typography-body-17-family: Outfit;
+  --dx-typography-body-17-weight: 300;
+  --dx-typography-body-17-size: 1.063rem;
+  --dx-typography-body-17-line-height: 1.269rem;
+  --dx-typography-body-18-family: Outfit;
+  --dx-typography-body-18-weight: 300;
+  --dx-typography-body-18-size: 1.125rem;
+  --dx-typography-body-18-line-height: 1.35rem;
+  --dx-typography-heading-display-family: Outfit;
+  --dx-typography-heading-display-weight: 200;
+  --dx-typography-heading-display-size: 3rem;
+  --dx-typography-heading-display-line-height: 3.6rem;
+  --dx-typography-heading-hero-family: Outfit;
+  --dx-typography-heading-hero-weight: 200;
+  --dx-typography-heading-hero-size: 5.625rem;
+  --dx-typography-heading-hero-line-height: 6.75rem;
+  --dx-typography-body-24-family: Outfit;
+  --dx-typography-body-24-weight: 600;
+  --dx-typography-body-24-size: 1.5rem;
+  --dx-typography-body-24-line-height: 1.8rem;
+  --dx-container-content: 128rem;
+  --dx-color-primary-dark: #032a7c;
+  --dx-radius-s: 1.3333333333rem;
+  --dx-radius-m: 2rem;
+  --dx-radius-l: 3rem;
+  --dx-radius-xl: 4.5rem;
+  --dx-focus-ring-width: 3px;
+  --dx-focus-ring-offset: 2px;
+  --dx-container-card-min: 280px;
+  --dx-container-form: 480px;
+  --dx-section-hero-padding: 12.656rem;
+  --dx-motion-duration-1: 0.3s;
+  --dx-motion-easing-1: ease-in-out;
+  --dx-elevation-shadow-1: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px;
+  --dx-radius-ordinal-1: 8.88889px;
+  --dx-border-width-1: 1px;
+  --dx-motion-duration-2: 0.1s;
+  --dx-motion-easing-2: cubic-bezier;
+  --dx-elevation-shadow-2: rgba(0, 0, 0, 0.1) 0px 10px 10px 0px;
+  --dx-radius-ordinal-2: 640px;
+  --dx-motion-duration-3: 0.2s;
+  --dx-motion-easing-3: linear;
+  --dx-radius-ordinal-3: 720px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -353,5 +543,100 @@
   --dx-breakpoint-breakpoint-8: min-width:1281px; /** 4 occurrences across 0 templates. */
   --dx-breakpoint-breakpoint-9: min-width:481px; /** 3 occurrences across 0 templates. */
   --dx-breakpoint-breakpoint-10: min-width:768px; /** 2 occurrences across 0 templates. */
+
+  /* derived typography, aliases, ACSS-derived, library constants */
+  --dx-thirdParty-cmplz-text-color: #222222;
+  --dx-thirdParty-cmplz-banner-border-color: #f2f2f2;
+  --dx-zIndex-zIndex-1: 9999;
+  --dx-zIndex-zIndex-2: -1;
+  --dx-zIndex-zIndex-3: 999;
+  --dx-zIndex-zIndex-4: 1;
+  --dx-zIndex-zIndex-5: -2;
+  --dx-zIndex-zIndex-6: 9998;
+  --dx-zIndex-zIndex-7: 99;
+  --dx-zIndex-zIndex-8: 999999;
+  --dx-transitionDuration-transitionDuration-1: 0.3s;
+  --dx-transitionDuration-transitionDuration-2: 0.1s;
+  --dx-transitionDuration-transitionDuration-3: 0.2s;
+  --dx-transitionDuration-transitionDuration-4: 0.15s;
+  --dx-imageRatio-imageRatio-1: 3.19;
+  --dx-imageRatio-imageRatio-2: 1;
+  --dx-imageRatio-imageRatio-3: 1.78;
+  --dx-imageRatio-imageRatio-4: 1.5;
+  --dx-imageRatio-imageRatio-5: 1.77;
+  --dx-imageRatio-imageRatio-6: 0.98;
+  --dx-textTransform-textTransform-1: capitalize;
+  --dx-textTransform-textTransform-2: uppercase;
+  --dx-typography-heading-h4-family: Outfit;
+  --dx-typography-heading-h4-weight: 300;
+  --dx-typography-heading-h4-size: 1rem;
+  --dx-typography-heading-h4-line-height: 1.2rem;
+  --dx-typography-heading-h2-family: Outfit;
+  --dx-typography-heading-h2-weight: 600;
+  --dx-typography-heading-h2-size: 1.125rem;
+  --dx-typography-heading-h2-line-height: 1.35rem;
+  --dx-typography-heading-h3-family: Outfit;
+  --dx-typography-heading-h3-weight: 600;
+  --dx-typography-heading-h3-size: 1.25rem;
+  --dx-typography-heading-h3-line-height: 1.5rem;
+  --dx-typography-heading-h1-family: Outfit;
+  --dx-typography-heading-h1-weight: 200;
+  --dx-typography-heading-h1-size: 5.25rem;
+  --dx-typography-heading-h1-line-height: 6.319rem;
+  --dx-typography-body-14-family: Outfit;
+  --dx-typography-body-14-weight: 300;
+  --dx-typography-body-14-size: 0.875rem;
+  --dx-typography-body-14-line-height: 1.05rem;
+  --dx-typography-body-15-family: Outfit;
+  --dx-typography-body-15-weight: 300;
+  --dx-typography-body-15-size: 0.938rem;
+  --dx-typography-body-15-line-height: 1.119rem;
+  --dx-typography-body-16-family: Outfit;
+  --dx-typography-body-16-weight: 300;
+  --dx-typography-body-16-size: 1rem;
+  --dx-typography-body-16-line-height: 1rem;
+  --dx-typography-body-17-family: Outfit;
+  --dx-typography-body-17-weight: 300;
+  --dx-typography-body-17-size: 1.063rem;
+  --dx-typography-body-17-line-height: 1.269rem;
+  --dx-typography-body-18-family: Outfit;
+  --dx-typography-body-18-weight: 300;
+  --dx-typography-body-18-size: 1.125rem;
+  --dx-typography-body-18-line-height: 1.35rem;
+  --dx-typography-heading-display-family: Outfit;
+  --dx-typography-heading-display-weight: 200;
+  --dx-typography-heading-display-size: 3rem;
+  --dx-typography-heading-display-line-height: 3.6rem;
+  --dx-typography-heading-hero-family: Outfit;
+  --dx-typography-heading-hero-weight: 200;
+  --dx-typography-heading-hero-size: 5.625rem;
+  --dx-typography-heading-hero-line-height: 6.75rem;
+  --dx-typography-body-24-family: Outfit;
+  --dx-typography-body-24-weight: 600;
+  --dx-typography-body-24-size: 1.5rem;
+  --dx-typography-body-24-line-height: 1.8rem;
+  --dx-container-content: 128rem;
+  --dx-color-primary-dark: #032a7c;
+  --dx-radius-s: 1.3333333333rem;
+  --dx-radius-m: 2rem;
+  --dx-radius-l: 3rem;
+  --dx-radius-xl: 4.5rem;
+  --dx-focus-ring-width: 3px;
+  --dx-focus-ring-offset: 2px;
+  --dx-container-card-min: 280px;
+  --dx-container-form: 480px;
+  --dx-section-hero-padding: 12.656rem;
+  --dx-motion-duration-1: 0.3s;
+  --dx-motion-easing-1: ease-in-out;
+  --dx-elevation-shadow-1: rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px;
+  --dx-radius-ordinal-1: 8.88889px;
+  --dx-border-width-1: 1px;
+  --dx-motion-duration-2: 0.1s;
+  --dx-motion-easing-2: cubic-bezier;
+  --dx-elevation-shadow-2: rgba(0, 0, 0, 0.1) 0px 10px 10px 0px;
+  --dx-radius-ordinal-2: 640px;
+  --dx-motion-duration-3: 0.2s;
+  --dx-motion-easing-3: linear;
+  --dx-radius-ordinal-3: 720px;
 }
 }

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@datrix-team-product/website-ds",
-  "version": "0.1.1",
-  "description": "Design tokens for the Datrix website design system — evidence-based reconstruction (AGENTS.md). Scoped name confirmed (Gate G3 D10).",
+  "version": "0.2.0",
+  "description": "Design tokens for the Datrix website design system \u2014 evidence-based reconstruction (AGENTS.md). Scoped name confirmed (Gate G3 D10).",
   "license": "SEE LICENSE IN ../../LICENSE",
   "type": "module",
   "main": "dist/tokens.json",
   "module": "dist/tokens.ts",
   "style": "dist/tokens.css",
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -17,4 +20,4 @@
     "url": "git+https://github.com/team-product-datrix/website-ai.git",
     "directory": "packages/tokens"
   }
-}
+}