@ivds/core 0.1.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ivds/core",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "Core styles for the Ivoire Design System",
   "main": "lib/base.css",
   "style": "lib/all.css",
@@ -75,6 +75,18 @@
       "style": "./lib/icons/*.css",
       "default": "./lib/icons/*.css"
     },
+    "./gov": {
+      "style": "./lib/gov/gov.css",
+      "default": "./lib/gov/gov.css"
+    },
+    "./gov.min": {
+      "style": "./lib/gov/gov.min.css",
+      "default": "./lib/gov/gov.min.css"
+    },
+    "./gov/*": {
+      "style": "./lib/gov/*.css",
+      "default": "./lib/gov/*.css"
+    },
     "./variables": {
       "style": "./lib/variables/variables.css",
       "default": "./lib/variables/variables.css"
@@ -86,11 +98,15 @@
     "./src/*": "./src/*"
   },
   "scripts": {
-    "build": "rimraf lib/ && yarn lint:styles && yarn postcss-build && yarn copy-scss-files && yarn copy-scss-utils",
+    "generate-icons": "node scripts/generateIcons.js",
+    "build": "rimraf lib/ && yarn generate-icons && yarn lint:styles && yarn postcss-build && yarn css-to-ts && yarn copy-scss-files && yarn copy-scss-utils && yarn cssToScss",
     "build:prod": "NODE_ENV=production SASS_SILENCE_DEPRECATIONS=legacy-js-api,import yarn build",
-    "postcss-build": "node scripts/build.js",
-    "copy-scss-files": "node scripts/copyFiles.js -source 'src/components/**/_*.scss' -target 'lib/components' -v",
-    "copy-scss-utils": "node scripts/copyFiles.js -source 'src/utils/**/_*.scss' -target 'lib/utils' -v",
+    "postcss-build": "postcss 'src/**/[!_]*.(css|scss)' --base src -d lib --ext .css && postcss 'src/**/[!_]*.(css|scss)' --base src -d lib --ext 'min.css' --env 'minify'",
+    "postcss-watch": "postcss 'src/**/*.(css|scss)' --base src -d lib --watch",
+    "cssToScss": "node scripts/cssToScss.js",
+    "copy-scss-files": "node copyFiles -source 'src/components/**/_*.scss' -target 'lib/components' -v",
+    "copy-scss-utils": "node copyFiles -source 'src/utils/**/_*.scss' -target 'lib/utils' -v",
+    "css-to-ts": "node cssToImportableString -directory 'lib/components/**/*.min.css' -targetFiles 'modal.min.css,notification.min.css'",
     "lint": "yarn lint:styles",
     "lint:styles": "stylelint \"src/**/*.(css|scss)\" --ignore-pattern \"src/**/__tests__/*.scss\"",
     "lint:fix": "stylelint \"src/**/*.(css|scss)\" --ignore-pattern \"src/**/__tests__/*.scss\" --fix",
@@ -99,26 +115,42 @@
     "test:coverage": "jest --coverage",
     "clean": "rimraf lib/ coverage/ storybook-static/",
     "prepublishOnly": "yarn clean && yarn build:prod && yarn test",
+    "start": "yarn storybook",
+    "scss-tests": "yarn jest",
     "storybook": "storybook dev -p 6007 --quiet",
     "build-storybook": "storybook build --loglevel error",
     "size": "bundlesize"
   },
   "peerDependencies": {
-    "@ivds/design-tokens": "^0.1.1"
+    "@ivds/design-tokens": "^1.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
     "@csstools/postcss-sass": "^5.1.1",
     "@storybook/addon-a11y": "^7.6.0",
+    "@storybook/addon-backgrounds": "^7.6.0",
+    "@storybook/addon-docs": "^7.6.0",
     "@storybook/addon-essentials": "^7.6.0",
     "@storybook/addon-measure": "^7.6.0",
     "@storybook/addon-outline": "^7.6.0",
+    "@storybook/addon-storysource": "^7.6.0",
+    "@storybook/addon-viewport": "^7.6.0",
+    "@storybook/addons": "^7.6.0",
+    "@storybook/builder-webpack5": "^7.6.0",
     "@storybook/html": "^7.6.0",
-    "@storybook/html-vite": "^7.6.0",
+    "@storybook/html-webpack5": "^7.6.0",
+    "@storybook/preset-scss": "^1.0.3",
+    "autoprefixer": "^10.4.20",
+    "babel-jest": "^29.7.0",
     "bundlesize": "^0.18.1",
+    "copyfiles": "^2.4.1",
+    "css-loader": "^6.11.0",
     "cssnano": "^6.0.0",
     "glob": "^10.3.0",
     "jest": "^29.7.0",
     "postcss": "^8.4.0",
+    "postcss-classes-to-mixins": "^3.0.1",
     "postcss-cli": "^10.0.0",
     "postcss-import": "^15.1.0",
     "postcss-inline-svg": "^6.0.0",
@@ -127,12 +159,16 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rimraf": "^5.0.0",
-    "sass": "^1.69.0",
+    "sass": "^1.77.8",
+    "sass-loader": "^14.2.1",
     "sass-true": "^8.0.0",
     "storybook": "^7.6.0",
+    "style-loader": "^3.3.4",
     "stylelint": "^15.1.0",
+    "stylelint-config-css-modules": "^4.4.0",
+    "stylelint-config-standard": "^30.0.1",
     "stylelint-config-standard-scss": "^7.0.1",
-    "vite": "^7.1.12"
+    "stylelint-order": "^6.0.4"
   },
   "keywords": [
     "design-system",
@@ -147,15 +183,15 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/babiverse/ivoire-design-system.git",
+    "url": "https://github.com/yobright/ivoire-design-system.git",
     "directory": "packages/ivds-core"
   },
   "bugs": {
-    "url": "https://github.com/babiverse/ivoire-design-system/issues"
+    "url": "https://github.com/yobright/ivoire-design-system/issues"
   },
