@goldencomm/create-baseline 0.0.1 → 0.1.0

package/templates/shopify/snippets/badge.figma.ts

@@ -0,0 +1,355 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=469-69
+// source=platforms/shopify/theme/snippets/badge.liquid
+// component=badge (snippet)
+// Shopify Code Connect template (label "Shopify (Liquid)"): Badge is a snippet, not a theme block, because a badge
+// is a Liquid fact (sold out, on sale) rather than a merchant setting. Emits the render call.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// BASELINE_ICONS_START (generated by tokens/icons.mjs from tokens/icons/vocabulary.json; do not edit)
+const BASELINE_SYSTEM_ICONS: Record<string, string> = {
+  "brands/amazon": "brand-amazon",
+  "brands/americanexpress": "brand-americanexpress",
+  "brands/apple": "brand-apple",
+  "brands/applepay": "brand-applepay",
+  "brands/bluesky": "brand-bluesky",
+  "brands/discord": "brand-discord",
+  "brands/facebook": "brand-facebook",
+  "brands/github": "brand-github",
+  "brands/google": "brand-google",
+  "brands/googlepay": "brand-googlepay",
+  "brands/instagram": "brand-instagram",
+  "brands/linkedin": "brand-linkedin",
+  "brands/mastercard": "brand-mastercard",
+  "brands/paypal": "brand-paypal",
+  "brands/pinterest": "brand-pinterest",
+  "brands/reddit": "brand-reddit",
+  "brands/shopify": "brand-shopify",
+  "brands/snapchat": "brand-snapchat",
+  "brands/spotify": "brand-spotify",
+  "brands/telegram": "brand-telegram",
+  "brands/threads": "brand-threads",
+  "brands/tiktok": "brand-tiktok",
+  "brands/tripadvisor": "brand-tripadvisor",
+  "brands/vimeo": "brand-vimeo",
+  "brands/visa": "brand-visa",
+  "brands/whatsapp": "brand-whatsapp",
+  "brands/wordpress": "brand-wordpress",
+  "brands/x": "brand-x",
+  "brands/yelp": "brand-yelp",
+  "brands/youtube": "brand-youtube",
+  "lucide/arrow-down": "arrow-down",
+  "lucide/arrow-left": "arrow-left",
+  "lucide/arrow-right": "arrow-right",
+  "lucide/arrow-up": "arrow-up",
+  "lucide/arrow-up-down": "arrow-up-down",
+  "lucide/calendar": "calendar",
+  "lucide/check": "check",
+  "lucide/chevron-down": "chevron-down",
+  "lucide/chevron-left": "chevron-left",
+  "lucide/chevron-right": "chevron-right",
+  "lucide/chevron-up": "chevron-up",
+  "lucide/chevrons-left": "chevrons-left",
+  "lucide/chevrons-right": "chevrons-right",
+  "lucide/chevrons-up-down": "chevrons-up-down",
+  "lucide/circle": "circle",
+  "lucide/circle-alert": "error",
+  "lucide/circle-check": "success",
+  "lucide/circle-x": "close-circle",
+  "lucide/clock": "clock",
+  "lucide/copy": "copy",
+  "lucide/download": "download",
+  "lucide/ellipsis": "more-horizontal",
+  "lucide/ellipsis-vertical": "more-vertical",
+  "lucide/external-link": "external-link",
+  "lucide/eye": "eye",
+  "lucide/eye-off": "eye-off",
+  "lucide/file": "file",
+  "lucide/funnel": "filter",
+  "lucide/grip-vertical": "grip-vertical",
+  "lucide/house": "home",
+  "lucide/image": "image",
+  "lucide/info": "info",
+  "lucide/link": "link",
+  "lucide/loader-circle": "loader",
+  "lucide/lock": "lock",
+  "lucide/mail": "mail",
+  "lucide/menu": "menu",
+  "lucide/minus": "minus",
+  "lucide/panel-left": "sidebar",
+  "lucide/pause": "pause",
+  "lucide/pencil": "edit",
+  "lucide/phone": "phone",
+  "lucide/play": "play",
+  "lucide/plus": "plus",
+  "lucide/refresh-cw": "refresh",
+  "lucide/search": "search",
+  "lucide/settings": "settings",
+  "lucide/share-2": "share",
+  "lucide/shopping-cart": "cart",
+  "lucide/star": "star",
+  "lucide/trash-2": "trash",
+  "lucide/triangle-alert": "warning",
+  "lucide/upload": "upload",
+  "lucide/user": "user",
+  "lucide/x": "close",
+  "material-symbols/add": "plus",
+  "material-symbols/arrow-back": "arrow-left",
+  "material-symbols/arrow-downward": "arrow-down",
+  "material-symbols/arrow-forward": "arrow-right",
+  "material-symbols/arrow-upward": "arrow-up",
+  "material-symbols/calendar-today": "calendar",
+  "material-symbols/call": "phone",
+  "material-symbols/cancel": "close-circle",
+  "material-symbols/check": "check",
+  "material-symbols/check-circle": "success",
+  "material-symbols/circle": "circle",
+  "material-symbols/close": "close",
+  "material-symbols/content-copy": "copy",
+  "material-symbols/delete": "trash",
+  "material-symbols/description": "file",
+  "material-symbols/download": "download",
+  "material-symbols/drag-indicator": "grip-vertical",
+  "material-symbols/edit": "edit",
+  "material-symbols/error": "error",
+  "material-symbols/filter-list": "filter",
+  "material-symbols/home": "home",
+  "material-symbols/image": "image",
+  "material-symbols/info": "info",
+  "material-symbols/keyboard-arrow-down": "chevron-down",
+  "material-symbols/keyboard-arrow-left": "chevron-left",
+  "material-symbols/keyboard-arrow-right": "chevron-right",
+  "material-symbols/keyboard-arrow-up": "chevron-up",
+  "material-symbols/keyboard-double-arrow-left": "chevrons-left",
+  "material-symbols/keyboard-double-arrow-right": "chevrons-right",
+  "material-symbols/link": "link",
+  "material-symbols/lock": "lock",
+  "material-symbols/mail": "mail",
+  "material-symbols/menu": "menu",
+  "material-symbols/more-horiz": "more-horizontal",
+  "material-symbols/more-vert": "more-vertical",
+  "material-symbols/open-in-new": "external-link",
+  "material-symbols/pause": "pause",
+  "material-symbols/person": "user",
+  "material-symbols/play-arrow": "play",
+  "material-symbols/progress-activity": "loader",
+  "material-symbols/refresh": "refresh",
+  "material-symbols/remove": "minus",
+  "material-symbols/schedule": "clock",
+  "material-symbols/search": "search",
+  "material-symbols/settings": "settings",
+  "material-symbols/share": "share",
+  "material-symbols/shopping-cart": "cart",
+  "material-symbols/star": "star",
+  "material-symbols/swap-vert": "arrow-up-down",
+  "material-symbols/unfold-more": "chevrons-up-down",
+  "material-symbols/upload": "upload",
+  "material-symbols/view-sidebar": "sidebar",
+  "material-symbols/visibility": "eye",
+  "material-symbols/visibility-off": "eye-off",
+  "material-symbols/warning": "warning",
+  "phosphor/arrow-down": "arrow-down",
+  "phosphor/arrow-left": "arrow-left",
+  "phosphor/arrow-right": "arrow-right",
+  "phosphor/arrow-square-out": "external-link",
+  "phosphor/arrow-up": "arrow-up",
+  "phosphor/arrows-clockwise": "refresh",
+  "phosphor/arrows-down-up": "arrow-up-down",
+  "phosphor/calendar": "calendar",
+  "phosphor/caret-double-left": "chevrons-left",
+  "phosphor/caret-double-right": "chevrons-right",
+  "phosphor/caret-down": "chevron-down",
+  "phosphor/caret-left": "chevron-left",
+  "phosphor/caret-right": "chevron-right",
+  "phosphor/caret-up": "chevron-up",
+  "phosphor/caret-up-down": "chevrons-up-down",
+  "phosphor/check": "check",
+  "phosphor/check-circle": "success",
+  "phosphor/circle": "circle",
+  "phosphor/circle-notch": "loader",
+  "phosphor/clock": "clock",
+  "phosphor/copy": "copy",
+  "phosphor/dots-six-vertical": "grip-vertical",
+  "phosphor/dots-three": "more-horizontal",
+  "phosphor/dots-three-vertical": "more-vertical",
+  "phosphor/download-simple": "download",
+  "phosphor/envelope": "mail",
+  "phosphor/eye": "eye",
+  "phosphor/eye-slash": "eye-off",
+  "phosphor/file": "file",
+  "phosphor/funnel": "filter",
+  "phosphor/gear": "settings",
+  "phosphor/house": "home",
+  "phosphor/image": "image",
+  "phosphor/info": "info",
+  "phosphor/link": "link",
+  "phosphor/list": "menu",
+  "phosphor/lock": "lock",
+  "phosphor/magnifying-glass": "search",
+  "phosphor/minus": "minus",
+  "phosphor/pause": "pause",
+  "phosphor/pencil-simple": "edit",
+  "phosphor/phone": "phone",
+  "phosphor/play": "play",
+  "phosphor/plus": "plus",
+  "phosphor/share-network": "share",
+  "phosphor/shopping-cart": "cart",
+  "phosphor/sidebar": "sidebar",
+  "phosphor/star": "star",
+  "phosphor/trash": "trash",
+  "phosphor/upload-simple": "upload",
+  "phosphor/user": "user",
+  "phosphor/warning": "warning",
+  "phosphor/warning-circle": "error",
+  "phosphor/x": "close",
+  "phosphor/x-circle": "close-circle",
+  "remix/add": "plus",
+  "remix/alert": "warning",
+  "remix/arrow-down": "arrow-down",
+  "remix/arrow-down-s": "chevron-down",
+  "remix/arrow-left": "arrow-left",
+  "remix/arrow-left-double": "chevrons-left",
+  "remix/arrow-left-s": "chevron-left",
+  "remix/arrow-right": "arrow-right",
+  "remix/arrow-right-double": "chevrons-right",
+  "remix/arrow-right-s": "chevron-right",
+  "remix/arrow-up": "arrow-up",
+  "remix/arrow-up-down": "arrow-up-down",
+  "remix/arrow-up-s": "chevron-up",
+  "remix/calendar": "calendar",
+  "remix/check": "check",
+  "remix/checkbox-blank-circle": "circle",
+  "remix/checkbox-circle": "success",
+  "remix/close": "close",
+  "remix/close-circle": "close-circle",
+  "remix/delete-bin": "trash",
+  "remix/download-2": "download",
+  "remix/draggable": "grip-vertical",
+  "remix/error-warning": "error",
+  "remix/expand-up-down": "chevrons-up-down",
+  "remix/external-link": "external-link",
+  "remix/eye": "eye",
+  "remix/eye-off": "eye-off",
+  "remix/file": "file",
+  "remix/file-copy": "copy",
+  "remix/filter": "filter",
+  "remix/home": "home",
+  "remix/image": "image",
+  "remix/information": "info",
+  "remix/layout-left": "sidebar",
+  "remix/link": "link",
+  "remix/loader-4": "loader",
+  "remix/lock": "lock",
+  "remix/mail": "mail",
+  "remix/menu": "menu",
+  "remix/more": "more-horizontal",
+  "remix/more-2": "more-vertical",
+  "remix/pause": "pause",
+  "remix/pencil": "edit",
+  "remix/phone": "phone",
+  "remix/play": "play",
+  "remix/refresh": "refresh",
+  "remix/search": "search",
+  "remix/settings-3": "settings",
+  "remix/share": "share",
+  "remix/shopping-cart": "cart",
+  "remix/star": "star",
+  "remix/subtract": "minus",
+  "remix/time": "clock",
+  "remix/upload-2": "upload",
+  "remix/user": "user",
+  "tabler/alert-circle": "error",
+  "tabler/alert-triangle": "warning",
+  "tabler/arrow-down": "arrow-down",
+  "tabler/arrow-left": "arrow-left",
+  "tabler/arrow-right": "arrow-right",
+  "tabler/arrow-up": "arrow-up",
+  "tabler/arrows-sort": "arrow-up-down",
+  "tabler/calendar": "calendar",
+  "tabler/check": "check",
+  "tabler/chevron-down": "chevron-down",
+  "tabler/chevron-left": "chevron-left",
+  "tabler/chevron-right": "chevron-right",
+  "tabler/chevron-up": "chevron-up",
+  "tabler/chevrons-left": "chevrons-left",
+  "tabler/chevrons-right": "chevrons-right",
+  "tabler/circle": "circle",
+  "tabler/circle-check": "success",
+  "tabler/circle-x": "close-circle",
+  "tabler/clock": "clock",
+  "tabler/copy": "copy",
+  "tabler/dots": "more-horizontal",
+  "tabler/dots-vertical": "more-vertical",
+  "tabler/download": "download",
+  "tabler/external-link": "external-link",
+  "tabler/eye": "eye",
+  "tabler/eye-off": "eye-off",
+  "tabler/file": "file",
+  "tabler/filter": "filter",
+  "tabler/grip-vertical": "grip-vertical",
+  "tabler/home": "home",
+  "tabler/info-circle": "info",
+  "tabler/layout-sidebar": "sidebar",
+  "tabler/link": "link",
+  "tabler/loader-2": "loader",
+  "tabler/lock": "lock",
+  "tabler/mail": "mail",
+  "tabler/menu-2": "menu",
+  "tabler/minus": "minus",
+  "tabler/pencil": "edit",
+  "tabler/phone": "phone",
+  "tabler/photo": "image",
+  "tabler/player-pause": "pause",
+  "tabler/player-play": "play",
+  "tabler/plus": "plus",
+  "tabler/refresh": "refresh",
+  "tabler/search": "search",
+  "tabler/selector": "chevrons-up-down",
+  "tabler/settings": "settings",
+  "tabler/share": "share",
+  "tabler/shopping-cart": "cart",
+  "tabler/star": "star",
+  "tabler/trash": "trash",
+  "tabler/upload": "upload",
+  "tabler/user": "user",
+  "tabler/x": "close"
+};
+// BASELINE_ICONS_END
+
+// A swapped glyph is named "<Set>/<icon>"; normalise to lower-kebab and look it up in the vocabulary (ADR-0020 A).
+const kebab = (s: string) => s.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+function iconName(layerName: string): string {
+  const placeholder = instance.findInstance(layerName, { traverseInstances: true });
+  if (!placeholder || placeholder.type !== "INSTANCE") return "";
+  const glyph = placeholder.children.find((c) => c.type === "INSTANCE");
+  if (!glyph || glyph.type !== "INSTANCE") return "";
+  const slash = glyph.name.indexOf("/");
+  if (slash < 0) return kebab(glyph.name);
+  const key = kebab(glyph.name.slice(0, slash)) + "/" + kebab(glyph.name.slice(slash + 1));
+  return BASELINE_SYSTEM_ICONS[key] ?? kebab(glyph.name.slice(slash + 1));
+}
+
+const label = instance.getString("Text");
+const variant = instance.getEnum("Variant", {
+  default: "default", secondary: "secondary", destructive: "destructive", outline: "outline", ghost: "ghost", link: "link",
+});
+const size = instance.getEnum("Size", { md: "md", sm: "sm" });
+// Icon (none | start | end, 2026-10-02) replaced the Show Left / Right Icon booleans
+const iconSide = instance.getEnum("Icon", { none: "none", start: "start", end: "end" });
+const showLeft = iconSide === "start";
+const showRight = iconSide === "end";
+// one "Icon" layer, on the side the Icon axis names, so a customised glyph carries over when the side changes
+const icon = showLeft || showRight ? iconName("Icon") : "";
+const args = [
+  `label: '${label}'`,
+  variant !== "default" ? `variant: '${variant}'` : "",
+  size !== "md" ? `size: '${size}'` : "",
+  icon ? `icon: '${icon}'` : "",
+  icon && !showLeft ? `icon_position: 'end'` : "",
+].filter(Boolean).join(", ");
+
+export default {
+  example: figma.code`{% render 'badge', ${args} %}`,
+  id: "shopify-badge",
+  metadata: { nestable: true },
+};

