@dataimago/tokens-neutral 0.1.0-alpha.10

package/dist/tokens.scss

@@ -0,0 +1,196 @@
+:root {
+  --color-palette-ink-50: #f5f5f4;
+  --color-palette-ink-100: #e7e5e4;
+  --color-palette-ink-200: #d6d3d1;
+  --color-palette-ink-300: #a8a29e;
+  --color-palette-ink-400: #78716c;
+  --color-palette-ink-500: #57534e;
+  --color-palette-ink-600: #44403c;
+  --color-palette-ink-700: #292524;
+  --color-palette-ink-800: #1c1917;
+  --color-palette-ink-900: #0c0a09;
+  --color-palette-stone-50: #f7f7f6;
+  --color-palette-stone-100: #ededeb;
+  --color-palette-stone-200: #dcdcda;
+  --color-palette-stone-300: #c1c1bf;
+  --color-palette-stone-400: #a0a0a0;
+  --color-palette-stone-500: #7c7c7c;
+  --color-palette-stone-600: #5e5e5c;
+  --color-palette-stone-700: #424240;
+  --color-palette-stone-800: #292927;
+  --color-palette-stone-900: #14140f;
+  --color-palette-paper-50: #fefdfb;
+  --color-palette-paper-100: #fdf9f2;
+  --color-palette-paper-200: #faf2e3;
+  --color-palette-paper-300: #f5e8cf;
+  --color-palette-paper-400: #edd9b3;
+  --color-palette-paper-500: #e0c088;
+  --color-functional-success: #27AE60;
+  --color-functional-warning: #F39C12;
+  --color-functional-error: #E74C3C;
+  --color-functional-info: #3498DB;
+  --transition-quick: 0.15s ease;
+  --transition-standard: 0.25s ease-in-out;
+  --transition-smooth: 0.35s ease;
+  --transition-logo: 0.3s;
+  --font-family-sans: Noto Sans, Fira Sans, system-ui, sans-serif;
+  --font-family-mono: JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace;
+  --font-family-display: var(--font-family-display-editorial);
+  --font-family-display-editorial: Noto Sans, system-ui, sans-serif;
+  --font-family-display-documentation: Noto Sans, system-ui, sans-serif;
+  --font-family-brand: Noto Sans, system-ui, sans-serif;
+  --font-family-math: Noto Sans Math, Noto Sans, system-ui, sans-serif;
+  --font-size-micro: 0.75rem;
+  --font-size-small: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-readable: 1.125rem;
+  --font-size-emphasis: 1.25rem;
+  --font-size-heading-small: 1.5rem;
+  --font-size-heading-medium: 1.875rem;
+  --font-size-heading-large: 2.25rem;
+  --font-size-heading-xl: 3rem;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-heading-h1: var(--font-weight-semibold);
+  --font-weight-heading-h2: var(--font-weight-semibold);
+  --font-weight-heading-h3: var(--font-weight-medium);
+  --font-weight-heading-h4: var(--font-weight-normal);
+  --font-weight-heading-h5: var(--font-weight-normal);
+  --font-weight-heading-h6: var(--font-weight-normal);
+  --font-weight-heading-subtitle: var(--font-weight-semibold);
+  --font-style-normal: normal;
+  --font-style-italic: italic;
+  --font-style-oblique: oblique;
+  --font-lineHeight-tight: 1.25;
+  --font-lineHeight-normal: 1.5;
+  --font-lineHeight-relaxed: 1.625;
+  --font-feature-settings-display: "normal";
+  --font-feature-settings-body: "normal";
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  --spacing-3xl: 4rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}
+
+:root, [data-bs-theme="light"] {
+  --color-surface-page: #ededeb;
+  --color-surface-page-scrolled: #ededeb;
+  --color-surface-elevated: #f7f7f6;
+  --color-surface-sunken: #faf2e3;
+  --color-surface-navbar: #ededeb;
+  --color-surface-navbar-scrolled: #ededeb;
+  --color-surface-code: #faf2e3;
+  --color-border-subtle: rgba(12, 10, 9, 0.45);
+  --color-border-moderate: rgba(12, 10, 9, 0.60);
+  --color-border-strong: rgba(12, 10, 9, 0.75);
+  --color-border-card: rgba(12, 10, 9, 0.60);
+  --color-border-code: #d6d3d1;
+  --color-content-primary: #14140f;
+  --color-content-secondary: #7c7c7c;
+  --color-content-muted: #78716c;
+  --color-content-inverse: #fdf9f2;
+  --color-interactive-primary: #292524;
+  --color-interactive-hover: #1c1917;
+  --color-interactive-accent: #292524;
+  --color-interactive-focus: #292524;
+  --contrast-high: rgb(20, 20, 16);
+  --contrast-readable: rgb(20, 20, 16);
+  --contrast-medium: #7c7c7c;
+  --contrast-subtle: #7c7c7c;
+  --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
+  --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
+  --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
+  --border-subtle: rgba(20, 20, 16, 0.47);
+  --border-moderate: rgba(20, 20, 16, 0.63);
+  --border-focus: #3498DB;
+  --navigation-hover-background: rgba(20, 20, 16, 0.05);
+  --navigation-active-background: rgba(20, 20, 16, 0.1);
+}
+
+[data-bs-theme="dark"] {
+  --color-surface-page: #141410;
+  --color-surface-page-scrolled: #141410;
+  --color-surface-elevated: #1c1917;
+  --color-surface-sunken: #0c0a09;
+  --color-surface-navbar: #141410;
+  --color-surface-navbar-scrolled: #141410;
+  --color-surface-code: #1c1917;
+  --color-border-subtle: rgba(253, 249, 242, 0.45);
+  --color-border-moderate: rgba(253, 249, 242, 0.60);
+  --color-border-strong: rgba(253, 249, 242, 0.75);
+  --color-border-card: rgba(253, 249, 242, 0.60);
+  --color-border-code: #292524;
+  --color-content-primary: #fdf9f2;
+  --color-content-secondary: #a8a29e;
+  --color-content-muted: #78716c;
+  --color-content-inverse: #0c0a09;
+  --color-interactive-primary: #d6d3d1;
+  --color-interactive-hover: #a8a29e;
+  --color-interactive-accent: #d6d3d1;
+  --color-interactive-focus: #d6d3d1;
+  --contrast-high: rgb(237, 237, 235);
+  --contrast-readable: rgb(237, 237, 235);
+  --contrast-medium: #83838f;
+  --contrast-subtle: #83838f;
+  --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
+  --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
+  --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+  --border-subtle: rgba(237, 237, 235, 0.47);
+  --border-moderate: rgba(237, 237, 235, 0.63);
+  --border-focus: #4FC3F7;
+  --navigation-hover-background: rgba(237, 237, 235, 0.05);
+  --navigation-active-background: rgba(237, 237, 235, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:where(:not([data-bs-theme="light"])) {
+    --color-surface-page: #141410;
+    --color-surface-page-scrolled: #141410;
+    --color-surface-elevated: #1c1917;
+    --color-surface-sunken: #0c0a09;
+    --color-surface-navbar: #141410;
+    --color-surface-navbar-scrolled: #141410;
+    --color-surface-code: #1c1917;
+    --color-border-subtle: rgba(253, 249, 242, 0.45);
+    --color-border-moderate: rgba(253, 249, 242, 0.60);
+    --color-border-strong: rgba(253, 249, 242, 0.75);
+    --color-border-card: rgba(253, 249, 242, 0.60);
+    --color-border-code: #292524;
+    --color-content-primary: #fdf9f2;
+    --color-content-secondary: #a8a29e;
+    --color-content-muted: #78716c;
+    --color-content-inverse: #0c0a09;
+    --color-interactive-primary: #d6d3d1;
+    --color-interactive-hover: #a8a29e;
+    --color-interactive-accent: #d6d3d1;
+    --color-interactive-focus: #d6d3d1;
+    --contrast-high: rgb(237, 237, 235);
+    --contrast-readable: rgb(237, 237, 235);
+    --contrast-medium: #83838f;
+    --contrast-subtle: #83838f;
+    --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
+    --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
+    --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
+    --border-subtle: rgba(237, 237, 235, 0.47);
+    --border-moderate: rgba(237, 237, 235, 0.63);
+    --border-focus: #4FC3F7;
+    --navigation-hover-background: rgba(237, 237, 235, 0.05);
+    --navigation-active-background: rgba(237, 237, 235, 0.1);
+  }
+}

package/dist/tokens.studio.json

@@ -0,0 +1,497 @@
+{
+  "global": {
+    "color": {
+      "surface": {
+        "page": {
+          "value": "#ededeb",
+          "type": "color"
+        },
+        "page-scrolled": {
+          "value": "#ededeb",
+          "type": "color"
+        },
+        "elevated": {
+          "value": "#f7f7f6",
+          "type": "color"
+        },
+        "sunken": {
+          "value": "#faf2e3",
+          "type": "color"
+        },
+        "navbar": {
+          "value": "#ededeb",
+          "type": "color"
+        },
+        "navbar-scrolled": {
+          "value": "#ededeb",
+          "type": "color"
+        },
+        "code": {
+          "value": "#faf2e3",
+          "type": "color"
+        }
+      },
+      "border": {
+        "subtle": {
+          "value": "rgba(12, 10, 9, 0.45)",
+          "type": "color"
+        },
+        "moderate": {
+          "value": "rgba(12, 10, 9, 0.60)",
+          "type": "color"
+        },
+        "strong": {
+          "value": "rgba(12, 10, 9, 0.75)",
+          "type": "color"
+        },
+        "card": {
+          "value": "rgba(12, 10, 9, 0.60)",
+          "type": "color"
+        },
+        "code": {
+          "value": "#d6d3d1",
+          "type": "color"
+        }
+      },
+      "content": {
+        "primary": {
+          "value": "#14140f",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "#7c7c7c",
+          "type": "color"
+        },
+        "muted": {
+          "value": "#78716c",
+          "type": "color"
+        },
+        "inverse": {
+          "value": "#fdf9f2",
+          "type": "color"
+        }
+      },
+      "interactive": {
+        "primary": {
+          "value": "#292524",
+          "type": "color"
+        },
+        "hover": {
+          "value": "#1c1917",
+          "type": "color"
+        },
+        "accent": {
+          "value": "#292524",
+          "type": "color"
+        },
+        "focus": {
+          "value": "#292524",
+          "type": "color"
+        }
+      }
+    },
+    "shadow": {
+      "sm": {
+        "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        "type": "other"
+      },
+      "md": {
+        "value": "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+        "type": "other"
+      },
+      "lg": {
+        "value": "0 10px 15px -3px rgb(0 0 0 / 0.1)",
+        "type": "other"
+      },
+      "xl": {
+        "value": "0 20px 25px -5px rgb(0 0 0 / 0.1)",
+        "type": "other"
+      }
+    },
+    "border": {
+      "subtle": {
+        "value": "rgba(20, 20, 16, 0.47)",
+        "type": "color"
+      },
+      "moderate": {
+        "value": "rgba(20, 20, 16, 0.63)",
+        "type": "color"
+      },
+      "focus": {
+        "value": "#3498DB",
+        "type": "color"
+      }
+    },
+    "transition": {
+      "quick": {
+        "value": "0.15s ease",
+        "type": "duration"
+      },
+      "standard": {
+        "value": "0.25s ease-in-out",
+        "type": "duration"
+      },
+      "smooth": {
+        "value": "0.35s ease",
+        "type": "duration"
+      },
+      "logo": {
+        "value": "0.3s",
+        "type": "duration"
+      }
+    },
+    "font": {
+      "family": {
+        "sans": {
+          "value": "Noto Sans, Fira Sans, system-ui, sans-serif",
+          "type": "other"
+        },
+        "mono": {
+          "value": "JetBrains Mono, SF Mono, Monaco, Inconsolata, monospace",
+          "type": "other"
+        },
+        "display": {
+          "value": "var(--font-family-display-editorial)",
+          "type": "other"
+        },
+        "display-editorial": {
+          "value": "Noto Sans, system-ui, sans-serif",
+          "type": "other"
+        },
+        "display-documentation": {
+          "value": "Noto Sans, system-ui, sans-serif",
+          "type": "other"
+        },
+        "brand": {
+          "value": "Noto Sans, system-ui, sans-serif",
+          "type": "other"
+        },
+        "math": {
+          "value": "Noto Sans Math, Noto Sans, system-ui, sans-serif",
+          "type": "other"
+        }
+      },
+      "size": {
+        "micro": {
+          "value": "0.75rem",
+          "type": "dimension"
+        },
+        "small": {
+          "value": "0.875rem",
+          "type": "dimension"
+        },
+        "base": {
+          "value": "1rem",
+          "type": "dimension"
+        },
+        "readable": {
+          "value": "1.125rem",
+          "type": "dimension"
+        },
+        "emphasis": {
+          "value": "1.25rem",
+          "type": "dimension"
+        },
+        "heading-small": {
+          "value": "1.5rem",
+          "type": "dimension"
+        },
+        "heading-medium": {
+          "value": "1.875rem",
+          "type": "dimension"
+        },
+        "heading-large": {
+          "value": "2.25rem",
+          "type": "dimension"
+        },
+        "heading-xl": {
+          "value": "3rem",
+          "type": "dimension"
+        }
+      },
+      "weight": {
+        "extralight": {
+          "value": "200",
+          "type": "number"
+        },
+        "light": {
+          "value": "300",
+          "type": "number"
+        },
+        "normal": {
+          "value": "400",
+          "type": "number"
+        },
+        "medium": {
+          "value": "500",
+          "type": "number"
+        },
+        "semibold": {
+          "value": "600",
+          "type": "number"
+        },
+        "bold": {
+          "value": "700",
+          "type": "number"
+        },
+        "heading": {
+          "_invariant": {
+            "value": "Heading-weight cluster — neutral default uses semibold (600) for h1/h2 because Noto Sans's medium (500) feels light at hero scale where Josefin's medium has geometric character. Owners may override per-heading by extending the Tailwind preset.",
+            "type": "other"
+          },
+          "h1": {
+            "value": "var(--font-weight-semibold)",
+            "type": "other"
+          },
+          "h2": {
+            "value": "var(--font-weight-semibold)",
+            "type": "other"
+          },
+          "h3": {
+            "value": "var(--font-weight-medium)",
+            "type": "other"
+          },
+          "h4": {
+            "value": "var(--font-weight-normal)",
+            "type": "other"
+          },
+          "h5": {
+            "value": "var(--font-weight-normal)",
+            "type": "other"
+          },
+          "h6": {
+            "value": "var(--font-weight-normal)",
+            "type": "other"
+          },
+          "subtitle": {
+            "value": "var(--font-weight-semibold)",
+            "type": "other"
+          }
+        }
+      },
+      "style": {
+        "normal": {
+          "value": "normal",
+          "type": "other"
+        },
+        "italic": {
+          "value": "italic",
+          "type": "other"
+        },
+        "oblique": {
+          "value": "oblique",
+          "type": "other"
+        }
+      },
+      "lineHeight": {
+        "tight": {
+          "value": "1.25",
+          "type": "number"
+        },
+        "normal": {
+          "value": "1.5",
+          "type": "number"
+        },
+        "relaxed": {
+          "value": "1.625",
+          "type": "number"
+        }
+      },
+      "feature-settings": {
+        "_invariant": {
+          "value": "OpenType feature settings — neutral defaults. @dataimago/tokens applies lining figures (lnum) to display headings to correct Josefin Sans's old-style default figures; Noto Sans uses uniform-baseline figures natively, so the neutral package emits `normal` for both display and body.",
+          "type": "other"
+        },
+        "display": {
+          "value": "\"normal\"",
+          "type": "other"
+        },
+        "body": {
+          "value": "\"normal\"",
+          "type": "other"
+        }
+      }
+    },
+    "spacing": {
+      "xs": {
+        "value": "0.25rem",
+        "type": "dimension"
+      },
+      "sm": {
+        "value": "0.5rem",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "1rem",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "1.5rem",
+        "type": "dimension"
+      },
+      "xl": {
+        "value": "2rem",
+        "type": "dimension"
+      },
+      "2xl": {
+        "value": "3rem",
+        "type": "dimension"
+      },
+      "3xl": {
+        "value": "4rem",
+        "type": "dimension"
+      }
+    },
+    "radius": {
+      "sm": {
+        "value": "0.25rem",
+        "type": "dimension"
+      },
+      "md": {
+        "value": "0.5rem",
+        "type": "dimension"
+      },
+      "lg": {
+        "value": "0.75rem",
+        "type": "dimension"
+      },
+      "xl": {
+        "value": "1rem",
+        "type": "dimension"
+      },
+      "full": {
+        "value": "9999px",
+        "type": "dimension"
+      }
+    }
+  },
+  "dark": {
+    "color": {
+      "surface": {
+        "page": {
+          "value": "#141410",
+          "type": "color"
+        },
+        "page-scrolled": {
+          "value": "#141410",
+          "type": "color"
+        },
+        "elevated": {
+          "value": "#1c1917",
+          "type": "color"
+        },
+        "sunken": {
+          "value": "#0c0a09",
+          "type": "color"
+        },
+        "navbar": {
+          "value": "#141410",
+          "type": "color"
+        },
+        "navbar-scrolled": {
+          "value": "#141410",
+          "type": "color"
+        },
+        "code": {
+          "value": "#1c1917",
+          "type": "color"
+        }
+      },
+      "border": {
+        "subtle": {
+          "value": "rgba(253, 249, 242, 0.45)",
+          "type": "color"
+        },
+        "moderate": {
+          "value": "rgba(253, 249, 242, 0.60)",
+          "type": "color"
+        },
+        "strong": {
+          "value": "rgba(253, 249, 242, 0.75)",
+          "type": "color"
+        },
+        "card": {
+          "value": "rgba(253, 249, 242, 0.60)",
+          "type": "color"
+        },
+        "code": {
+          "value": "#292524",
+          "type": "color"
+        }
+      },
+      "content": {
+        "primary": {
+          "value": "#fdf9f2",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "#a8a29e",
+          "type": "color"
+        },
+        "muted": {
+          "value": "#78716c",
+          "type": "color"
+        },
+        "inverse": {
+          "value": "#0c0a09",
+          "type": "color"
+        }
+      },
+      "interactive": {
+        "primary": {
+          "value": "#d6d3d1",
+          "type": "color"
+        },
+        "hover": {
+          "value": "#a8a29e",
+          "type": "color"
+        },
+        "accent": {
+          "value": "#d6d3d1",
+          "type": "color"
+        },
+        "focus": {
+          "value": "#d6d3d1",
+          "type": "color"
+        }
+      }
+    },
+    "border": {
+      "subtle": {
+        "value": "rgba(237, 237, 235, 0.47)",
+        "type": "color"
+      },
+      "moderate": {
+        "value": "rgba(237, 237, 235, 0.63)",
+        "type": "color"
+      },
+      "focus": {
+        "value": "#4FC3F7",
+        "type": "color"
+      }
+    }
+  },
+  "$themes": [
+    {
+      "id": "light",
+      "name": "Light",
+      "selectedTokenSets": {
+        "global": "enabled"
+      }
+    },
+    {
+      "id": "dark",
+      "name": "Dark",
+      "selectedTokenSets": {
+        "global": "enabled",
+        "dark": "enabled"
+      }
+    }
+  ],
+  "$metadata": {
+    "tokenSetOrder": [
+      "global",
+      "dark"
+    ]
+  }
+}