-  "homepage": "https://babiverse.github.io/ivoire-design-system",
+  "homepage": "https://yobright.github.io/ivoire-design-system",
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=22.13.1"
   },
   "publishConfig": {
     "access": "public",
@@ -163,24 +199,16 @@
   },
   "funding": {
     "type": "github",
-    "url": "https://github.com/sponsors/babiverse"
+    "url": "https://github.com/sponsors/yobright"
   },
   "bundlesize": [
     {
       "path": "./lib/all.css",
-      "maxSize": "50 kB"
+      "maxSize": "80 kB"
     },
     {
       "path": "./lib/all.min.css",
-      "maxSize": "25 kB"
-    },
-    {
-      "path": "./lib/utils-only.css",
-      "maxSize": "15 kB"
-    },
-    {
-      "path": "./lib/utils-only.min.css",
-      "maxSize": "8 kB"
+      "maxSize": "55 kB"
     },
     {
       "path": "./lib/components/all.css",
@@ -191,4 +219,4 @@
       "maxSize": "18 kB"
     }
   ]
-}
+}

package/src/base/_focus.scss

@@ -0,0 +1,31 @@
+// Unified focus ring mixin
+// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).
+// Inspired by Helsinki Design System: 3px solid outline with 2px offset.
+
+@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {
+  &:focus-visible {
+    outline: #{$width} solid #{$color};
+    outline-offset: #{$offset};
+    box-shadow: none;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+// Variant for components where the focus indicator is on a sibling element
+// (e.g., checkbox input:focus-visible + .checkbox__box)
+@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {
+  &:focus-visible + #{$selector} {
+    outline: #{$width} solid #{$color};
+    outline-offset: #{$offset};
+    box-shadow: none;
+  }
+
+  &:focus:not(:focus-visible) + #{$selector} {
+    outline: none;
+    box-shadow: none;
+  }
+}

package/src/base/_layout.scss

@@ -1,97 +1,82 @@
-// Base layout styles for IVDS Core
-// Provides foundational layout utilities and container styles
-
-@use '../variables/variables' as vars;
-
-// Global layout defaults
-html {
-  height: 100%;
-}
-
-body {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-// Main content area
-main {
-  flex: 1;
-}
-
-// Container system
-.ivds-container {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: vars.$spacing-4;
-  padding-right: vars.$spacing-4;
-  
-  // Size variations based on design token breakpoints
-  &--xs { 
-    max-width: calc(#{vars.$breakpoint-xs} - #{vars.$spacing-8}); 
-  }
-  
-  &--sm { 
-    max-width: calc(#{vars.$breakpoint-sm} - #{vars.$spacing-8}); 
-  }
-  
-  &--md { 
-    max-width: calc(#{vars.$breakpoint-md} - #{vars.$spacing-8}); 
-  }
-  
-  &--lg { 
-    max-width: calc(#{vars.$breakpoint-lg} - #{vars.$spacing-8}); 
-  }
-  
-  &--xl { 
-    max-width: calc(#{vars.$breakpoint-xl} - #{vars.$spacing-8}); 
-  }
-  
-  // Responsive padding
-  @media (min-width: #{vars.$breakpoint-sm}) {
-    padding-left: vars.$spacing-6;
-    padding-right: vars.$spacing-6;
-  }
-  
-  @media (min-width: #{vars.$breakpoint-lg}) {
-    padding-left: vars.$spacing-8;
-    padding-right: vars.$spacing-8;
-  }
-}
-
-// Layout utility classes
-.ivds-layout {
-  width: 100%;
-  min-height: 100vh;
-  
-  &--flex {
-    display: flex;
-  }
-  
-  &--grid {
-    display: grid;
-  }
-  
-  &--centered {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-// Section spacing
-.ivds-section {
-  padding-top: vars.$spacing-12;
-  padding-bottom: vars.$spacing-12;
-  
-  @media (min-width: #{vars.$breakpoint-md}) {
-    padding-top: vars.$spacing-16;
-    padding-bottom: vars.$spacing-16;
-  }
-  
-  @media (min-width: #{vars.$breakpoint-lg}) {
-    padding-top: vars.$spacing-20;
-    padding-bottom: vars.$spacing-20;
-  }
-}
+// Base layout styles for IVDS Core
+
+@use '../variables/variables' as vars;
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: 1;
+}
+
+.ivds-container {
+  width: 100%;
+  max-width: var(--container-max-width, 1200px);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: clamp(var(--spacing-4, 1rem), 3vw, var(--spacing-8, 2rem));
+  padding-right: clamp(var(--spacing-4, 1rem), 3vw, var(--spacing-8, 2rem));
+
+  &--xs {
+    max-width: 540px;
+  }
+
+  &--sm {
+    max-width: 720px;
+  }
+
+  &--md {
+    max-width: 920px;
+  }
+
+  &--lg {
+    max-width: 1160px;
+  }
+
+  &--xl {
+    max-width: 1320px;
+  }
+}
+
+.ivds-layout {
+  width: 100%;
+  min-height: 100vh;
+
+  &--flex {
+    display: flex;
+  }
+
+  &--grid {
+    display: grid;
+  }
+
+  &--centered {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.ivds-section {
+  padding-top: clamp(var(--spacing-10, 2.5rem), 6vw, var(--spacing-16, 4rem));
+  padding-bottom: clamp(var(--spacing-10, 2.5rem), 6vw, var(--spacing-16, 4rem));
+}
+
+.ivds-stack {
+  display: grid;
+  gap: var(--spacing-6, 1.5rem);
+}
+
+.ivds-grid-shell {
+  display: grid;
+  gap: var(--spacing-6, 1.5rem);
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}

package/src/base/_theme.scss

@@ -0,0 +1,139 @@
+// Global IVDS theme contract
+// Civic modern direction inspired by institutional systems:
+// high contrast, strong typography, clear state feedback.
+
+:root {
+  color-scheme: light;
+
+  // Typography aliases for existing components
+  --fontFamily-primary: var(--typography-fontFamilies-primary, 'Inter', 'Noto Sans', sans-serif);
+  --fontFamily-secondary: var(--typography-fontFamilies-secondary, 'IBM Plex Sans', 'Inter', sans-serif);
+  --fontFamily-display: var(--typography-fontFamilies-display, 'IBM Plex Sans', 'Inter', sans-serif);
+
+  // Brand colors are defined by @ivds/design-tokens (all.css).
+  // No re-declaration here — tokens provide the full brand palette:
+  //   --color-brand-primary-{50..950}   (burnt orange)
+  //   --color-brand-secondary-{50..950} (green)
+  //   --color-brand-accent-{50..950}    (blue)
+
+  // Neutral aliases
+  --color-semantic-neutral-50: var(--color-ui-neutral-50, #f7f8fa);
+  --color-semantic-neutral-100: var(--color-ui-neutral-100, #f1f3f5);
+  --color-semantic-neutral-200: var(--color-ui-neutral-200, #e2e7ec);
+  --color-semantic-neutral-300: var(--color-ui-neutral-300, #cfd6dd);
+  --color-semantic-neutral-400: var(--color-ui-neutral-400, #a1adba);
+  --color-semantic-neutral-500: var(--color-ui-neutral-500, #6b7785);
+  --color-semantic-neutral-600: var(--color-ui-neutral-600, #4d5968);
+  --color-semantic-neutral-700: var(--color-ui-neutral-700, #36414f);
+  --color-semantic-neutral-800: var(--color-ui-neutral-800, #202a36);
+  --color-semantic-neutral-900: var(--color-ui-neutral-900, #121a24);
+
+  // Feedback aliases
+  --color-semantic-success-50: var(--color-ui-success-50, #edf9f4);
+  --color-semantic-success-500: var(--color-ui-success-500, #19895d);
+  --color-semantic-success-600: var(--color-ui-success-600, #0f6f4a);
+  --color-semantic-success-700: var(--color-ui-success-700, #0a573a);
+  --color-semantic-warning-50: var(--color-ui-warning-50, #fff8eb);
+  --color-semantic-warning-500: var(--color-ui-warning-500, #ce790b);
+  --color-semantic-warning-600: var(--color-ui-warning-600, #a76009);
+  --color-semantic-warning-700: var(--color-ui-warning-700, #834b08);
+  --color-semantic-error-50: var(--color-ui-error-50, #fff1f2);
+  --color-semantic-error-500: var(--color-ui-error-500, #d73a50);
+  --color-semantic-error-600: var(--color-ui-error-600, #b72a41);
+  --color-semantic-error-700: var(--color-ui-error-700, #922036);
+  --color-semantic-info-50: var(--color-ui-info-50, #edf4ff);
+  --color-semantic-info-500: var(--color-ui-info-500, #1f6fe5);
+  --color-semantic-info-600: var(--color-ui-info-600, #0050c8);
+  --color-semantic-info-700: var(--color-ui-info-700, #003d99);
+
+  // Surface + text system
+  --ivds-surface-page: var(--color-semantic-neutral-50);
+  --ivds-surface-base: #fff;
+  --ivds-surface-muted: var(--color-semantic-neutral-100);
+  --ivds-surface-strong: var(--color-semantic-neutral-900);
+  --ivds-border-subtle: var(--color-semantic-neutral-200);
+  --ivds-border-strong: var(--color-semantic-neutral-400);
+  --ivds-border-brand: var(--color-brand-accent-600);
+  --ivds-text-primary: var(--color-semantic-neutral-900);
+  --ivds-text-secondary: var(--color-semantic-neutral-800);
+  --ivds-text-muted: var(--color-semantic-neutral-600);
+  --ivds-text-on-strong: #fff;
+
+  // Interactive aliases
+  --ivds-interactive-primary-bg: var(--color-brand-accent-600);
+  --ivds-interactive-primary-bg-hover: var(--color-brand-accent-700);
+  --ivds-interactive-primary-bg-active: var(--color-brand-accent-800);
+  --ivds-interactive-primary-text: #fff;
+  --ivds-interactive-secondary-bg: #fff;
+  --ivds-interactive-secondary-bg-hover: var(--color-brand-accent-50);
+  --ivds-interactive-secondary-border: var(--color-brand-accent-600);
+  --ivds-interactive-secondary-text: var(--color-brand-accent-700);
+  --ivds-interactive-supplementary-bg: var(--color-semantic-neutral-100);
+  --ivds-interactive-supplementary-bg-hover: var(--color-semantic-neutral-200);
+  --ivds-interactive-supplementary-text: var(--color-brand-accent-700);
+
+  // Radius + shadow aliases
+  --ivds-radius-xs: var(--borderRadius-xs, 0);
+  --ivds-radius-s: var(--borderRadius-sm, 0.125rem);
+  --ivds-radius-m: var(--borderRadius-md, 0.25rem);
+  --ivds-radius-l: var(--borderRadius-lg, 0.375rem);
+  --ivds-shadow-sm: var(--shadow-xs, 0 1px 0 rgba(7, 11, 16, 0.10));
+  --ivds-shadow-md: var(--shadow-sm, 0 1px 2px rgba(7, 11, 16, 0.12));
+  --ivds-shadow-lg: var(--shadow-md, 0 4px 10px rgba(7, 11, 16, 0.14));
+
+  // Layout defaults
+  --container-max-width: 1240px;
+
+  // Focus treatment — outline-based (no box-shadow conflict with elevated components)
+  --ivds-focus-ring-color: var(--color-brand-accent-600, #1058b8);
+  --ivds-focus-ring-width: 3px;
+  --ivds-focus-ring-offset: 2px;
+  --ivds-focus-ring: 0 0 0 3px rgba(0, 80, 200, 0.30); // legacy alias
+
+  // Motion
+  --ivds-motion-fast: var(--animation-duration-fast, 150ms);
+  --ivds-motion-normal: var(--animation-duration-normal, 250ms);
+  --ivds-motion-ease: var(--animation-easing-easeOut, cubic-bezier(0, 0, 0.2, 1));
+}
+
+[data-ivds-theme='dark'] {
+  color-scheme: dark;
+
+  --ivds-surface-page: #0f1620;
+  --ivds-surface-base: #141e2a;
+  --ivds-surface-muted: #1c2734;
+  --ivds-surface-strong: #070b10;
+  --ivds-border-subtle: #283443;
+  --ivds-border-strong: #415065;
+  --ivds-text-primary: #f6f8fb;
+  --ivds-text-secondary: #dde3ea;
+  --ivds-text-muted: #b7c2ce;
+  --ivds-text-on-strong: #fff;
+  --ivds-interactive-primary-bg: var(--color-brand-accent-500);
+  --ivds-interactive-primary-bg-hover: var(--color-brand-accent-600);
+  --ivds-interactive-primary-bg-active: var(--color-brand-accent-700);
+  --ivds-interactive-secondary-bg: transparent;
+  --ivds-interactive-secondary-bg-hover: rgba(147, 188, 255, 0.15);
+  --ivds-interactive-secondary-border: var(--color-brand-accent-400);
+  --ivds-interactive-secondary-text: var(--color-brand-accent-300);
+  --ivds-interactive-supplementary-bg: rgba(255, 255, 255, 0.08);
+  --ivds-interactive-supplementary-bg-hover: rgba(255, 255, 255, 0.14);
+  --ivds-interactive-supplementary-text: #e7eefb;
+  --ivds-focus-ring-color: var(--color-brand-accent-400, #5a93f5);
+}
+
+.ivds-theme-surface {
+  background-color: var(--ivds-surface-base);
+  border: 1px solid var(--ivds-border-subtle);
+  border-radius: var(--ivds-radius-m);
+  box-shadow: var(--ivds-shadow-sm);
+}
+
+.ivds-theme-eyebrow {
+  display: inline-block;
+  color: var(--color-brand-accent-700, #0b4593);
+  font-size: var(--fontSize-xs, 0.75rem);
+  font-weight: var(--fontWeight-semibold, 600);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}