package/templates/shopify/snippets/badge.liquid

@@ -0,0 +1,111 @@
+{% doc %}
+  Baseline Badge as a snippet (spec: components/badge/spec.md). A compact label: a status, a count, a category.
+
+  Status is the scheme, never a variant: `scheme` adds the scheme class (color-success ...), so a success badge is the default
+  badge in the Success scheme.
+
+  @param {string} label - visible text (required)
+  @param {string} [variant] - default | secondary | destructive | outline | ghost | link
+  @param {string} [size] - md (default) | sm
+  @param {string} [scheme] - success | warning | error
+  @param {string} [icon] - Baseline system icon name (snippets/icon.liquid)
+  @param {string} [icon_position] - start (default) | end
+  @param {string} [href] - renders an <a>: the whole badge is the link
+  @param {string} [class] - extra classes
+
+  @example
+  {% render 'badge', label: 'Sale', variant: 'destructive', size: 'sm' %}
+  {% render 'badge', label: 'In stock', scheme: 'success', icon: 'check' %}
+{% enddoc %}
+
+{%- liquid
+  assign v = variant | default: 'default'
+  case v
+    when 'default', 'secondary', 'destructive', 'outline', 'ghost', 'link'
+    else
+      assign v = 'default'
+  endcase
+  assign s = size | default: 'md'
+  unless s == 'sm'
+    assign s = 'md'
+  endunless
+  assign classes = 'bl-badge bl-badge--' | append: v | append: ' bl-badge--' | append: s
+  if icon != blank
+    if icon_position == 'end'
+      assign classes = classes | append: ' bl-badge--icon-end'
+    else
+      assign classes = classes | append: ' bl-badge--icon-start'
+    endif
+  endif
+  comment
+    Shopify applies a scheme as the .color-<id> class (snippets/baseline-schemes.liquid, ADR-0007); the status
+    schemes' ids are success, warning and error.
+  endcomment
+  case scheme
+    when 'success', 'warning', 'error'
+      assign classes = classes | append: ' color-' | append: scheme
+  endcase
+  if class
+    assign classes = classes | append: ' ' | append: class
+  endif
+-%}
+{%- capture inner -%}
+  {%- if icon != blank and icon_position != 'end' -%}{% render 'icon', name: icon %}{%- endif -%}
+  {{- label | escape -}}
+  {%- if icon != blank and icon_position == 'end' -%}{% render 'icon', name: icon %}{%- endif -%}
+{%- endcapture -%}
+{%- if href != blank -%}
+  <a href="{{ href }}" class="{{ classes }}" data-slot="badge">{{ inner }}</a>
+{%- else -%}
+  <span class="{{ classes }}" data-slot="badge">{{ inner }}</span>
+{%- endif -%}
+
+{% stylesheet %}
+  /* Mirrors registry/src/ui/badge/badge.tsx. Colours from the scheme (--primary ...); geometry from the badge/<size>/*
+     tokens in baseline-tokens.liquid (ADR-0017); destructive is upstream's 10 % tint (Figma: Surface `destructive`). */
+  .bl-badge {
+    display: inline-flex;
+    width: fit-content;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    white-space: nowrap;
+    border: var(--bl-badge-border-width) solid transparent;
+    font-family: inherit;
+    font-weight: var(--bl-badge-font-weight);
+    text-decoration: none;
+    transition: background-color 150ms, color 150ms, border-color 150ms;
+  }
+  .bl-badge svg { flex-shrink: 0; pointer-events: none; }
+  .bl-badge:focus-visible {
+    outline: none;
+    border-color: var(--ring);
+    box-shadow: 0 0 0 var(--bl-control-ring-width) color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+
+  /* variants; hover only where the badge is a link, as upstream's [a]:hover */
+  .bl-badge--default { background-color: var(--primary); color: var(--primary-foreground); }
+  a.bl-badge--default:hover { background-color: color-mix(in oklab, var(--primary) 80%, transparent); }
+  .bl-badge--secondary { background-color: var(--secondary); color: var(--secondary-foreground); }
+  a.bl-badge--secondary:hover { background-color: color-mix(in oklab, var(--secondary) 80%, transparent); }
+  .bl-badge--destructive { background-color: color-mix(in oklab, var(--destructive) 10%, transparent); color: var(--destructive); }
+  a.bl-badge--destructive:hover { background-color: color-mix(in oklab, var(--destructive) 20%, transparent); }
+  .bl-badge--outline { border-color: var(--border); color: var(--foreground); }
+  a.bl-badge--outline:hover { background-color: var(--muted); color: var(--muted-foreground); }
+  .bl-badge--ghost { color: var(--foreground); }
+  a.bl-badge--ghost:hover { background-color: var(--muted); color: var(--muted-foreground); }
+  .bl-badge--link { color: var(--primary); text-underline-offset: 4px; }
+  a.bl-badge--link:hover { text-decoration: underline; }
+
+  /* sizes: one rule per Figma Size, every value a badge/<size>/* variable */
+  .bl-badge--md { height: var(--bl-badge-md-height); gap: var(--bl-badge-md-gap); padding: 0 var(--bl-badge-md-padding-x); border-radius: var(--bl-badge-md-radius); font-size: var(--bl-badge-md-font-size); line-height: var(--bl-badge-md-line-height); }
+  .bl-badge--sm { height: var(--bl-badge-sm-height); gap: var(--bl-badge-sm-gap); padding: 0 var(--bl-badge-sm-padding-x); border-radius: var(--bl-badge-sm-radius); font-size: var(--bl-badge-sm-font-size); line-height: var(--bl-badge-sm-line-height); }
+  .bl-badge--md svg { width: var(--bl-badge-md-icon-size); height: var(--bl-badge-md-icon-size); }
+  .bl-badge--sm svg { width: var(--bl-badge-sm-icon-size); height: var(--bl-badge-sm-icon-size); }
+  /* the icon side tightens by half the gap (upstream's pl-1.5 at md) */
+  .bl-badge--md.bl-badge--icon-start { padding-inline-start: var(--bl-badge-md-padding-x-icon); }
+  .bl-badge--md.bl-badge--icon-end { padding-inline-end: var(--bl-badge-md-padding-x-icon); }
+  .bl-badge--sm.bl-badge--icon-start { padding-inline-start: var(--bl-badge-sm-padding-x-icon); }
+  .bl-badge--sm.bl-badge--icon-end { padding-inline-end: var(--bl-badge-sm-padding-x-icon); }
+{% endstylesheet %}

package/templates/shopify/snippets/baseline-schemes.liquid

@@ -0,0 +1,44 @@
+{% comment %} Generated by tokens/build.mjs. Maps each color scheme to the Baseline CSS variables (ADR-0007). {% endcomment %}
+{% style %}
+{% for scheme in settings.color_schemes %}
+  .color-{{ scheme.id }} {
+    --background: {{ scheme.settings.background }};
+    --foreground: {{ scheme.settings.foreground }};
+    --card: {{ scheme.settings.card }};
+    --card-foreground: {{ scheme.settings.card_foreground }};
+    --popover: {{ scheme.settings.popover }};
+    --popover-foreground: {{ scheme.settings.popover_foreground }};
+    --primary: {{ scheme.settings.primary }};
+    --primary-foreground: {{ scheme.settings.primary_foreground }};
+    --secondary: {{ scheme.settings.secondary }};
+    --secondary-foreground: {{ scheme.settings.secondary_foreground }};
+    --muted: {{ scheme.settings.muted }};
+    --muted-foreground: {{ scheme.settings.muted_foreground }};
+    --accent: {{ scheme.settings.accent }};
+    --accent-foreground: {{ scheme.settings.accent_foreground }};
+    --destructive: {{ scheme.settings.destructive }};
+    --border: {{ scheme.settings.border }};
+    --input: {{ scheme.settings.input }};
+    --ring: {{ scheme.settings.ring | color_modify: 'alpha', 0.25 }};
+    --chart-1: {{ scheme.settings.chart_1 }};
+    --chart-2: {{ scheme.settings.chart_2 }};
+    --chart-3: {{ scheme.settings.chart_3 }};
+    --chart-4: {{ scheme.settings.chart_4 }};
+    --chart-5: {{ scheme.settings.chart_5 }};
+    --sidebar: {{ scheme.settings.sidebar }};
+    --sidebar-foreground: {{ scheme.settings.sidebar_foreground }};
+    --sidebar-primary: {{ scheme.settings.sidebar_primary }};
+    --sidebar-primary-foreground: {{ scheme.settings.sidebar_primary_foreground }};
+    --sidebar-accent: {{ scheme.settings.sidebar_accent }};
+    --sidebar-accent-foreground: {{ scheme.settings.sidebar_accent_foreground }};
+    --sidebar-border: {{ scheme.settings.sidebar_border }};
+    --sidebar-ring: {{ scheme.settings.sidebar_ring }};
+    --ring-invalid: {{ scheme.settings.destructive | color_modify: 'alpha', 0.2 }};
+    --overlay: #0000001a;
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+{% endfor %}
+{% endstyle %}