@rnine/nineos 0.0.0-stage → 0.1.1

package/dist/tokens.css

@@ -0,0 +1,470 @@
+/* NineOS tokens. Generated by @rnine/core/build-tokens from tokens/*.json. Do not edit. */
+
+:root {
+  --r9-color-gray-0: #FFFFFF;
+  --r9-color-gray-10: #F4F4F6;
+  --r9-color-gray-25: #F5F5F7;
+  --r9-color-gray-50: #EDEDF1;
+  --r9-color-gray-100: #DBDBE1;
+  --r9-color-gray-300: #A2A2AD;
+  --r9-color-gray-500: #6E6F7A;
+  --r9-color-gray-600: #4E4F57;
+  --r9-color-gray-800: #26262C;
+  --r9-color-gray-850: #18181C;
+  --r9-color-gray-900: #111114;
+  --r9-color-gray-950: #0A0A0C;
+  --r9-color-gray-975: #050506;
+  --r9-color-accent-300: #FF4FB0;
+  --r9-color-accent-400: #FF1F9A;
+  --r9-color-accent-500: #E6007E;
+  --r9-color-accent-600: #D4006F;
+  --r9-color-accent-700: #C20066;
+  --r9-color-accent-800: #9E0052;
+  --r9-color-signal-300: #1FE0FF;
+  --r9-color-signal-500: #0098C7;
+  --r9-color-signal-700: #00779C;
+  --r9-color-green-400: #3DDC84;
+  --r9-color-green-700: #14804A;
+  --r9-color-amber-400: #FFB020;
+  --r9-color-amber-700: #9A5B00;
+  --r9-color-red-400: #FF6B4A;
+  --r9-color-red-700: #C2361A;
+  --r9-breakpoint-sm: 640px;
+  --r9-breakpoint-md: 900px;
+  --r9-breakpoint-lg: 1200px;
+  --r9-container-max: 1120px;
+  --r9-container-text: 65ch;
+  --r9-container-gutter: 16px;
+  --r9-header-height: 64px;
+  --r9-z-base: 0;
+  --r9-z-raised: 10;
+  --r9-z-sticky: 30;
+  --r9-z-overlay: 40;
+  --r9-z-modal: 50;
+  --r9-z-toast: 60;
+  --r9-z-fx: 70;
+  --r9-duration-instant: 90ms;
+  --r9-duration-fast: 160ms;
+  --r9-duration-base: 260ms;
+  --r9-duration-slow: 420ms;
+  --r9-duration-slower: 700ms;
+  --r9-duration-ambient: 9000ms;
+  --r9-easing-out: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --r9-easing-in-out: cubic-bezier(0.6, 0, 0.2, 1);
+  --r9-easing-linear: cubic-bezier(0, 0, 1, 1);
+  --r9-corner-sm: 6px;
+  --r9-corner-md: 10px;
+  --r9-corner-lg: 18px;
+  --r9-shape-cut: 1;
+  --r9-shape-round: 0;
+  --r9-radius-none: 0px;
+  --r9-radius-xs: 2px;
+  --r9-radius-full: 999px;
+  --r9-border-hair: 1px;
+  --r9-border-strong: 2px;
+  --r9-space-0: 0rem;
+  --r9-space-1: 0.25rem;
+  --r9-space-2: 0.5rem;
+  --r9-space-3: 0.75rem;
+  --r9-space-4: 1rem;
+  --r9-space-5: 1.25rem;
+  --r9-space-6: 1.5rem;
+  --r9-space-8: 2rem;
+  --r9-space-10: 2.5rem;
+  --r9-space-12: 3rem;
+  --r9-space-16: 4rem;
+  --r9-space-20: 5rem;
+  --r9-space-24: 6rem;
+  --r9-font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
+  --r9-font-body: "Hanken Grotesk Variable", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --r9-font-mono: "Share Tech Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
+  --r9-font-size-xs: 0.75rem;
+  --r9-font-size-sm: 0.875rem;
+  --r9-font-size-base: 1rem;
+  --r9-font-size-md: 1.125rem;
+  --r9-font-size-lg: 1.25rem;
+  --r9-font-size-xl: 1.5rem;
+  --r9-font-size-2xl: 2rem;
+  --r9-font-size-3xl: 2.5rem;
+  --r9-font-size-4xl: 3.25rem;
+  --r9-font-size-5xl: 4.5rem;
+  --r9-font-weight-regular: 400;
+  --r9-font-weight-medium: 500;
+  --r9-font-weight-semibold: 600;
+  --r9-font-weight-bold: 700;
+  --r9-leading-tight: 1.06;
+  --r9-leading-snug: 1.25;
+  --r9-leading-normal: 1.6;
+  --r9-tracking-tight: -0.01em;
+  --r9-tracking-normal: 0em;
+  --r9-tracking-wide: 0.06em;
+  --r9-tracking-wider: 0.1em;
+  --r9-tracking-mark: 0.34em;
+  --r9-type-display-font-family: var(--r9-font-display);
+  --r9-type-display-font-weight: 700;
+  --r9-type-display-font-size: clamp(2.5rem, 1.25rem + 5.2vw, 4.75rem);
+  --r9-type-display-line-height: 1.04;
+  --r9-type-display-letter-spacing: -0.01em;
+  --r9-type-h1-font-family: var(--r9-font-display);
+  --r9-type-h1-font-weight: 700;
+  --r9-type-h1-font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem);
+  --r9-type-h1-line-height: 1.06;
+  --r9-type-h1-letter-spacing: -0.01em;
+  --r9-type-h2-font-family: var(--r9-font-display);
+  --r9-type-h2-font-weight: 600;
+  --r9-type-h2-font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem);
+  --r9-type-h2-line-height: 1.1;
+  --r9-type-h2-letter-spacing: 0em;
+  --r9-type-h3-font-family: var(--r9-font-display);
+  --r9-type-h3-font-weight: 600;
+  --r9-type-h3-font-size: 1.375rem;
+  --r9-type-h3-line-height: 1.2;
+  --r9-type-h3-letter-spacing: 0em;
+  --r9-type-h4-font-family: var(--r9-font-display);
+  --r9-type-h4-font-weight: 600;
+  --r9-type-h4-font-size: 1.125rem;
+  --r9-type-h4-line-height: 1.25;
+  --r9-type-h4-letter-spacing: 0em;
+  --r9-type-body-lg-font-family: var(--r9-font-body);
+  --r9-type-body-lg-font-weight: 400;
+  --r9-type-body-lg-font-size: 1.125rem;
+  --r9-type-body-lg-line-height: 1.6;
+  --r9-type-body-lg-letter-spacing: 0em;
+  --r9-type-body-font-family: var(--r9-font-body);
+  --r9-type-body-font-weight: 400;
+  --r9-type-body-font-size: 1rem;
+  --r9-type-body-line-height: 1.6;
+  --r9-type-body-letter-spacing: 0em;
+  --r9-type-body-sm-font-family: var(--r9-font-body);
+  --r9-type-body-sm-font-weight: 400;
+  --r9-type-body-sm-font-size: 0.875rem;
+  --r9-type-body-sm-line-height: 1.55;
+  --r9-type-body-sm-letter-spacing: 0em;
+  --r9-type-label-font-family: var(--r9-font-mono);
+  --r9-type-label-font-weight: 400;
+  --r9-type-label-font-size: 0.8125rem;
+  --r9-type-label-line-height: 1.2;
+  --r9-type-label-letter-spacing: 0.08em;
+  --r9-type-code-font-family: var(--r9-font-mono);
+  --r9-type-code-font-weight: 400;
+  --r9-type-code-font-size: 0.9375rem;
+  --r9-type-code-line-height: 1.7;
+  --r9-type-code-letter-spacing: 0em;
+  --r9-type-caption-font-family: var(--r9-font-mono);
+  --r9-type-caption-font-weight: 400;
+  --r9-type-caption-font-size: 0.75rem;
+  --r9-type-caption-line-height: 1.4;
+  --r9-type-caption-letter-spacing: 0.04em;
+  --r9-type-wordmark-font-family: var(--r9-font-display);
+  --r9-type-wordmark-font-weight: 500;
+  --r9-type-wordmark-font-size: 0.8125rem;
+  --r9-type-wordmark-line-height: 1;
+  --r9-type-wordmark-letter-spacing: 0.34em;
+}
+
+/* Clear (light) is the default */
+:root,
+[data-scheme="light"] {
+  --r9-bg: var(--r9-color-gray-0);
+  --r9-surface: var(--r9-color-gray-25);
+  --r9-surface-raised: var(--r9-color-gray-0);
+  --r9-glass: #FFFFFFD1;
+  --r9-fg: var(--r9-color-gray-950);
+  --r9-fg-muted: var(--r9-color-gray-600);
+  --r9-fg-subtle: var(--r9-color-gray-500);
+  --r9-line: var(--r9-color-gray-100);
+  --r9-line-strong: var(--r9-color-gray-300);
+  --r9-accent: var(--r9-color-accent-600);
+  --r9-accent-hover: var(--r9-color-accent-700);
+  --r9-accent-text: var(--r9-color-accent-700);
+  --r9-on-accent: var(--r9-color-gray-0);
+  --r9-accent-soft: #D4006F1F;
+  --r9-signal: var(--r9-color-signal-500);
+  --r9-signal-text: var(--r9-color-signal-700);
+  --r9-inverse-bg: var(--r9-color-gray-950);
+  --r9-inverse-fg: var(--r9-color-gray-0);
+  --r9-success: var(--r9-color-green-700);
+  --r9-warning: var(--r9-color-amber-700);
+  --r9-danger: var(--r9-color-red-700);
+  --r9-dot: #0A0A0C29;
+  --r9-scan: #00000000;
+  --r9-sheen: #0098C712;
+  --r9-selection: #D4006F33;
+  color-scheme: light;
+}
+
+/* Without JavaScript (no data-scheme yet), Cipher follows a dark system setting.
+   Apps set data-scheme: the saved choice, or the Auto rule (see useMood). */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-scheme="light"]) {
+    --r9-bg: var(--r9-color-gray-975);
+    --r9-surface: var(--r9-color-gray-900);
+    --r9-surface-raised: var(--r9-color-gray-850);
+    --r9-glass: #050506C7;
+    --r9-fg: var(--r9-color-gray-10);
+    --r9-fg-muted: var(--r9-color-gray-300);
+    --r9-fg-subtle: var(--r9-color-gray-500);
+    --r9-line: var(--r9-color-gray-800);
+    --r9-line-strong: var(--r9-color-gray-600);
+    --r9-accent: var(--r9-color-accent-400);
+    --r9-accent-hover: var(--r9-color-accent-300);
+    --r9-accent-text: var(--r9-color-accent-300);
+    --r9-on-accent: var(--r9-color-gray-975);
+    --r9-accent-soft: #FF1F9A29;
+    --r9-signal: var(--r9-color-signal-300);
+    --r9-signal-text: var(--r9-color-signal-300);
+    --r9-inverse-bg: var(--r9-color-gray-10);
+    --r9-inverse-fg: var(--r9-color-gray-975);
+    --r9-success: var(--r9-color-green-400);
+    --r9-warning: var(--r9-color-amber-400);
+    --r9-danger: var(--r9-color-red-400);
+    --r9-dot: #F4F4F621;
+    --r9-scan: #FFFFFF08;
+    --r9-sheen: #1FE0FF0D;
+    --r9-selection: #FF1F9A4D;
+    color-scheme: dark;
+  }
+}
+
+[data-scheme="dark"] {
+  --r9-bg: var(--r9-color-gray-975);
+  --r9-surface: var(--r9-color-gray-900);
+  --r9-surface-raised: var(--r9-color-gray-850);
+  --r9-glass: #050506C7;
+  --r9-fg: var(--r9-color-gray-10);
+  --r9-fg-muted: var(--r9-color-gray-300);
+  --r9-fg-subtle: var(--r9-color-gray-500);
+  --r9-line: var(--r9-color-gray-800);
+  --r9-line-strong: var(--r9-color-gray-600);
+  --r9-accent: var(--r9-color-accent-400);
+  --r9-accent-hover: var(--r9-color-accent-300);
+  --r9-accent-text: var(--r9-color-accent-300);
+  --r9-on-accent: var(--r9-color-gray-975);
+  --r9-accent-soft: #FF1F9A29;
+  --r9-signal: var(--r9-color-signal-300);
+  --r9-signal-text: var(--r9-color-signal-300);
+  --r9-inverse-bg: var(--r9-color-gray-10);
+  --r9-inverse-fg: var(--r9-color-gray-975);
+  --r9-success: var(--r9-color-green-400);
+  --r9-warning: var(--r9-color-amber-400);
+  --r9-danger: var(--r9-color-red-400);
+  --r9-dot: #F4F4F621;
+  --r9-scan: #FFFFFF08;
+  --r9-sheen: #1FE0FF0D;
+  --r9-selection: #FF1F9A4D;
+  color-scheme: dark;
+}
+
+/* Palettes: data-palette="magenta|acid|volt" on <html>, or on an element
+   that also has data-scheme. Magenta is the default (no attribute). */
+[data-palette="magenta"] {
+  --r9-color-accent-300: #FF4FB0;
+  --r9-color-accent-400: #FF1F9A;
+  --r9-color-accent-500: #E6007E;
+  --r9-color-accent-600: #D4006F;
+  --r9-color-accent-700: #C20066;
+  --r9-color-accent-800: #9E0052;
+  --r9-color-signal-300: #1FE0FF;
+  --r9-color-signal-500: #0098C7;
+  --r9-color-signal-700: #00779C;
+}
+
+[data-palette="acid"] {
+  --r9-color-accent-300: #C4FB56;
+  --r9-color-accent-400: #ABF910;
+  --r9-color-accent-500: #649404;
+  --r9-color-accent-600: #567F03;
+  --r9-color-accent-700: #4D7103;
+  --r9-color-accent-800: #3C5902;
+  --r9-color-signal-300: #BC8CFC;
+  --r9-color-signal-500: #AB6EFB;
+  --r9-color-signal-700: #8831FA;
+}
+
+[data-palette="volt"] {
+  --r9-color-accent-300: #88A4FF;
+  --r9-color-accent-400: #6287FF;
+  --r9-color-accent-500: #567DFF;
+  --r9-color-accent-600: #3665FF;
+  --r9-color-accent-700: #1D51FF;
+  --r9-color-accent-800: #0035E3;
+  --r9-color-signal-300: #FFF71A;
+  --r9-color-signal-500: #969100;
+  --r9-color-signal-700: #706C00;
+}
+
+/* A mood scope inside a palette */
+[data-palette="magenta"] [data-scheme="light"] {
+  --r9-accent: var(--r9-color-accent-600);
+  --r9-accent-hover: var(--r9-color-accent-700);
+  --r9-accent-text: var(--r9-color-accent-700);
+  --r9-accent-soft: #D4006F1F;
+  --r9-signal: var(--r9-color-signal-500);
+  --r9-signal-text: var(--r9-color-signal-700);
+  --r9-sheen: #0098C712;
+  --r9-selection: #D4006F33;
+}
+
+[data-palette="magenta"] [data-scheme="dark"] {
+  --r9-accent: var(--r9-color-accent-400);
+  --r9-accent-hover: var(--r9-color-accent-300);
+  --r9-accent-text: var(--r9-color-accent-300);
+  --r9-accent-soft: #FF1F9A29;
+  --r9-signal: var(--r9-color-signal-300);
+  --r9-signal-text: var(--r9-color-signal-300);
+  --r9-sheen: #1FE0FF0D;
+  --r9-selection: #FF1F9A4D;
+}
+
+[data-palette="acid"] [data-scheme="light"] {
+  --r9-accent: var(--r9-color-accent-600);
+  --r9-accent-hover: var(--r9-color-accent-700);
+  --r9-accent-text: var(--r9-color-accent-700);
+  --r9-accent-soft: #567F031F;
+  --r9-signal: var(--r9-color-signal-500);
+  --r9-signal-text: var(--r9-color-signal-700);
+  --r9-sheen: #AB6EFB12;
+  --r9-selection: #567F0333;
+}
+
+[data-palette="acid"] [data-scheme="dark"] {
+  --r9-accent: var(--r9-color-accent-400);
+  --r9-accent-hover: var(--r9-color-accent-300);
+  --r9-accent-text: var(--r9-color-accent-300);
+  --r9-accent-soft: #ABF91029;
+  --r9-signal: var(--r9-color-signal-300);
+  --r9-signal-text: var(--r9-color-signal-300);
+  --r9-sheen: #BC8CFC0D;
+  --r9-selection: #ABF9104D;
+}
+
+[data-palette="volt"] [data-scheme="light"] {
+  --r9-accent: var(--r9-color-accent-600);
+  --r9-accent-hover: var(--r9-color-accent-700);
+  --r9-accent-text: var(--r9-color-accent-700);
+  --r9-accent-soft: #3665FF1F;
+  --r9-signal: var(--r9-color-signal-500);
+  --r9-signal-text: var(--r9-color-signal-700);
+  --r9-sheen: #96910012;
+  --r9-selection: #3665FF33;
+}
+
+[data-palette="volt"] [data-scheme="dark"] {
+  --r9-accent: var(--r9-color-accent-400);
+  --r9-accent-hover: var(--r9-color-accent-300);
+  --r9-accent-text: var(--r9-color-accent-300);
+  --r9-accent-soft: #6287FF29;
+  --r9-signal: var(--r9-color-signal-300);
+  --r9-signal-text: var(--r9-color-signal-300);
+  --r9-sheen: #FFF71A0D;
+  --r9-selection: #6287FF4D;
+}
+
+/* The palette's own element (after the scopes above, so a preview of one palette wins inside another) */
+:root[data-palette="magenta"],
+[data-palette="magenta"][data-scheme="light"] {
+  --r9-accent: var(--r9-color-accent-600);
+  --r9-accent-hover: var(--r9-color-accent-700);
+  --r9-accent-text: var(--r9-color-accent-700);
+  --r9-accent-soft: #D4006F1F;
+  --r9-signal: var(--r9-color-signal-500);
+  --r9-signal-text: var(--r9-color-signal-700);
+  --r9-sheen: #0098C712;
+  --r9-selection: #D4006F33;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-palette="magenta"]:not([data-scheme="light"]) {
+    --r9-accent: var(--r9-color-accent-400);
+    --r9-accent-hover: var(--r9-color-accent-300);
+    --r9-accent-text: var(--r9-color-accent-300);
+    --r9-accent-soft: #FF1F9A29;
+    --r9-signal: var(--r9-color-signal-300);
+    --r9-signal-text: var(--r9-color-signal-300);
+    --r9-sheen: #1FE0FF0D;
+    --r9-selection: #FF1F9A4D;
+  }
+}
+
+[data-palette="magenta"][data-scheme="dark"] {
+  --r9-accent: var(--r9-color-accent-400);
+  --r9-accent-hover: var(--r9-color-accent-300);
+  --r9-accent-text: var(--r9-color-accent-300);
+  --r9-accent-soft: #FF1F9A29;
+  --r9-signal: var(--r9-color-signal-300);
+  --r9-signal-text: var(--r9-color-signal-300);
+  --r9-sheen: #1FE0FF0D;
+  --r9-selection: #FF1F9A4D;
+}
+
+:root[data-palette="acid"],
+[data-palette="acid"][data-scheme="light"] {
+  --r9-accent: var(--r9-color-accent-600);
+  --r9-accent-hover: var(--r9-color-accent-700);
+  --r9-accent-text: var(--r9-color-accent-700);
+  --r9-accent-soft: #567F031F;
+  --r9-signal: var(--r9-color-signal-500);
+  --r9-signal-text: var(--r9-color-signal-700);
+  --r9-sheen: #AB6EFB12;
+  --r9-selection: #567F0333;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-palette="acid"]:not([data-scheme="light"]) {
+    --r9-accent: var(--r9-color-accent-400);
+    --r9-accent-hover: var(--r9-color-accent-300);
+    --r9-accent-text: var(--r9-color-accent-300);
+    --r9-accent-soft: #ABF91029;
+    --r9-signal: var(--r9-color-signal-300);
+    --r9-signal-text: var(--r9-color-signal-300);
+    --r9-sheen: #BC8CFC0D;
+    --r9-selection: #ABF9104D;
+  }
+}
+
+[data-palette="acid"][data-scheme="dark"] {
+  --r9-accent: var(--r9-color-accent-400);
+  --r9-accent-hover: var(--r9-color-accent-300);
+  --r9-accent-text: var(--r9-color-accent-300);
+  --r9-accent-soft: #ABF91029;
+  --r9-signal: var(--r9-color-signal-300);
+  --r9-signal-text: var(--r9-color-signal-300);
+  --r9-sheen: #BC8CFC0D;
+  --r9-selection: #ABF9104D;
+}
+
+:root[data-palette="volt"],
+[data-palette="volt"][data-scheme="light"] {
+  --r9-accent: var(--r9-color-accent-600);
+  --r9-accent-hover: var(--r9-color-accent-700);
+  --r9-accent-text: var(--r9-color-accent-700);
+  --r9-accent-soft: #3665FF1F;
+  --r9-signal: var(--r9-color-signal-500);
+  --r9-signal-text: var(--r9-color-signal-700);
+  --r9-sheen: #96910012;
+  --r9-selection: #3665FF33;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-palette="volt"]:not([data-scheme="light"]) {
+    --r9-accent: var(--r9-color-accent-400);
+    --r9-accent-hover: var(--r9-color-accent-300);
+    --r9-accent-text: var(--r9-color-accent-300);
+    --r9-accent-soft: #6287FF29;
+    --r9-signal: var(--r9-color-signal-300);
+    --r9-signal-text: var(--r9-color-signal-300);
+    --r9-sheen: #FFF71A0D;
+    --r9-selection: #6287FF4D;
+  }
+}
+
+[data-palette="volt"][data-scheme="dark"] {
+  --r9-accent: var(--r9-color-accent-400);
+  --r9-accent-hover: var(--r9-color-accent-300);
+  --r9-accent-text: var(--r9-color-accent-300);
+  --r9-accent-soft: #6287FF29;
+  --r9-signal: var(--r9-color-signal-300);
+  --r9-signal-text: var(--r9-color-signal-300);
+  --r9-sheen: #FFF71A0D;
+  --r9-selection: #6287FF4D;
+}