@opensearch-project/oui 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/style.scoped.css

@@ -1,7 +1,7 @@
 /* OUI2 Library - Scoped CSS */
-/* Uses CSS @scope to limit reset styles from .oui2 to .oui2-end */
+/* Uses CSS @scope to limit reset styles from .oui2, body > [data-slot], body > [data-vaul-drawer], body > [data-radix-popper-content-wrapper] to .oui2-end */
 
-@scope (.oui2) to (.oui2-end) {
+@scope (.oui2, body > [data-slot], body > [data-vaul-drawer], body > [data-radix-popper-content-wrapper]) to (.oui2-end) {
   /* Include OUI1 reset unsets to prevent conflicts */
   /**
    * OUI1 Reset CSS Unset
@@ -11,7 +11,7 @@
    * In @layer theme so applied before shadcn reset css in @layer base
    */
   
-  @layer base {
+  @layer theme {
     /* Unset box-sizing reset */
     *, *:before, *:after {
       box-sizing: unset;
@@ -260,7 +260,7 @@
       display: none !important;
     }
   }
-  
+
   /* Apply HTML reset styles to .oui2 root container */
   @layer base {
     :scope {
@@ -271,7 +271,7 @@
         font-feature-settings: var(--oui-default-font-feature-settings, normal);
         font-variation-settings: var(--oui-default-font-variation-settings, normal);
         -webkit-tap-highlight-color: transparent;
-      font-size: 16px; /* to override OUI */
+      font-size: 14px; /* to override OUI 1 v9 theme */
     }
   }
 }
@@ -282,10 +282,6 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
-    --oui-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --oui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
     --oui-color-red-500: oklch(63.7% 0.237 25.331);
     --oui-color-red-600: oklch(57.7% 0.245 27.325);
     --oui-color-orange-100: oklch(95.4% 0.038 75.164);
@@ -293,10 +289,13 @@
     --oui-color-orange-800: oklch(47% 0.157 37.304);
     --oui-color-yellow-500: oklch(79.5% 0.184 86.047);
     --oui-color-yellow-600: oklch(68.1% 0.162 75.834);
+    --oui-color-green-50: oklch(98.2% 0.018 155.826);
     --oui-color-green-100: oklch(96.2% 0.044 156.743);
+    --oui-color-green-200: oklch(92.5% 0.084 155.995);
     --oui-color-green-500: oklch(72.3% 0.219 149.579);
     --oui-color-green-600: oklch(62.7% 0.194 149.214);
     --oui-color-green-800: oklch(44.8% 0.119 151.328);
+    --oui-color-green-900: oklch(39.3% 0.095 152.535);
     --oui-color-blue-100: oklch(93.2% 0.032 255.585);
     --oui-color-blue-500: oklch(62.3% 0.214 259.815);
     --oui-color-blue-600: oklch(54.6% 0.245 262.881);
@@ -358,8 +357,8 @@
     --oui-aspect-video: 16 / 9;
     --oui-default-transition-duration: 150ms;
     --oui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --oui-default-font-family: var(--oui-font-sans);
-    --oui-default-mono-font-family: var(--oui-font-mono);
+    --oui-default-font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segge UI Emoji', 'Segue UI Symbol';
+    --oui-default-mono-font-family: 'Source Code Pro', Consolas, Menlo, Courier, monospace;
   }
 }
 
@@ -1467,6 +1466,9 @@
   .oui\:border-destructive {
     border-color: var(--oui-destructive);
   }
+  .oui\:border-green-200 {
+    border-color: var(--oui-color-green-200);
+  }
   .oui\:border-green-500 {
     border-color: var(--oui-color-green-500);
   }
@@ -1530,12 +1532,21 @@
   .oui\:bg-destructive {
     background-color: var(--oui-destructive);
   }
+  .oui\:bg-destructive\/10 {
+    background-color: var(--oui-destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--oui-destructive) 10%, transparent);
+    }
+  }
   .oui\:bg-foreground {
     background-color: var(--oui-foreground);
   }
   .oui\:bg-gray-400 {
     background-color: var(--oui-color-gray-400);
   }
+  .oui\:bg-green-50 {
+    background-color: var(--oui-color-green-50);
+  }
   .oui\:bg-green-100 {
     background-color: var(--oui-color-green-100);
   }
@@ -1782,7 +1793,7 @@
     vertical-align: middle;
   }
   .oui\:font-mono {
-    font-family: var(--oui-font-mono);
+    font-family: 'Source Code Pro', Consolas, Menlo, Courier, monospace;
   }
   .oui\:text-2xl {
     font-size: var(--oui-text-2xl);
@@ -1909,6 +1920,9 @@
   .oui\:text-green-800 {
     color: var(--oui-color-green-800);
   }
+  .oui\:text-green-900 {
+    color: var(--oui-color-green-900);
+  }
   .oui\:text-muted-foreground {
     color: var(--oui-muted-foreground);
   }
@@ -2588,6 +2602,13 @@
       }
     }
   }
