/*! @iraunak/brand v0.1.0 — built design system bundle. * Source of truth: iclone/design-system/src/*. Do not edit this file directly. * Consume: + . */ /* ===== src/tokens.css ===== */ /* ===================================================================== @iraunak/brand — PRIMITIVES (theme-agnostic) --------------------------------------------------------------------- The raw palette + scales. Do NOT reference these directly in product CSS — use the role tokens defined in the theme files (--color-*). Primitives never change; themes remap role tokens onto them. ===================================================================== */ :root { /* --- Brand teal ramp (the canonical hue family) --- */ --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-300: #5eead4; --teal-400: #2dd4bf; --teal-500: #14b8a6; /* light-theme primary (igniteapp) */ --teal-600: #0d9488; --teal-700: #0f766e; --teal-800: #115e59; --teal-900: #134e4a; --teal-bright: #00e5b4; /* dark-theme primary (operance) */ /* --- Light neutrals --- */ --gray-0: #ffffff; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* --- Dark neutrals (operance) --- */ --ink-bg: #0a0c0f; --ink-surface: #111417; --ink-surface2: #161b22; --ink-border: #1e2329; --ink-border2: #2a2f38; --ink-text: #e8eaf0; --ink-muted: #606876; --ink-subtle: #9aa2b4; /* --- Semantic (shared, theme-agnostic) --- */ --color-success: #10b981; --color-warning: #f59e0b; --color-error: #ef4444; /* --- Typography --- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", monospace; /* Fluid type scale (clamp-based, lifted from operance) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: clamp(1.5rem, 4vw, 2.375rem); --text-4xl: clamp(2rem, 5vw, 3rem); --text-hero: clamp(2.5rem, 6.8vw, 4.875rem); --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 800; --leading-tight: 1.1; --leading-snug: 1.4; --leading-base: 1.6; --leading-relaxed: 1.75; /* --- Spacing scale --- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; /* --- Border radius --- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-pill: 100px; /* --- Shadow --- */ --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); /* --- Motion --- */ --transition: 0.2s ease; --transition-fast: 0.15s ease; /* --- Layout --- */ --container-max: 1200px; --container-pad: clamp(1rem, 4vw, 2rem); } /* ===== src/theme-light.css ===== */ /* ===================================================================== @iraunak/brand — LIGHT THEME (role tokens) --------------------------------------------------------------------- Default theme. Maps role tokens (the contract product CSS uses) onto light primitives. Applied to :root and [data-theme="light"]. ===================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; /* Surfaces */ --color-bg: var(--gray-50); --color-surface: var(--gray-0); --color-surface-2: var(--gray-100); --color-border: var(--gray-200); --color-border-strong: var(--gray-300); /* Text */ --color-text: var(--gray-800); --color-text-muted: var(--gray-600); --color-text-subtle: var(--gray-400); --color-heading: var(--gray-900); /* Primary (the one teal, tuned for light backgrounds) */ --color-primary: var(--teal-500); --color-primary-hover: var(--teal-600); --color-primary-strong: var(--teal-700); --color-primary-soft: var(--teal-300); --color-primary-contrast: #ffffff; --color-primary-tint: var(--teal-50); /* low-opacity highlight bg */ --color-primary-border: rgba(20, 184, 166, 0.22); --color-primary-ring: rgba(20, 184, 166, 0.28); /* focus / glow */ } /* ===== src/theme-dark.css ===== */ /* ===================================================================== @iraunak/brand — DARK THEME (role tokens) --------------------------------------------------------------------- Maps the same role tokens onto dark primitives (operance look). Applied via . ===================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --color-bg: var(--ink-bg); --color-surface: var(--ink-surface); --color-surface-2: var(--ink-surface2); --color-border: var(--ink-border); --color-border-strong: var(--ink-border2); /* Text — tuned for readable contrast on the near-black bg. The original operance muted (#606876) was ~3:1 and failed WCAG AA for body copy; these pass AA comfortably (muted ~11:1, subtle ~8:1). */ --color-text: var(--ink-text); /* #e8eaf0, ~15:1 */ --color-text-muted: #c2c8d2; /* secondary body text */ --color-text-subtle: #a7aebd; /* de-emphasised / captions */ --color-heading: var(--ink-text); /* Primary (the same teal, tuned brighter for dark backgrounds) */ --color-primary: var(--teal-bright); --color-primary-hover: var(--teal-300); --color-primary-strong: var(--teal-400); --color-primary-soft: var(--teal-300); --color-primary-contrast: var(--ink-bg); --color-primary-tint: rgba(0, 229, 180, 0.08); --color-primary-border: rgba(0, 229, 180, 0.22); --color-primary-ring: rgba(0, 229, 180, 0.28); } /* ===== src/base.css ===== */ /* ===================================================================== @iraunak/brand — BASE --------------------------------------------------------------------- Reset + base element styling using role tokens. Sensible defaults for a new product; a product stylesheet loads AFTER the bundle and can override any of this. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-sm); color: var(--color-heading); font-weight: var(--weight-bold); line-height: var(--leading-tight); } p { margin: 0 0 var(--space-sm); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); } img, svg, video { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } code, pre { font-family: var(--font-mono); font-size: 0.9em; } /* ===== src/components.css ===== */ /* ===================================================================== @iraunak/brand — COMPONENTS --------------------------------------------------------------------- A small, deliberate core set. Names follow the Open UI component taxonomy (button, navigation, card, badge, field). Every component references role tokens only, so it works in light + dark unchanged, and styles all interactive states (hover / focus-visible / active / disabled). Namespaced `ds-` so it never collides with a product's existing classes. Anatomy + usage: ../COMPONENTS.md. Live preview: ../gallery.html. ===================================================================== */ /* --- Layout --- */ .ds-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: var(--container-pad); } /* --- Section (the separation rule) ------------------------------------ A section background may ONLY be a neutral surface or the single primary tint. Never multi-hue gradient bands. Alternate base/alt for rhythm; use --tint for at most one emphasis section per page. --------------------------------------------------------------------- */ .ds-section { padding-block: var(--space-2xl); background: var(--color-surface); } .ds-section--alt { background: var(--color-surface-2); } .ds-section--base { background: var(--color-bg); } .ds-section--tint { background: var(--color-primary-tint); } .ds-section--divide { border-top: 1px solid var(--color-border); } /* --- Button ----------------------------------------------------------- Variants: --primary (default look is secondary), --secondary, --outline Sizes: --sm, (default), --lg --------------------------------------------------------------------- */ .ds-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: transparent; color: var(--color-text); font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .ds-button:hover { border-color: var(--color-primary); color: var(--color-primary); } .ds-button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .ds-button:active { transform: translateY(1px); } .ds-button:disabled, .ds-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .ds-button--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); } .ds-button--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-primary-contrast); box-shadow: 0 8px 28px var(--color-primary-ring); transform: translateY(-2px); } .ds-button--primary:active { transform: translateY(0); } .ds-button--secondary { /* the default look; explicit alias */ } .ds-button--outline { border-color: var(--color-border-strong); color: var(--color-text-muted); } .ds-button--sm { min-height: 36px; padding: 0 var(--space-sm); font-size: var(--text-xs); } .ds-button--lg { min-height: 52px; padding: 0 var(--space-lg); font-size: var(--text-base); } /* --- Navigation ------------------------------------------------------- A horizontal nav bar. Mark the current page link with aria-current="page" (preferred) or .is-active. --------------------------------------------------------------------- */ .ds-navigation { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .ds-navigation__brand { display: inline-flex; align-items: center; gap: var(--space-xs); margin-right: auto; color: var(--color-heading); font-weight: var(--weight-semibold); text-decoration: none; } .ds-navigation__link { color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .ds-navigation__link:hover { color: var(--color-primary); } .ds-navigation__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; } .ds-navigation__link[aria-current="page"], .ds-navigation__link.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* --- Card --- */ .ds-card { padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .ds-card--hover:hover { border-color: var(--color-primary-border); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .ds-card--highlight { background: var(--color-primary-tint); border-color: var(--color-primary-border); } /* --- Badge --- */ .ds-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid var(--color-primary-border); border-radius: var(--radius-md); background: var(--color-primary-tint); color: var(--color-primary-strong); font-size: var(--text-xs); font-weight: var(--weight-semibold); } .ds-badge--success { border-color: var(--color-success); color: var(--color-success); background: transparent; } .ds-badge--warning { border-color: var(--color-warning); color: var(--color-warning); background: transparent; } .ds-badge--error { border-color: var(--color-error); color: var(--color-error); background: transparent; } /* --- Field (label + input + hint) --- */ .ds-field { display: flex; flex-direction: column; gap: 6px; } .ds-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); } .ds-field__hint { font-size: var(--text-xs); color: var(--color-text-subtle); } .ds-input { width: 100%; min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ds-input::placeholder { color: var(--color-text-subtle); } .ds-input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); } .ds-input:disabled { opacity: 0.5; cursor: not-allowed; } /* --- Icon (canonical line-icon treatment) --- */ .ds-icon { width: 2.25rem; height: 2.25rem; color: var(--color-primary); stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; fill: none; display: inline-block; vertical-align: middle; } .ds-icon--lg { width: 3rem; height: 3rem; } .ds-icon--sm { width: 1.5rem; height: 1.5rem; }