@antadesign/anta 0.1.1-dev.2 → 0.1.1-dev.5

package/dist/{anta_global_tokens.css → tokens.css}

@@ -1,9 +1,20 @@
+/* Anta declares its layer order so consumers don't have to.
+   `base` is below — typically used by resets like Tailwind's
+   preflight (`@layer base`) — so Anta's reset + element styles
+   beat resets but lose to a consumer's own `@layer components`
+   rules. `utilities` sits above everything so utility-class
+   frameworks like Tailwind (`@layer utilities`) can still
+   override single properties when needed. Consumers who load
+   their own layer-order declaration earlier in the cascade
+   override this one — first mention of each layer name wins. */
+@layer base, anta, components, utilities;
+
 :root, .light {
   --sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
 
   font-size: 15px;
-  font-weight: 390;
+  font-weight: 400;
   font-feature-settings: 'ss02' on, 'ss05' on;
 
   /* Colors imported from Figma library "Anta 0.2" → "Dynamic colors" collection.
@@ -54,7 +65,6 @@
   --text-3: #635b65; --text-3: oklch(0.482 0.019 319);
   --text-4: #878089; --text-4: oklch(0.609 0.016 319);
   --text-5: #9f99a1; --text-5: oklch(0.691 0.013 318);
-  --text-white: #ffffff; --text-white: oklch(1.000 0.000 90);
 
   /* Text — light, Brand */
   --text-1-brand: #2e1e7b; --text-1-brand: oklch(0.324 0.148 282);
@@ -92,46 +102,46 @@
   --text-5-info: #17508280; --text-5-info: oklch(0.422 0.101 249 / 0.50);
 
   /* Borders — light, neutral */
-  --border-1: #ece9ec; --border-1: oklch(0.937 0.005 326);
-  --border-2: #e0dce0; --border-2: oklch(0.899 0.007 326);
+  --border-1: #938d96; --border-1: oklch(0.651 0.015 315);
+  --border-2: #c1b9c1; --border-2: oklch(0.795 0.014 326);
   --border-3: #d4ced4; --border-3: oklch(0.858 0.010 326);
-  --border-4: #c1b9c1; --border-4: oklch(0.795 0.014 326);
-  --border-5: #938d96; --border-5: oklch(0.651 0.015 315);
+  --border-4: #e0dce0; --border-4: oklch(0.899 0.007 326);
+  --border-5: #ece9ec; --border-5: oklch(0.937 0.005 326);
 
   /* Borders — light, Brand */
-  --border-1-brand: #e9e5fa; --border-1-brand: oklch(0.931 0.028 295);
-  --border-2-brand: #ddd8f8; --border-2-brand: oklch(0.896 0.044 293);
+  --border-1-brand: #9081df; --border-1-brand: oklch(0.657 0.137 289);
+  --border-2-brand: #bcb1f1; --border-2-brand: oklch(0.792 0.090 292);
   --border-3-brand: #d2cbf6; --border-3-brand: oklch(0.862 0.060 293);
-  --border-4-brand: #bcb1f1; --border-4-brand: oklch(0.792 0.090 292);
-  --border-5-brand: #9081df; --border-5-brand: oklch(0.657 0.137 289);
+  --border-4-brand: #ddd8f8; --border-4-brand: oklch(0.896 0.044 293);
+  --border-5-brand: #e9e5fa; --border-5-brand: oklch(0.931 0.028 295);
 
   /* Borders — light, Success */
-  --border-1-success: #d9f2e0; --border-1-success: oklch(0.938 0.036 154);
-  --border-2-success: #c6ecd1; --border-2-success: oklch(0.909 0.054 154);
+  --border-1-success: #44c169; --border-1-success: oklch(0.721 0.167 150);
+  --border-2-success: #88d7a0; --border-2-success: oklch(0.813 0.110 153);
   --border-3-success: #b3e5c2; --border-3-success: oklch(0.878 0.071 154);
-  --border-4-success: #88d7a0; --border-4-success: oklch(0.813 0.110 153);
-  --border-5-success: #44c169; --border-5-success: oklch(0.721 0.167 150);
+  --border-4-success: #c6ecd1; --border-4-success: oklch(0.909 0.054 154);
+  --border-5-success: #d9f2e0; --border-5-success: oklch(0.938 0.036 154);
 
   /* Borders — light, Critical */
-  --border-1-critical: #fae5e5; --border-1-critical: oklch(0.939 0.023 18);
-  --border-2-critical: #f7d4d4; --border-2-critical: oklch(0.899 0.039 18);
+  --border-1-critical: #e56c6c; --border-1-critical: oklch(0.676 0.151 22);
+  --border-2-critical: #efa4a4; --border-2-critical: oklch(0.791 0.089 19);
   --border-3-critical: #f4c2c2; --border-3-critical: oklch(0.858 0.057 18);
-  --border-4-critical: #efa4a4; --border-4-critical: oklch(0.791 0.089 19);
-  --border-5-critical: #e56c6c; --border-5-critical: oklch(0.676 0.151 22);
+  --border-4-critical: #f7d4d4; --border-4-critical: oklch(0.899 0.039 18);
+  --border-5-critical: #fae5e5; --border-5-critical: oklch(0.939 0.023 18);
 
   /* Borders — light, Warning */
-  --border-1-warning: #f9e7cd; --border-1-warning: oklch(0.936 0.040 77);
-  --border-2-warning: #f6dbb1; --border-2-warning: oklch(0.903 0.062 79);
+  --border-1-warning: #d88118; --border-1-warning: oklch(0.682 0.149 63);
+  --border-2-warning: #edb25a; --border-2-warning: oklch(0.801 0.125 75);
   --border-3-warning: #f3cc91; --border-3-warning: oklch(0.865 0.087 78);
-  --border-4-warning: #edb25a; --border-4-warning: oklch(0.801 0.125 75);
-  --border-5-warning: #d88118; --border-5-warning: oklch(0.682 0.149 63);
+  --border-4-warning: #f6dbb1; --border-4-warning: oklch(0.903 0.062 79);
+  --border-5-warning: #f9e7cd; --border-5-warning: oklch(0.936 0.040 77);
 
   /* Borders — light, Info */
-  --border-1-info: #e1eefa; --border-1-info: oklch(0.943 0.021 246);
-  --border-2-info: #cfe3f7; --border-2-info: oklch(0.907 0.035 248);
+  --border-1-info: #56a1e1; --border-1-info: oklch(0.688 0.121 246);
+  --border-2-info: #93c5ec; --border-2-info: oklch(0.802 0.076 242);
   --border-3-info: #bad6f3; --border-3-info: oklch(0.865 0.050 249);
-  --border-4-info: #93c5ec; --border-4-info: oklch(0.802 0.076 242);
-  --border-5-info: #56a1e1; --border-5-info: oklch(0.688 0.121 246);
+  --border-4-info: #cfe3f7; --border-4-info: oklch(0.907 0.035 248);
+  --border-5-info: #e1eefa; --border-5-info: oklch(0.943 0.021 246);
 
   /* Prose link colors — used by <a-text> for priorities 1 & 2 and by
      consumers wiring their own prose contexts. */
@@ -139,66 +149,9 @@
   --link-color-hover: oklch(0.55 0.23 246.95);
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-}
-
-strong {
-  font-weight: 600;
-}
-
-/* Prose lists (ul, ol) get a tight 3ch left padding so markers hug the
-   text, and items get a small bottom margin so consecutive ones breathe.
-   Markers are toned all the way down to --text-5 since they are visual
-   scaffolding, not content. */
-ul, ol {
-  padding-left: 3ch;
-}
-:is(ul, ol) > li {
-  margin-bottom: 0.5em;
-}
-:is(ul, ol) > li::marker {
-  color: var(--text-5);
-}
-
-/* `<menu>` is for command/option lists, not prose. By default browsers
-   render it like a `<ul>` (disc markers, 40px padding); we strip all of
-   that so it's a clean semantic container ready to be styled. */
-menu {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-menu > li {
-  margin: 0;
-}
-
-/* Global link defaults. Hairline underline at 75% alpha; underline goes
-   to currentColor (100%) and 1px on hover. Color comes from --link-color
-   tokens, which auto-flip in dark mode. Components or specific contexts
-   (nav, headings, buttons) should override as needed. */
-a, a:link, a:visited {
-  color: var(--link-color);
-  text-decoration: underline;
-  text-decoration-style: solid;
-  text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
-  text-decoration-thickness: 0.5px;
-  text-underline-offset: 3px;
-}
-a:hover {
-  color: var(--link-color-hover);
-  /* Underline color set to the hover token directly (rather than
-     `currentColor`) so it repaints in lockstep with `color` — a few
-     browsers latch onto the old currentColor value otherwise. */
-  text-decoration-color: var(--link-color-hover);
-  text-decoration-thickness: 1px;
-}
-a:active {
-  text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
-}
 
 .dark {
-  font-weight: 350;
+  font-weight: 400;
 
   /* Backgrounds — dark, neutral */
   --bg-base: #100e11; --bg-base: oklch(0.168 0.007 315);
@@ -243,7 +196,6 @@ a:active {
   --text-3: #9f99a1; --text-3: oklch(0.691 0.013 318);
   --text-4: #776e77; --text-4: oklch(0.549 0.018 326);
   --text-5: #635b65; --text-5: oklch(0.482 0.019 319);
-  --text-white: #ffffff; --text-white: oklch(1.000 0.000 90);
 
   /* Text — dark, Brand */
   --text-1-brand: #c5baff; --text-1-brand: oklch(0.822 0.097 291);
@@ -255,23 +207,23 @@ a:active {
   /* Text — dark, Success */
   --text-1-success: #9ddeb1; --text-1-success: oklch(0.845 0.091 154);
   --text-2-success: #74cd8e; --text-2-success: oklch(0.776 0.125 152);
-  --text-3-success: #71d08ecc; --text-3-success: oklch(0.782 0.131 152 / 0.80);
-  --text-4-success: #71d08e99; --text-4-success: oklch(0.782 0.131 152 / 0.60);
-  --text-5-success: #71d08e66; --text-5-success: oklch(0.782 0.131 152 / 0.40);
+  --text-3-success: #74cd8ecc; --text-3-success: oklch(0.776 0.125 152 / 0.80);
+  --text-4-success: #74cd8e99; --text-4-success: oklch(0.776 0.125 152 / 0.60);
+  --text-5-success: #74cd8e66; --text-5-success: oklch(0.776 0.125 152 / 0.40);
 
   /* Text — dark, Critical */
   --text-1-critical: #ffabac; --text-1-critical: oklch(0.823 0.099 19);
   --text-2-critical: #e78e90; --text-2-critical: oklch(0.740 0.108 19);
-  --text-3-critical: #e49091cc; --text-3-critical: oklch(0.740 0.102 19 / 0.80);
-  --text-4-critical: #e4909199; --text-4-critical: oklch(0.740 0.102 19 / 0.60);
-  --text-5-critical: #e4909166; --text-5-critical: oklch(0.740 0.102 19 / 0.40);
+  --text-3-critical: #e78e90cc; --text-3-critical: oklch(0.740 0.108 19 / 0.80);
+  --text-4-critical: #e78e9099; --text-4-critical: oklch(0.740 0.108 19 / 0.60);
+  --text-5-critical: #e78e9066; --text-5-critical: oklch(0.740 0.108 19 / 0.40);
 
   /* Text — dark, Warning */
   --text-1-warning: #f0bf75; --text-1-warning: oklch(0.833 0.108 77);
   --text-2-warning: #e1a452; --text-2-warning: oklch(0.761 0.122 72);
-  --text-3-warning: #e9a135cc; --text-3-warning: oklch(0.762 0.145 73 / 0.80);
-  --text-4-warning: #e9a13599; --text-4-warning: oklch(0.762 0.145 73 / 0.60);
-  --text-5-warning: #e9a13566; --text-5-warning: oklch(0.762 0.145 73 / 0.40);
+  --text-3-warning: #e1a452cc; --text-3-warning: oklch(0.761 0.122 72 / 0.80);
+  --text-4-warning: #e1a45299; --text-4-warning: oklch(0.761 0.122 72 / 0.60);
+  --text-5-warning: #e1a45266; --text-5-warning: oklch(0.761 0.122 72 / 0.40);
 
   /* Text — dark, Info */
   --text-1-info: #9ed2ff; --text-1-info: oklch(0.844 0.083 245);
@@ -281,46 +233,46 @@ a:active {
   --text-5-info: #7db6e866; --text-5-info: oklch(0.756 0.094 246 / 0.40);
 
   /* Borders — dark, neutral */
-  --border-1: #272329; --border-1: oklch(0.263 0.012 315);
-  --border-2: #3e3941; --border-2: oklch(0.353 0.015 313);
+  --border-1: #776e77; --border-1: oklch(0.549 0.018 326);
+  --border-2: #534c57; --border-2: oklch(0.427 0.020 313);
   --border-3: #49424c; --border-3: oklch(0.390 0.019 316);
-  --border-4: #534c57; --border-4: oklch(0.427 0.020 313);
-  --border-5: #776e77; --border-5: oklch(0.549 0.018 326);
+  --border-4: #3e3941; --border-4: oklch(0.353 0.015 313);
+  --border-5: #272329; --border-5: oklch(0.263 0.012 315);
 
   /* Borders — dark, Brand */
-  --border-1-brand: #251f47; --border-1-brand: oklch(0.269 0.072 287);
-  --border-2-brand: #2d2556; --border-2-brand: oklch(0.302 0.085 288);
+  --border-1-brand: #7460d7; --border-1-brand: oklch(0.569 0.175 287);
+  --border-2-brand: #503cb4; --border-2-brand: oklch(0.453 0.181 284);
   --border-3-brand: #483493; --border-3-brand: oklch(0.405 0.149 287);
-  --border-4-brand: #503cb4; --border-4-brand: oklch(0.453 0.181 284);
-  --border-5-brand: #7460d7; --border-5-brand: oklch(0.569 0.175 287);
+  --border-4-brand: #2d2556; --border-4-brand: oklch(0.302 0.085 288);
+  --border-5-brand: #251f47; --border-5-brand: oklch(0.269 0.072 287);
 
   /* Borders — dark, Success */
-  --border-1-success: #0f321a; --border-1-success: oklch(0.284 0.060 151);
-  --border-2-success: #12391e; --border-2-success: oklch(0.309 0.065 151);
+  --border-1-success: #329550; --border-1-success: oklch(0.595 0.138 150);
+  --border-2-success: #226737; --border-2-success: oklch(0.458 0.103 150);
   --border-3-success: #1f5c31; --border-3-success: oklch(0.424 0.094 150);
-  --border-4-success: #226737; --border-4-success: oklch(0.458 0.103 150);
-  --border-5-success: #329550; --border-5-success: oklch(0.595 0.138 150);
+  --border-4-success: #12391e; --border-4-success: oklch(0.309 0.065 151);
+  --border-5-success: #0f321a; --border-5-success: oklch(0.284 0.060 151);
 
   /* Borders — dark, Critical */
-  --border-1-critical: #531314; --border-1-critical: oklch(0.298 0.095 24);
-  --border-2-critical: #5d1819; --border-2-critical: oklch(0.325 0.100 24);
+  --border-1-critical: #de4545; --border-1-critical: oklch(0.610 0.190 25);
+  --border-2-critical: #b02120; --border-2-critical: oklch(0.492 0.179 27);
   --border-3-critical: #a01c1c; --border-3-critical: oklch(0.458 0.167 27);
-  --border-4-critical: #b02120; --border-4-critical: oklch(0.492 0.179 27);
-  --border-5-critical: #de4545; --border-5-critical: oklch(0.610 0.190 25);
+  --border-4-critical: #5d1819; --border-4-critical: oklch(0.325 0.100 24);
+  --border-5-critical: #531314; --border-5-critical: oklch(0.298 0.095 24);
 
   /* Borders — dark, Warning */
-  --border-1-warning: #37200b; --border-1-warning: oklch(0.269 0.048 61);
-  --border-2-warning: #3e250e; --border-2-warning: oklch(0.291 0.052 61);
+  --border-1-warning: #ae6613; --border-1-warning: oklch(0.579 0.127 62);
+  --border-2-warning: #7f410b; --border-2-warning: oklch(0.445 0.105 54);
   --border-3-warning: #6a3b0c; --border-3-warning: oklch(0.403 0.087 60);
-  --border-4-warning: #7f410b; --border-4-warning: oklch(0.445 0.105 54);
-  --border-5-warning: #ae6613; --border-5-warning: oklch(0.579 0.127 62);
+  --border-4-warning: #3e250e; --border-4-warning: oklch(0.291 0.052 61);
+  --border-5-warning: #37200b; --border-5-warning: oklch(0.269 0.048 61);
 
   /* Borders — dark, Info */
-  --border-1-info: #0e2b44; --border-1-info: oklch(0.281 0.058 248);
-  --border-2-info: #12324f; --border-2-info: oklch(0.309 0.064 249);
+  --border-1-info: #2686d9; --border-1-info: oklch(0.608 0.152 250);
+  --border-2-info: #1a5b93; --border-2-info: oklch(0.461 0.111 249);
   --border-3-info: #175082; --border-3-info: oklch(0.422 0.101 249);
-  --border-4-info: #1a5b93; --border-4-info: oklch(0.461 0.111 249);
-  --border-5-info: #2686d9; --border-5-info: oklch(0.608 0.152 250);
+  --border-4-info: #12324f; --border-4-info: oklch(0.309 0.064 249);
+  --border-5-info: #0e2b44; --border-5-info: oklch(0.281 0.058 248);
 
   /* Prose link colors — dark mode */
   --link-color: oklch(0.72 0.15 248.65);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.1.1-dev.2",
+  "version": "0.1.1-dev.5",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,7 +26,8 @@
       "types": "./dist/elements/*.d.ts",
       "default": "./dist/elements/*.js"
     },
-    "./anta_global_tokens.css": "./dist/anta_global_tokens.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./reset.css": "./dist/reset.css",
     "./generate-icons.mjs": "./dist/generate-icons.mjs",
     "./*": {
       "types": "./dist/*.d.ts",
@@ -35,12 +36,14 @@
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css && pnpm run build:types",
-    "build:css": "cp src/elements/a-progress.css src/elements/a-text.css src/elements/a-icon.css src/elements/a-icon.shapes.css dist/elements/ && cp src/components/Progress.module.css src/components/Text.module.css dist/components/ && cp src/anta_global_tokens.css dist/ && cp scripts/generate-icons.mjs dist/",
+    "build:css": "cp src/elements/a-progress.css src/elements/a-text.css src/elements/a-icon.css src/elements/a-icon.shapes.css dist/elements/ && cp src/components/Progress.module.css src/components/Text.module.css dist/components/ && cp src/tokens.css src/reset.css dist/ && cp scripts/generate-icons.mjs dist/",
     "build:js": "esbuild src/components/Progress.tsx src/components/Text.tsx src/components/Icon.tsx src/index.ts src/jsx-runtime.ts src/general_types.ts src/anta_helpers.ts src/elements/index.ts src/elements/a-progress.ts src/elements/a-text.ts src/elements/a-icon.ts src/elements/a-icon.shapes.ts --outdir=dist --outbase=src --jsx=automatic --jsx-import-source=@antadesign/anta --format=esm --target=ES2022 --loader:.module.css=local-css --loader:.css=global-css",
     "build:types": "tsc -p src/tsconfig.json",
     "typecheck": "tsc --noEmit -p src/tsconfig.json",
     "icons": "node scripts/generate-icons.mjs --input src/elements/icons --output src/elements --name a-icon.shapes --internal",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "prepare": "pnpm run build",
+    "prepublishOnly": "pnpm run build"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",