@orange-halo/components 1.0.0 → 2.1.0

package/dist/styles/typography.js

@@ -11,9 +11,9 @@ import { css } from "lit";
 export const typographyStyles = css `
   /* Base typography setup */
   :host {
-    font-family: var(--oh-font-family-sans);
-    font-size: var(--oh-font-size-base);
-    line-height: var(--oh-font-line-height-normal);
+    font-family: var(--oh-typography-body-font-family);
+    font-size: var(--oh-typography-body-base-font-size);
+    line-height: var(--oh-typography-body-base-line-height);
     color: var(--oh-color-text-primary);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -22,54 +22,54 @@ export const typographyStyles = css `
   /* Headings */
   h1,
   .oh-h1 {
-    font-size: var(--oh-font-size-4xl);
-    font-weight: var(--oh-font-weight-bold);
-    line-height: var(--oh-font-line-height-tight);
+    font-size: var(--oh-typography-heading-h1-font-size);
+    font-weight: var(--oh-typography-heading-h1-font-weight);
+    line-height: var(--oh-typography-heading-h1-line-height);
     color: var(--oh-color-text-primary);
     margin: 0 0 var(--oh-spacing-4);
   }
 
   h2,
   .oh-h2 {
-    font-size: var(--oh-font-size-3xl);
-    font-weight: var(--oh-font-weight-bold);
-    line-height: var(--oh-font-line-height-tight);
+    font-size: var(--oh-typography-heading-h2-font-size);
+    font-weight: var(--oh-typography-heading-h2-font-weight);
+    line-height: var(--oh-typography-heading-h2-line-height);
     color: var(--oh-color-text-primary);
     margin: 0 0 var(--oh-spacing-4);
   }
 
   h3,
   .oh-h3 {
-    font-size: var(--oh-font-size-2xl);
-    font-weight: var(--oh-font-weight-semibold);
-    line-height: var(--oh-font-line-height-snug);
+    font-size: var(--oh-typography-heading-h3-font-size);
+    font-weight: var(--oh-typography-heading-h3-font-weight);
+    line-height: var(--oh-typography-heading-h3-line-height);
     color: var(--oh-color-text-primary);
     margin: 0 0 var(--oh-spacing-3);
   }
 
   h4,
   .oh-h4 {
-    font-size: var(--oh-font-size-xl);
-    font-weight: var(--oh-font-weight-semibold);
-    line-height: var(--oh-font-line-height-snug);
+    font-size: var(--oh-typography-heading-h4-font-size);
+    font-weight: var(--oh-typography-heading-h4-font-weight);
+    line-height: var(--oh-typography-heading-h4-line-height);
     color: var(--oh-color-text-primary);
     margin: 0 0 var(--oh-spacing-3);
   }
 
   h5,
   .oh-h5 {
-    font-size: var(--oh-font-size-lg);
-    font-weight: var(--oh-font-weight-medium);
-    line-height: var(--oh-font-line-height-normal);
+    font-size: var(--oh-typography-heading-h5-font-size);
+    font-weight: var(--oh-typography-heading-h5-font-weight);
+    line-height: var(--oh-typography-heading-h5-line-height);
     color: var(--oh-color-text-primary);
     margin: 0 0 var(--oh-spacing-2);
   }
 
   h6,
   .oh-h6 {
-    font-size: var(--oh-font-size-base);
-    font-weight: var(--oh-font-weight-medium);
-    line-height: var(--oh-font-line-height-normal);
+    font-size: var(--oh-typography-heading-h6-font-size);
+    font-weight: var(--oh-typography-heading-h6-font-weight);
+    line-height: var(--oh-typography-heading-h6-line-height);
     color: var(--oh-color-text-primary);
     margin: 0 0 var(--oh-spacing-2);
   }
@@ -77,40 +77,40 @@ export const typographyStyles = css `
   /* Body text */
   p,
   .oh-body {
-    font-size: var(--oh-font-size-base);
-    font-weight: var(--oh-font-weight-normal);
-    line-height: var(--oh-font-line-height-normal);
+    font-size: var(--oh-typography-body-base-font-size);
+    font-weight: var(--oh-typography-body-base-font-weight);
+    line-height: var(--oh-typography-body-base-line-height);
     color: var(--oh-color-text-secondary);
     margin: 0 0 var(--oh-spacing-4);
   }
 
   .oh-body-lg {
-    font-size: var(--oh-font-size-lg);
-    line-height: var(--oh-font-line-height-relaxed);
+    font-size: var(--oh-typography-body-lg-font-size);
+    line-height: var(--oh-typography-body-lg-line-height);
   }
 
   .oh-body-sm {
-    font-size: var(--oh-font-size-sm);
+    font-size: var(--oh-typography-body-sm-font-size);
   }
 
   .oh-body-xs {
-    font-size: var(--oh-font-size-xs);
+    font-size: var(--oh-typography-body-xs-font-size);
   }
 
   /* Labels */
   .oh-label {
-    font-size: var(--oh-font-size-sm);
-    font-weight: var(--oh-font-weight-medium);
-    line-height: var(--oh-font-line-height-normal);
+    font-size: var(--oh-typography-label-base-font-size);
+    font-weight: var(--oh-typography-label-base-font-weight);
+    line-height: var(--oh-typography-label-base-line-height);
     color: var(--oh-color-text-primary);
   }
 
   .oh-label-lg {
-    font-size: var(--oh-font-size-base);
+    font-size: var(--oh-typography-body-base-font-size);
   }
 
   .oh-label-sm {
-    font-size: var(--oh-font-size-xs);
+    font-size: var(--oh-typography-label-sm-font-size);
   }
 
   /* Links - dashed underline with shrink animation */
@@ -119,7 +119,7 @@ export const typographyStyles = css `
     position: relative;
     color: var(--oh-color-brand-primary);
     text-decoration: none;
-    font-weight: var(--oh-font-weight-semibold);
+    font-weight: var(--oh-typography-emphasis-font-weight);
   }
 
   a::after,
@@ -129,16 +129,16 @@ export const typographyStyles = css `
     left: 0;
     right: 0;
     bottom: 0;
-    height: 2px;
+    height: var(--oh-decoration-underline-thickness);
     background: repeating-linear-gradient(
       to right,
       currentColor 0,
-      currentColor 4px,
-      transparent 4px,
-      transparent 8px
+      currentColor var(--oh-decoration-underline-dash),
+      transparent var(--oh-decoration-underline-dash),
+      transparent var(--oh-decoration-underline-period)
     );
     transform-origin: right;
-    transition: transform var(--oh-motion-slow, 450ms) ease;
+    transition: transform var(--oh-motion-slow) ease;
   }
 
   a:hover::after,
@@ -149,7 +149,7 @@ export const typographyStyles = css `
   a:focus-visible,
   .oh-link:focus-visible {
     outline: none;
-    background-color: var(--oh-color-surface-hover, rgba(0,0,0,0.05));
+    background-color: var(--oh-color-surface-hover);
     border-radius: 2px;
     padding: 0 0.25rem;
     margin: 0 -0.25rem;
@@ -164,19 +164,19 @@ export const typographyStyles = css `
   /* Code */
   code,
   .oh-code {
-    font-family: var(--oh-font-family-mono);
-    font-size: var(--oh-font-size-sm);
+    font-family: var(--oh-typography-code-font-family);
+    font-size: var(--oh-typography-code-font-size);
     background-color: var(--oh-color-surface-inset);
     padding: 0.125em 0.375em;
-    border-radius: var(--oh-radius-xs);
+    border-radius: var(--oh-shape-tight);
   }
 
   pre {
-    font-family: var(--oh-font-family-mono);
-    font-size: var(--oh-font-size-sm);
+    font-family: var(--oh-typography-code-font-family);
+    font-size: var(--oh-typography-code-font-size);
     background-color: var(--oh-color-surface-inset);
     padding: var(--oh-spacing-4);
-    border-radius: var(--oh-radius-sm);
+    border-radius: var(--oh-shape-compact);
     overflow-x: auto;
     margin: 0 0 var(--oh-spacing-4);
   }
@@ -213,19 +213,19 @@ export const typographyStyles = css `
 
   /* Font weight utilities */
   .oh-font-normal {
-    font-weight: var(--oh-font-weight-normal);
+    font-weight: var(--oh-typography-body-base-font-weight);
   }
 
   .oh-font-medium {
-    font-weight: var(--oh-font-weight-medium);
+    font-weight: var(--oh-typography-label-base-font-weight);
   }
 
   .oh-font-semibold {
-    font-weight: var(--oh-font-weight-semibold);
+    font-weight: var(--oh-typography-control-font-weight);
   }
 
   .oh-font-bold {
-    font-weight: var(--oh-font-weight-bold);
+    font-weight: var(--oh-typography-heading-h1-font-weight);
   }
 `;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orange-halo/components",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "Web Components for Orange Halo Design System",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,6 +10,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./custom-elements.json": "./custom-elements.json",
     "./oh-accordion.js": {
       "types": "./dist/oh-accordion.d.ts",
       "import": "./dist/oh-accordion.js"
@@ -113,6 +114,10 @@
     "./oh-tabs.js": {
       "types": "./dist/oh-tabs.d.ts",
       "import": "./dist/oh-tabs.js"
+    },
+    "./oh-toggle.js": {
+      "types": "./dist/oh-toggle.d.ts",
+      "import": "./dist/oh-toggle.js"
     }
   },
   "files": [
@@ -124,14 +129,20 @@
     "lit": "^3.2.1"
   },
   "peerDependencies": {
-    "@orange-halo/tokens": "^1.0.0",
-    "@orange-halo/utils": "^1.0.0"
+    "@orange-halo/tokens": "^2.1.0",
+    "@orange-halo/utils": "^1.1.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@orange-halo/tokens": "2.1.0",
+    "@orange-halo/utils": "1.1.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && cem analyze",
+    "analyze": "cem analyze",
     "dev": "tsc --watch",
     "clean": "rm -rf dist",
     "lint": "eslint src/",