+  .oui\:hover\:bg-blue-600 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--oui-color-blue-600);
+      }
+    }
+  }
   .oui\:hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
@@ -4978,117 +4999,125 @@
 }
 :root {
   --oui-background: #fff;
-  --oui-foreground: oklch(12.9% 0.042 264.695);
+  --oui-foreground: oklch(14.5% 0 0);
   --oui-card: #fff;
-  --oui-card-foreground: oklch(12.9% 0.042 264.695);
+  --oui-card-foreground: oklch(14.5% 0 0);
   --oui-popover: #fff;
-  --oui-popover-foreground: oklch(12.9% 0.042 264.695);
-  --oui-primary: oklch(49.1% 0.27 292.581);
-  --oui-primary-foreground: oklch(98.4% 0.003 247.858);
-  --oui-secondary: oklch(94.6% 0.033 307.174);
+  --oui-popover-foreground: oklch(14.5% 0 0);
+  --oui-primary: oklch(50% 0.134 242.749);
+  --oui-primary-foreground: oklch(98.5% 0 0);
+  --oui-secondary: oklch(97% 0 0);
   --oui-secondary-foreground: oklch(20.5% 0 0);
-  --oui-muted: oklch(96.8% 0.007 247.896);
-  --oui-muted-foreground: oklch(55.4% 0.046 257.417);
-  --oui-accent: oklch(96.8% 0.007 247.896);
-  --oui-accent-foreground: oklch(20.8% 0.042 265.755);
+  --oui-muted: oklch(97% 0 0);
+  --oui-muted-foreground: oklch(55.6% 0 0);
+  --oui-accent: oklch(97% 0 0);
+  --oui-accent-foreground: oklch(20.5% 0 0);
   --oui-destructive: oklch(57.7% 0.245 27.325);
   --oui-destructive-foreground: oklch(97.1% 0.013 17.38);
-  --oui-border: oklch(92.9% 0.013 255.508);
-  --oui-input: oklch(92.9% 0.013 255.508);
-  --oui-ring: oklch(70.4% 0.04 256.788);
+  --oui-border: oklch(92.2% 0 0);
+  --oui-input: oklch(92.2% 0 0);
+  --oui-ring: oklch(50% 0.134 242.749);
   --oui-chart-1: oklch(64.6% 0.222 41.116);
   --oui-chart-2: oklch(60% 0.118 184.704);
   --oui-chart-3: oklch(39.8% 0.07 227.392);
   --oui-chart-4: oklch(82.8% 0.189 84.429);
   --oui-chart-5: oklch(76.9% 0.188 70.08);
   --oui-radius: 0.625rem;
-  --oui-sidebar: oklch(98.4% 0.003 247.858);
-  --oui-sidebar-foreground: oklch(12.9% 0.042 264.695);
-  --oui-sidebar-primary: oklch(20.8% 0.042 265.755);
-  --oui-sidebar-primary-foreground: oklch(98.4% 0.003 247.858);
-  --oui-sidebar-accent: oklch(96.8% 0.007 247.896);
-  --oui-sidebar-accent-foreground: oklch(20.8% 0.042 265.755);
-  --oui-sidebar-border: oklch(92.9% 0.013 255.508);
-  --oui-sidebar-ring: oklch(70.4% 0.04 256.788);
+  --oui-sidebar: oklch(98.5% 0 0);
+  --oui-sidebar-foreground: oklch(14.5% 0 0);
+  --oui-sidebar-primary: oklch(20.5% 0 0);
+  --oui-sidebar-primary-foreground: oklch(98.5% 0 0);
+  --oui-sidebar-accent: oklch(97% 0 0);
+  --oui-sidebar-accent-foreground: oklch(20.5% 0 0);
+  --oui-sidebar-border: oklch(92.2% 0 0);
+  --oui-sidebar-ring: oklch(70.8% 0 0);
   --oui-severity-low: oklch(82.8% 0.189 84.429);
   --oui-severity-med: oklch(66.6% 0.179 58.318);
   --oui-severity-high: oklch(55.3% 0.195 38.402);
   --oui-severity-critical: oklch(44.4% 0.177 26.899);
 }
 .dark {
-  --oui-background: oklch(12.9% 0.042 264.695);
-  --oui-foreground: oklch(98.4% 0.003 247.858);
-  --oui-card: oklch(20.8% 0.042 265.755);
-  --oui-card-foreground: oklch(98.4% 0.003 247.858);
-  --oui-popover: oklch(27.9% 0.041 260.031);
-  --oui-popover-foreground: oklch(98.4% 0.003 247.858);
-  --oui-primary: oklch(60.6% 0.25 292.717);
-  --oui-primary-foreground: oklch(98.4% 0.003 247.858);
-  --oui-secondary: oklch(43.2% 0.232 292.759);
-  --oui-secondary-foreground: oklch(98.4% 0.003 247.858);
-  --oui-muted: oklch(27.9% 0.041 260.031);
-  --oui-muted-foreground: oklch(70.4% 0.04 256.788);
-  --oui-accent: oklch(37.2% 0.044 257.287);
-  --oui-accent-foreground: oklch(98.4% 0.003 247.858);
+  --oui-background: oklch(14.5% 0 0);
+  --oui-foreground: oklch(98.5% 0 0);
+  --oui-card: oklch(20.5% 0 0);
+  --oui-card-foreground: oklch(98.5% 0 0);
+  --oui-popover: oklch(26.9% 0 0);
+  --oui-popover-foreground: oklch(98.5% 0 0);
+  --oui-primary: oklch(68.5% 0.169 237.323);
+  --oui-primary-foreground: oklch(98.5% 0 0);
+  --oui-secondary: oklch(44.3% 0.11 240.79);
+  --oui-secondary-foreground: oklch(98.5% 0 0);
+  --oui-muted: oklch(26.9% 0 0);
+  --oui-muted-foreground: oklch(70.8% 0 0);
+  --oui-accent: oklch(37.1% 0 0);
+  --oui-accent-foreground: oklch(98.5% 0 0);
   --oui-destructive: oklch(70.4% 0.191 22.216);
   --oui-destructive-foreground: oklch(97.1% 0.013 17.38);
   --oui-border: color-mix(in oklab, #fff 10%, transparent);
   --oui-input: color-mix(in oklab, #fff 15%, transparent);
-  --oui-ring: oklch(55.4% 0.046 257.417);
+  --oui-ring: oklch(68.5% 0.169 237.323);
   --oui-chart-1: oklch(48.8% 0.243 264.376);
   --oui-chart-2: oklch(69.6% 0.17 162.48);
   --oui-chart-3: oklch(76.9% 0.188 70.08);
   --oui-chart-4: oklch(62.7% 0.265 303.9);
   --oui-chart-5: oklch(64.5% 0.246 16.439);
-  --oui-sidebar: oklch(12.9% 0.042 264.695);
-  --oui-sidebar-foreground: oklch(98.4% 0.003 247.858);
+  --oui-sidebar: oklch(14.5% 0 0);
+  --oui-sidebar-foreground: oklch(98.5% 0 0);
   --oui-sidebar-primary: oklch(48.8% 0.243 264.376);
-  --oui-sidebar-primary-foreground: oklch(98.4% 0.003 247.858);
-  --oui-sidebar-accent: oklch(27.9% 0.041 260.031);
-  --oui-sidebar-accent-foreground: oklch(98.4% 0.003 247.858);
+  --oui-sidebar-primary-foreground: oklch(98.5% 0 0);
+  --oui-sidebar-accent: oklch(26.9% 0 0);
+  --oui-sidebar-accent-foreground: oklch(98.5% 0 0);
   --oui-sidebar-border: color-mix(in oklab, #fff 10%, transparent);
-  --oui-sidebar-ring: oklch(44.6% 0.043 257.281);
+  --oui-sidebar-ring: oklch(43.9% 0 0);
   --oui-severity-low: oklch(82.8% 0.189 84.429);
   --oui-severity-med: oklch(66.6% 0.179 58.318);
   --oui-severity-high: oklch(55.3% 0.195 38.402);
   --oui-severity-critical: oklch(44.4% 0.177 26.899);
 }
-@layer base {
-  * {
-    border-color: var(--oui-border);
-    outline-color: var(--oui-ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--oui-ring) 50%, transparent);
+@scope (.oui2, body > [data-slot], body > [data-vaul-drawer], body > [data-radix-popper-content-wrapper]) to (.oui2-end) {
+  @layer base {
+    * {
+      border-color: var(--oui-border);
+      outline-color: var(--oui-ring);
+      @supports (color: color-mix(in lab, red, red)) {
+        outline-color: color-mix(in oklab, var(--oui-ring) 50%, transparent);
+      }
+    }
+    body {
+      background-color: var(--oui-background);
+      color: var(--oui-foreground);
+    }
+    .oui2 {
+      color: var(--oui-foreground);
+    }
+    .oui2-body {
+      background-color: var(--oui-background);
     }
   }
-  body {
-    background-color: var(--oui-background);
-    color: var(--oui-foreground);
+  [data-sonner-toaster] [data-description], [data-sonner-toaster] .sonner-description, .sonner-description {
+    color: var(--oui-muted-foreground) !important;
+    opacity: 1 !important;
+  }
+  [data-sonner-toaster] [data-title], [data-sonner-toaster] .sonner-title, .sonner-title {
+    color: var(--oui-popover-foreground) !important;
+  }
+  [data-sonner-toaster] [data-toast] {
+    display: flex !important;
+    align-items: flex-start !important;
+    justify-content: space-between !important;
+    gap: 16px !important;
+  }
+  [data-sonner-toaster] [data-toast]>div:first-child {
+    flex: 1 !important;
+    min-width: 0 !important;
+  }
+  [data-sonner-toaster] [data-toast]>*:last-child {
+    flex-shrink: 0 !important;
+    align-self: center !important;
+  }
+  [data-sonner-toaster] button {
+    margin-left: auto !important;
   }
-}
-[data-sonner-toaster] [data-description], [data-sonner-toaster] .sonner-description, .sonner-description {
-  color: var(--oui-muted-foreground) !important;
-  opacity: 1 !important;
-}
-[data-sonner-toaster] [data-title], [data-sonner-toaster] .sonner-title, .sonner-title {
-  color: var(--oui-popover-foreground) !important;
-}
-[data-sonner-toaster] [data-toast] {
-  display: flex !important;
-  align-items: flex-start !important;
-  justify-content: space-between !important;
-  gap: 16px !important;
-}
-[data-sonner-toaster] [data-toast]>div:first-child {
-  flex: 1 !important;
-  min-width: 0 !important;
-}
-[data-sonner-toaster] [data-toast]>*:last-child {
-  flex-shrink: 0 !important;
-  align-self: center !important;
-}
-[data-sonner-toaster] button {
-  margin-left: auto !important;
 }
 @property --tw-translate-x {
   syntax: "*";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opensearch-project/oui",
   "description": "OpenSearch UI Component Library",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "license": "Apache-2.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -37,20 +37,17 @@
     "build-docs": "yarn run build:storybook",
     "clean": "rm -rf build node_modules dist lib docs",
     "fix:shadcn": "npx tsx scripts/fix-shadcn-components.ts",
-    "lint": "yarn run lint:ts && yarn run lint:ts:react16 && yarn run lint:es",
+    "lint": "yarn run lint:ts && yarn run lint:es",
     "lint:es": "eslint --cache \"{src,scripts}/**/*.{ts,tsx,js}\" --max-warnings 0",
     "lint:es:fix": "yarn run lint:es --fix",
     "lint:ts": "tsc --project tsconfig.typecheck.json --noEmit",
     "lint:ts:watch": "tsc --project tsconfig.typecheck.json --noEmit --watch",
-    "lint:ts:react16": "tsc --project tsconfig.react16.json --noEmit",
-    "lint:ts:react16:watch": "tsc --project tsconfig.react16.json --noEmit --watch",
     "prebuild": "mkdir -p dist",
     "prepublishOnly": "yarn run build",
     "start": "storybook dev -p 8030 --no-open",
-    "test": "yarn run test:react16 && yarn run test:react18 && yarn run test:eslint",
+    "test": "yarn run test:storybook && yarn run test:eslint",
     "test:eslint": "node scripts/eslint-plugin/require_license_header.test.js && node scripts/eslint-plugin/i18n.test.js && node scripts/eslint-plugin/rel.test.js && node scripts/eslint-plugin/forward_ref_display_name.test.js",
-    "test:react16": "REACT_VERSION=16 vitest --project=storybook --run",
-    "test:react18": "REACT_VERSION=18 vitest --project=storybook --run"
+    "test:storybook": "vitest --project=storybook --run"
   },
   "repository": {
     "type": "git",
@@ -130,8 +127,6 @@
     "@types/node": "^24.10.1",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "@types/react-16": "npm:@types/react@^16.14.0",
-    "@types/react-dom-16": "npm:@types/react-dom@^16.9.0",
     "@vitest/browser": "^3.0.0",
     "@vitest/coverage-v8": "^3.0.0",
     "@vitest/ui": "^3.0.0",
@@ -153,7 +148,7 @@
     "prettier": "^3.4.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "storybook": "^9.1.16",
+    "storybook": "^9.1.17",
     "tailwindcss": "^4.1.13",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.2",
@@ -163,8 +158,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "react": "^16.12 || ^17.0 || ^18.0 || ^19.0",
-    "react-dom": "^16.12 || ^17.0 || ^18.0 || ^19.0"
+    "react": "^16.14 || ^17.0 || ^18.0 || ^19.0",
+    "react-dom": "^16.14 || ^17.0 || ^18.0 || ^19.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {