/** * @lablup/ui-common design tokens * * The 119 `--token-*` custom properties every component in this package * reads. This file is the token contract: renaming or removing an entry is * a breaking change, exactly like renaming a prop (see CONTRIBUTING.md). * * It also carries one block of element rules, at the end: the scrollbar. A * scrollbar is painted by the browser on a box this package does not own, so * there is no component to hang the rules on and a consumer that wants a * themed bar has nowhere to put one that every scrollable surface inherits. * The rest of the file is custom properties only. * * Colour and button values are the Lablup brand default, theme family * "orange", colour scheme "light", which is also the one theme this package * ships as a stylesheet (`styles/themes/orange-light.css` and its dark * counterpart). Structural tokens (spacing, radius, motion, type scale, focus * ring, z-index) are theme-independent and were taken from the source * product's `src/themes/base.css`. A handful of tokens that no theme ever * defines (e.g. `--token-colorTextQuaternary`, `--token-marginXXS`) are given * the same literal fallback value the component CSS already carries at its * call site. * * A product with its own visual identity defines its own `[data-theme]` * blocks over these 119 names and ships them itself, the way the source * product does with its five families. This package carries the mechanism and * one default, not a catalogue of somebody else's palettes. * * Every component also gives every token reference here its own inline * fallback, so a consumer that imports a component without this stylesheet * still gets a rendered (unthemed) result. Focus indicators are the one * exception, and deliberately so: see below. * * Those inline fallbacks are NOT all equal to the values above, and no single * theme would make them agree. The largest group is `--token-colorPrimary`, * written as `#8b5cf6` at 28 call sites, which is a `stained-light` accent * this package does not ship and does not agree with the `#ff7a00` declared * below. They were inherited verbatim from the source product, where they were * already dead code, since the token is always defined and the fallback never * applies. * * Consequence: importing a component WITHOUT this stylesheet renders, but not * in the documented default palette. Import `styles/base.css`. Aligning the * fallbacks is a deliberate visual change and is still out of scope. * * The exception, added for issue #7: a declaration that paints a focus * indicator carries NO colour literal. It reads * `var(--token-focusRingColor, var(--token-colorPrimary))`, or mixes the * accent with the text colour inline, and stops there. A fallback literal * cannot serve a focus ring, because WCAG 2.2 SC 1.4.11 requires 3:1 against * the surface the indicator lands on and a fixed value cannot know that * surface: the `#8b5cf6` these sites used to carry measures 3.85:1 in one * palette and the `#ff7a00` below measures 2.37:1. "Renders unthemed" and * "meets the contrast floor" are not both achievable from a constant, and for * an accessibility affordance the second one wins. Everywhere else the rule in * CONTRIBUTING.md stands unchanged: give the token a fallback. */ :root { --token-borderRadius: 0.375rem; --token-borderRadiusLG: 0.5rem; --token-borderRadiusSM: 0.25rem; --token-borderRadiusXL: 0.75rem; /* One height ladder for every form control, so a text field, a picker and a button standing next to each other in a filter row land on the same top and bottom edge. Only `Button` reads it today, at SM and LG; the middle rung is declared with them because a ladder missing its default is not a ladder, and the first control that needs a 40px box would otherwise invent a literal, which is the defect this replaces. rem-based like the rest of the scale, so controls grow with browser zoom (WCAG 1.4.4). */ --token-controlHeightSM: 2rem; /* 32px */ --token-controlHeight: 2.5rem; /* 40px */ --token-controlHeightLG: 2.75rem; /* 44px, the WCAG 2.1 touch target */ --token-boxShadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02); --token-boxShadowSecondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); --token-boxShadowTertiary: 0 1px 3px rgba(0, 0, 0, 0.1); --token-buttonActiveTransform: scale(0.97); --token-buttonBorderRadius: 0.375rem; --token-buttonHoverTransform: translateY(-1px); --token-buttonDangerBg: transparent; --token-buttonDangerBgActive: rgba(255, 77, 79, 0.2); --token-buttonDangerBgHover: rgba(255, 77, 79, 0.1); --token-buttonDangerBorder: 1px solid #c82333; --token-buttonDangerShadow: none; --token-buttonDangerText: #c82333; --token-buttonGhostBackdrop: none; --token-buttonGhostBg: transparent; --token-buttonGhostBgActive: #f5f5f5; --token-buttonGhostBgHover: rgba(255, 122, 0, 0.06); --token-buttonGhostBorder: 1px solid transparent; --token-buttonGhostBorderHover: 1px solid transparent; --token-buttonGhostShadow: none; --token-buttonGhostShadowHover: none; --token-buttonPrimaryBackdrop: none; --token-buttonPrimaryBg: var(--token-colorPrimary); --token-buttonPrimaryBgHover: #e86e00; --token-buttonPrimaryBorder: none; --token-buttonPrimaryShadow: 0 2px 4px rgba(255, 122, 0, 0.2); --token-buttonPrimaryShadowHover: 0 4px 8px rgba(255, 122, 0, 0.25); --token-buttonSecondaryBackdrop: none; --token-buttonSecondaryBg: transparent; --token-buttonSecondaryBgActive: #f5f5f5; --token-buttonSecondaryBgHover: rgba(255, 122, 0, 0.06); --token-buttonSecondaryBorder: 1px solid var(--token-colorBorder); --token-buttonSecondaryBorderHover: 1px solid rgba(255, 122, 0, 0.3); --token-buttonSecondaryShadow: none; --token-buttonSuccessBackdrop: none; --token-buttonSuccessBg: var(--token-colorSuccess); --token-buttonSuccessBgHover: #006654; --token-buttonSuccessBorder: none; --token-buttonSuccessShadow: 0 2px 4px rgba(0, 189, 155, 0.2); --token-colorBgContainer: #ffffff; --token-colorBgElevated: #ffffff; --token-colorBgLayout: #f5f5f5; --token-colorBgMask: rgba(0, 0, 0, 0.45); --token-colorBgTextActive: rgba(0, 0, 0, 0.08); --token-colorBgTextHover: rgba(0, 0, 0, 0.04); --token-colorBorder: #d9d9d9; --token-colorBorderSecondary: #e5e7eb; --token-colorFillQuaternary: #fafafa; --token-colorFillSecondary: #f3f4f6; --token-colorFillTertiary: #f9fafb; --token-colorError: #c82333; --token-colorInfo: #0066cc; --token-colorLink: #ff7a00; --token-colorLinkHover: #7c3aed; --token-colorPrimary: #ff7a00; --token-colorPrimaryActive: #cc6200; --token-colorPrimaryBg: rgba(255, 122, 0, 0.1); --token-colorPrimaryBgHover: rgba(255, 122, 0, 0.16); --token-colorPrimaryBorder: rgba(255, 122, 0, 0.2); --token-colorSuccess: #007a63; --token-colorSuccessActive: #005244; --token-colorSuccessBg: rgba(0, 189, 155, 0.05); --token-colorSuccessBorder: rgba(0, 189, 155, 0.4); --token-colorSuccessBorderHover: rgba(0, 189, 155, 0.6); --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15); --token-colorWarning: #9a5d00; --token-colorText: #141414; /* Both #767676 rather than the #bfbfbf a disabled or placeholder value is * usually given: that measures 2.2:1 on white, and text a reader is expected * to read (a placeholder naming the field, a disabled value explaining why it * cannot be changed) is not exempt from the 4.5:1 floor. */ --token-colorTextDisabled: #767676; --token-colorTextPlaceholder: #767676; --token-colorTextQuaternary: #bfbfbf; --token-colorTextSecondary: #595959; --token-colorTextTertiary: #737373; /* Not --token-colorPrimary. That accent is chosen for brand and measures * 2.37:1 against --token-colorFillSecondary here, under the 3:1 floor WCAG * 2.2 SC 1.4.11 sets for the visual indicator of a component state. This is * color-mix(in srgb, #ff7a00 70%, #141414) resolved to a literal, which * measures 4.18:1 at its worst. It is written resolved rather than as a * color-mix() call because a custom property holds an unparsed token stream: * an unsupported color-mix() would substitute successfully and only then * invalidate the outline shorthand at computed-value time, leaving * outline-style: none and no ring at all, with no var() fallback firing. */ --token-focusRingColor: #b95b06; --token-focusRingOffset: 2px; --token-focusRingStyle: solid; --token-focusRingWidth: 2px; --token-fontFamily: "Ubuntu Sans", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --token-fontSize: 0.875rem; --token-fontSizeLG: 1rem; --token-fontSizeSM: 0.75rem; --token-fontSizeXL: 1.25rem; /* The step above XL, for a value that is displayed rather than read as a heading. The ladder had XXS but no XXL, so a component with a large numeric readout had nothing to reach for and took a heading token instead. Both products that define this name already declare 1.5rem. */ --token-fontSizeXXL: 1.5rem; --token-fontSizeXXS: 0.5rem; --token-marginXXS: 4px; --token-padding: 0.75rem; --token-paddingLG: 1.5rem; --token-paddingMD: 1rem; --token-paddingSM: 0.5rem; --token-paddingXL: 2rem; --token-paddingXS: 0.25rem; --token-paddingXXS: 0.125rem; /* One size for every theme. A theme family may restyle the track and the thumb, but must not restate the size: `[data-theme="..."] ::-webkit-scrollbar` outranks the global rule on specificity, so a wider bar declared there cannot be corrected from here, and a sidebar rail is the surface that pays for it. `scrollbar.test.ts` keeps it that way. */ --token-scrollbarSize: 0.5rem; /* 8px */ --token-scrollbarRadius: 0.25rem; /* 4px */ --token-motionDurationFast: 0.1s; --token-motionDurationMid: 0.2s; --token-motionDurationSlow: 0.3s; --token-themeTransitionDuration: 0.25s; --token-themeTransitionTiming: ease-in-out; --token-tabActiveBg: rgba(255, 122, 0, 0.1); --token-tabFocusShadow: 0 0 0 3px rgba(255, 122, 0, 0.15); --token-tabHoverBg: var(--token-colorFillSecondary); --token-zIndexDrawer: 1100; --token-zIndexDrawerContent: 1101; --token-zIndexPopover: 1150; --token-zIndexTooltip: 1300; /* Type scale (source `src/themes/base.css` :root, which wins over the call-site fallback in the source product today). */ --token-fontSizeHeading1: 2rem; --token-fontSizeHeading2: 1.5rem; --token-fontSizeHeading3: 1.25rem; --token-fontSizeHeading4: 1rem; --token-fontSizeDisplay4: 1.75rem; /* Referenced by components but defined by no source theme, so the call-site fallback is what renders today and is carried here verbatim. */ --token-boxShadowDrawerRight: -4px 0 20px rgba(0, 0, 0, 0.15); --token-buttonPrimaryBgActive: var(--token-colorPrimaryActive); --token-buttonSuccessBgActive: var(--token-colorSuccessActive); --token-buttonDangerShadowHover: var(--token-buttonDangerShadow); --token-buttonSuccessShadowHover: var(--token-buttonSuccessShadow); --token-buttonSecondaryShadowHover: 0 2px 6px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8); } /* ============================================ Scrollbar The only element rules in this file. Both halves are needed because the two engines expose different surfaces, and neither one alone themes a bar. ============================================ */ /* Firefox has no ::-webkit pseudo-elements. Both properties are inherited, so declaring them once on the root themes every scrollable descendant, and a surface that hides its own bar (see `Tabs.css`) still overrides them locally. */ :root { scrollbar-width: thin; scrollbar-color: var(--token-colorBorder, #d9d9d9) transparent; } ::-webkit-scrollbar { width: var(--token-scrollbarSize, 0.5rem); height: var(--token-scrollbarSize, 0.5rem); } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--token-colorBorder, #d9d9d9); border-radius: var(--token-scrollbarRadius, 0.25rem); } ::-webkit-scrollbar-thumb:hover { background-color: var(--token-colorTextTertiary, #737373); }