@whitekiwi/tokens 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 WhiteKiwi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# @whitekiwi/tokens
+
+PIP's light/dark semantic design tokens: color, spacing, type, radius, motion,
+breakpoints, and interaction state contracts.
+
+## Use
+
+After the first public release:
+
+```sh
+npm install @whitekiwi/tokens
+```
+
+Import the CSS once at your application's global entry point:
+
+```css
+@import "@whitekiwi/tokens/theme.css";
+
+.example {
+  color: var(--kiwi-color-text);
+  background: var(--kiwi-color-canvas);
+  padding: var(--kiwi-space-4);
+}
+```
+
+Set `data-theme="dark"` on the document root to opt into the dark theme. Components
+should consume semantic roles rather than primitive palette values.
+
+This is a CSS-only package. Its public export is `@whitekiwi/tokens/theme.css`;
+there is no JavaScript default export and no Tailwind runtime dependency.
+
+[Documentation](https://design.whitekiwi.link/) ·
+[Source and release guide](https://github.com/WhiteKiwi/kiwi-design-system)
+
+## License
+
+[MIT](LICENSE), copyright WhiteKiwi. Third-party dependencies retain their own
+licenses. This license does not imply that a public npm release has occurred.

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@whitekiwi/tokens",
+  "version": "0.1.0",
+  "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./theme.css": "./src/theme.css"
+  },
+  "files": [
+    "src/theme.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "description": "PIP semantic design tokens for WhiteKiwi interfaces",
+  "license": "MIT",
+  "homepage": "https://design.whitekiwi.link/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WhiteKiwi/kiwi-design-system.git",
+    "directory": "packages/tokens"
+  },
+  "bugs": {
+    "url": "https://github.com/WhiteKiwi/kiwi-design-system/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/theme.css

@@ -0,0 +1,199 @@
+:root {
+  color-scheme: light;
+
+  /* Primitive palette */
+  --kiwi-paper: #f4f5ef;
+  --kiwi-milk: #fbfcf8;
+  --kiwi-ink: #11140f;
+  --kiwi-ash: #62685e;
+  --kiwi-carbon: #0e100e;
+  --kiwi-carbon-raised: #181a18;
+  --kiwi-fog: #a5ab9f;
+  --kiwi-chalk: #f1f4eb;
+  --kiwi-signal: #c6ff4a;
+  --kiwi-soft: #e9f8c9;
+  --kiwi-line: #668b15;
+  --kiwi-deep: #3c6000;
+  --kiwi-error: #b42318;
+  --kiwi-success: #16794f;
+  --kiwi-warning: #7a5300;
+  --kiwi-info: #1769aa;
+
+  /* Semantic color roles */
+  --kiwi-color-canvas: var(--kiwi-paper);
+  --kiwi-color-surface: var(--kiwi-milk);
+  --kiwi-color-surface-raised: #ffffff;
+  --kiwi-color-text: var(--kiwi-ink);
+  --kiwi-color-text-muted: var(--kiwi-ash);
+  --kiwi-color-border: color-mix(in srgb, var(--kiwi-ink) 12%, transparent);
+  --kiwi-color-control-border: var(--kiwi-ash);
+  --kiwi-color-border-soft: color-mix(in srgb, var(--kiwi-ink) 7%, transparent);
+  --kiwi-color-brand-field: var(--kiwi-signal);
+  --kiwi-color-brand-field-hover: #b7ef3f;
+  --kiwi-color-brand-field-active: #a8dd35;
+  --kiwi-color-brand-soft: var(--kiwi-soft);
+  --kiwi-color-on-brand: var(--kiwi-ink);
+  --kiwi-color-interactive: var(--kiwi-deep);
+  --kiwi-color-interactive-hover: #2f4d00;
+  --kiwi-color-interactive-active: #223900;
+  --kiwi-color-control-hover: #e2f2bf;
+  --kiwi-color-control-active: #d7eaaa;
+  --kiwi-color-focus: var(--kiwi-line);
+  --kiwi-color-disabled-surface: color-mix(
+    in srgb,
+    var(--kiwi-ink) 6%,
+    transparent
+  );
+  --kiwi-color-disabled-text: color-mix(
+    in srgb,
+    var(--kiwi-ink) 42%,
+    transparent
+  );
+  --kiwi-color-error: var(--kiwi-error);
+  --kiwi-color-error-hover: #9a1e16;
+  --kiwi-color-error-active: #811912;
+  --kiwi-color-error-soft: #fbe9e7;
+  --kiwi-color-success: var(--kiwi-success);
+  --kiwi-color-success-soft: #e5f5ed;
+  --kiwi-color-warning: var(--kiwi-warning);
+  --kiwi-color-warning-soft: #fff2cc;
+  --kiwi-color-info: var(--kiwi-info);
+  --kiwi-color-info-soft: #e8f2fb;
+
+  /* Layout and material */
+  --kiwi-space-1: 0.25rem;
+  --kiwi-space-2: 0.5rem;
+  --kiwi-space-3: 0.75rem;
+  --kiwi-space-4: 1rem;
+  --kiwi-space-6: 1.5rem;
+  --kiwi-space-8: 2rem;
+  --kiwi-space-12: 3rem;
+  --kiwi-space-16: 4rem;
+  --kiwi-gutter: clamp(1.2rem, 3vw, 3rem);
+  --kiwi-radius-none: 0;
+  --kiwi-radius-sm: 0.25rem;
+  --kiwi-radius-md: 0.5rem;
+  --kiwi-motion-fast: 150ms;
+  --kiwi-motion-base: 220ms;
+  --kiwi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --kiwi-font-sans: "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
+  --kiwi-font-mono: "SFMono-Regular", Consolas, monospace;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --kiwi-color-canvas: var(--kiwi-carbon);
+  --kiwi-color-surface: var(--kiwi-carbon-raised);
+  --kiwi-color-surface-raised: #202320;
+  --kiwi-color-text: var(--kiwi-chalk);
+  --kiwi-color-text-muted: var(--kiwi-fog);
+  --kiwi-color-control-border: var(--kiwi-fog);
+  --kiwi-color-border: color-mix(in srgb, var(--kiwi-chalk) 14%, transparent);
+  --kiwi-color-border-soft: color-mix(
+    in srgb,
+    var(--kiwi-chalk) 8%,
+    transparent
+  );
+  --kiwi-color-brand-field-hover: #d2ff72;
+  --kiwi-color-brand-field-active: #b7ef3f;
+  --kiwi-color-brand-soft: color-mix(
+    in srgb,
+    var(--kiwi-signal) 12%,
+    var(--kiwi-carbon)
+  );
+  --kiwi-color-interactive: var(--kiwi-signal);
+  --kiwi-color-interactive-hover: #d8ff84;
+  --kiwi-color-interactive-active: #b7ef3f;
+  --kiwi-color-control-hover: #29321e;
+  --kiwi-color-control-active: #344325;
+  --kiwi-color-disabled-surface: color-mix(
+    in srgb,
+    var(--kiwi-chalk) 8%,
+    transparent
+  );
+  --kiwi-color-disabled-text: color-mix(
+    in srgb,
+    var(--kiwi-chalk) 42%,
+    transparent
+  );
+  --kiwi-color-error: #ff8585;
+  --kiwi-color-error-hover: #ff9a9a;
+  --kiwi-color-error-active: #e56f6f;
+  --kiwi-color-error-soft: #321817;
+  --kiwi-color-success: #62d49a;
+  --kiwi-color-success-soft: #10281f;
+  --kiwi-color-warning: #f2c14e;
+  --kiwi-color-warning-soft: #2d2410;
+  --kiwi-color-info: #73b7ff;
+  --kiwi-color-info-soft: #10243a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --kiwi-color-canvas: var(--kiwi-carbon);
+    --kiwi-color-surface: var(--kiwi-carbon-raised);
+    --kiwi-color-surface-raised: #202320;
+    --kiwi-color-text: var(--kiwi-chalk);
+    --kiwi-color-text-muted: var(--kiwi-fog);
+    --kiwi-color-control-border: var(--kiwi-fog);
+    --kiwi-color-border: color-mix(in srgb, var(--kiwi-chalk) 14%, transparent);
+    --kiwi-color-border-soft: color-mix(
+      in srgb,
+      var(--kiwi-chalk) 8%,
+      transparent
+    );
+    --kiwi-color-brand-field-hover: #d2ff72;
+    --kiwi-color-brand-field-active: #b7ef3f;
+    --kiwi-color-brand-soft: color-mix(
+      in srgb,
+      var(--kiwi-signal) 12%,
+      var(--kiwi-carbon)
+    );
+    --kiwi-color-interactive: var(--kiwi-signal);
+    --kiwi-color-interactive-hover: #d8ff84;
+    --kiwi-color-interactive-active: #b7ef3f;
+    --kiwi-color-control-hover: #29321e;
+    --kiwi-color-control-active: #344325;
+    --kiwi-color-disabled-surface: color-mix(
+      in srgb,
+      var(--kiwi-chalk) 8%,
+      transparent
+    );
+    --kiwi-color-disabled-text: color-mix(
+      in srgb,
+      var(--kiwi-chalk) 42%,
+      transparent
+    );
+    --kiwi-color-error: #ff8585;
+    --kiwi-color-error-hover: #ff9a9a;
+    --kiwi-color-error-active: #e56f6f;
+    --kiwi-color-error-soft: #321817;
+    --kiwi-color-success: #62d49a;
+    --kiwi-color-success-soft: #10281f;
+    --kiwi-color-warning: #f2c14e;
+    --kiwi-color-warning-soft: #2d2410;
+    --kiwi-color-info: #73b7ff;
+    --kiwi-color-info-soft: #10243a;
+  }
+}
+
+@theme inline {
+  --color-canvas: var(--kiwi-color-canvas);
+  --color-surface: var(--kiwi-color-surface);
+  --color-surface-raised: var(--kiwi-color-surface-raised);
+  --color-foreground: var(--kiwi-color-text);
+  --color-muted: var(--kiwi-color-text-muted);
+  --color-line: var(--kiwi-color-border);
+  --color-brand: var(--kiwi-color-brand-field);
+  --color-brand-soft: var(--kiwi-color-brand-soft);
+  --color-interactive: var(--kiwi-color-interactive);
+  --font-sans: var(--kiwi-font-sans);
+  --font-mono: var(--kiwi-font-mono);
+  --radius-sm: var(--kiwi-radius-sm);
+  --radius-md: var(--kiwi-radius-md);
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+}