@nazuraki/styles 0.2.2 → 0.3.0

package/summer-cloud/components/link.css

@@ -1,5 +1,5 @@
 /* summer-cloud — nav link: pill that fills with sky tint, arrow slides out */
-.nb-link {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link {
   display: inline-flex;
   align-items: center;
   gap: var(--nb-space-2);
@@ -15,46 +15,46 @@
     background var(--nb-transition),
     color var(--nb-transition);
 }
-.nb-link::after {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link::after {
   content: "→";
   color: var(--nb-accent);
   transition: transform var(--nb-transition);
 }
-.nb-link:hover,
-.nb-link:focus-visible {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:hover,
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:focus-visible {
   background: var(--nb-sky-tint);
   color: var(--nb-primary);
   outline: none;
 }
-.nb-link:hover::after,
-.nb-link:focus-visible::after {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:hover::after,
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:focus-visible::after {
   transform: translateX(4px);
 }
-.nb-link:active {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:active {
   transform: scale(0.95);
 }
 
 /* Current page: violet with the underline rule from the top nav. */
-.nb-link--active,
-.nb-link[aria-current="page"] {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link--active,
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link[aria-current="page"] {
   background: none;
   border-radius: 0;
   border-bottom: 2px solid var(--nb-primary);
   color: var(--nb-primary);
 }
-.nb-link--active::after,
-.nb-link[aria-current="page"]::after {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link--active::after,
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link[aria-current="page"]::after {
   content: none;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .nb-link,
-  .nb-link::after {
+  :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link,
+  :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link::after {
     transition: none;
   }
-  .nb-link:hover::after,
-  .nb-link:focus-visible::after,
-  .nb-link:active {
+  :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:hover::after,
+  :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:focus-visible::after,
+  :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-link:active {
     transform: none;
   }
 }

package/summer-cloud/components/progress.css

@@ -1,5 +1,5 @@
 /* summer-cloud — progress bar & spinner: glowing violet indicators */
-.nb-progress {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-progress {
   display: block;
   width: 100%;
   height: 0.5rem;
@@ -7,37 +7,37 @@
   border-radius: var(--nb-radius-pill);
   overflow: hidden;
 }
-.nb-progress__bar {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-progress__bar {
   height: 100%;
   background: var(--nb-primary);
   border-radius: var(--nb-radius-pill);
   box-shadow: 0 0 10px rgba(69, 0, 217, 0.5);
   transition: width var(--nb-transition);
 }
-.nb-progress__bar--accent {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-progress__bar--accent {
   background: var(--nb-accent);
   box-shadow: 0 0 10px rgba(12, 179, 255, 0.5);
 }
 
-.nb-spinner {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-spinner {
   display: inline-block;
   width: 1.5rem;
   height: 1.5rem;
   border: 2px solid var(--nb-outline);
   border-top-color: var(--nb-primary);
   border-radius: 50%;
-  animation: nb-spin 0.8s linear infinite;
+  animation: nb-sc-spin 0.8s linear infinite;
 }
-@keyframes nb-spin {
+@keyframes nb-sc-spin {
   to {
     transform: rotate(360deg);
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .nb-spinner {
+  :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-spinner {
     animation-duration: 2s;
   }
-  .nb-progress__bar {
+  :where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-progress__bar {
     transition: none;
   }
 }

package/summer-cloud/components/table.css

@@ -1,11 +1,11 @@
 /* summer-cloud — table: mono header labels, sky-tint row hover */
-.nb-table {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--nb-text-sm);
   color: var(--nb-on-surface);
 }
-.nb-table th {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table th {
   padding: var(--nb-space-3);
   border-bottom: 1px solid var(--nb-outline);
   color: var(--nb-faint);
@@ -16,19 +16,19 @@
   font-weight: 500;
   letter-spacing: var(--nb-tracking-wide);
 }
-.nb-table td {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table td {
   padding: var(--nb-space-3);
   border-bottom: 1px solid rgba(201, 195, 218, 0.4);
 }
-.nb-table tbody tr {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table tbody tr {
   transition: background var(--nb-transition);
 }
-.nb-table tbody tr:hover {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table tbody tr:hover {
   background: var(--nb-sky-tint);
 }
 /* Numeric cells take the mono voice — prices and data read as utility-grade. */
-.nb-table td.nb-num,
-.nb-table th.nb-num {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table td.nb-num,
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-table th.nb-num {
   font-family: var(--nb-font-mono);
   text-align: right;
 }

package/summer-cloud/components/tabs.css

@@ -1,10 +1,10 @@
 /* summer-cloud — tabs: violet underline on the active tab, sky tint on hover */
-.nb-tabs {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tabs {
   display: flex;
   gap: var(--nb-space-2);
   border-bottom: 1px solid var(--nb-outline);
 }
-.nb-tab {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab {
   padding: var(--nb-space-2) var(--nb-space-3);
   margin-bottom: -1px;
   background: none;
@@ -19,20 +19,20 @@
   transition: color var(--nb-transition), background var(--nb-transition),
     border-color var(--nb-transition);
 }
-.nb-tab:hover {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab:hover {
   background: var(--nb-sky-tint);
   color: var(--nb-primary);
 }
-.nb-tab:focus-visible {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px var(--nb-accent-glow);
 }
-.nb-tab--active,
-.nb-tab[aria-selected="true"] {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab--active,
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tab[aria-selected="true"] {
   color: var(--nb-primary);
   border-bottom-color: var(--nb-primary);
   font-weight: var(--nb-font-weight-bold);
 }
-.nb-tabpanel {
+:where([data-nb-style="summer-cloud"], [data-nb-style="summer-cloud"] *).nb-tabpanel {
   padding: var(--nb-space-3) 0;
 }

package/summer-cloud/design.md

@@ -113,3 +113,16 @@ theme-agnostic). Variants use BEM-ish modifiers (`nb-btn--primary`).
   dark text on it (4.97:1), and uses `--nb-danger-deep` for the solid
   destructive button (5.55:1 on white). Every other foreground/background pair
   in the palette clears AA.
+
+## Code syntax
+
+Tokens `--nb-code-*`, part of the baseline contract. Palette hues deepened for
+contrast on white: violet keywords, deep-green strings, deep-amber numbers,
+accent-deep functions, deep-teal types, danger-deep variables, muted-faint
+comments, faint meta.
+
+## Scoping
+
+Every rule is guarded by `data-nb-style="summer-cloud"` (self or ancestor),
+wrapped in zero-specificity `:where()`. Set the attribute on `<html>` for a
+page or on a container for an embedded island.

package/summer-cloud/tokens.css

@@ -3,16 +3,22 @@
  *   @import "@nazuraki/styles/summer-cloud/tokens";
  * or pull the whole theme with ./index.css.
  *
- * Token names mirror neon-butterfly's --nb-* contract so themes stay
- * swappable; names marked (extra) are additions this theme needs and that
- * neon-butterfly does not define.
+ * Nothing applies until an element carries data-nb-style="summer-cloud"
+ * — set it on <html> for a page, or on any container for an embedded island.
+ * The :where() keeps specificity at zero, so any consumer rule overrides.
+ *
+ * Every theme declares the same baseline token set (styles/test enforces
+ * parity); names marked (extra) are additions beyond it that only this
+ * theme's own component CSS may rely on.
  */
-:root {
+:where([data-nb-style="summer-cloud"]) {
+  color-scheme: light;
+
   /* color */
   --nb-bg: #f6fafe;
   --nb-bg-blend: #eaeef2;
   --nb-surface: #ffffff;
-  --nb-surface-sunken: #f0f4f8; /* (extra) inset fields */
+  --nb-surface-sunken: #f0f4f8; /* inset fields */
   --nb-surface-glass: rgba(255, 255, 255, 0.6);
   --nb-surface-glass-high: rgba(255, 255, 255, 0.8); /* (extra) floating tier */
   --nb-on-surface: #171c1f;
@@ -21,10 +27,12 @@
   --nb-primary-bright: #5d2bff; /* (extra) shadow/glow tint */
   --nb-primary-glow: rgba(93, 43, 255, 0.4);
   --nb-primary-border: rgba(69, 0, 217, 0.2);
+  --nb-on-primary: #ffffff; /* text on solid violet fills */
   --nb-accent: #0cb3ff;
   --nb-accent-glow: rgba(12, 179, 255, 0.2);
   --nb-accent-deep: #006492; /* (extra) readable accent text */
   --nb-border: rgba(255, 255, 255, 0.4);
+  --nb-border-lit: rgba(255, 255, 255, 0.7); /* lit top edge of glass panes */
   --nb-outline: #c9c3da; /* (extra) hairline on opaque surfaces */
 
   /* semantic color */
@@ -39,12 +47,22 @@
   --nb-sky-end: #c9e6ff;
   --nb-sky-tint: rgba(255, 255, 255, 0.7);
 
+  /* code syntax — deepened palette hues for contrast on white */
+  --nb-code-keyword: #4500d9;
+  --nb-code-string: #157a2a;
+  --nb-code-number: #9a6b00;
+  --nb-code-comment: #6e6880;
+  --nb-code-function: #006492;
+  --nb-code-variable: #cc1f1f;
+  --nb-code-type: #00877a;
+  --nb-code-meta: #484457;
+
   /* typography */
-  --nb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; /* (extra) */
-  --nb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif; /* (extra) */
+  --nb-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+  --nb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
   --nb-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
   --nb-font-weight: 400;
-  --nb-font-weight-medium: 600; /* (extra) */
+  --nb-font-weight-medium: 600;
   --nb-font-weight-bold: 700;
   --nb-text-sm: 14px;
   --nb-tracking-wide: 0.05em;
@@ -53,6 +71,7 @@
   /* shape & effects */
   --nb-radius: 1rem;
   --nb-radius-sm: 0.25rem; /* (extra) */
+  --nb-radius-lg: 1.5rem; /* cards and large containers */
   --nb-radius-pill: 9999px; /* (extra) */
   --nb-blur: 12px;
   --nb-blur-high: 20px; /* (extra) */