@tabula/ui-theme/lib/index.mjs

Theme provider for the UI kit

// src/layers.css.ts
var layers = { components: "tbl--components", reset: "tbl--reset" };

// src/theme.css.ts
var vars = { colors: { accent: { "10": "var(--tbl--colors--accent--10)", "30": "var(--tbl--colors--accent--30)", "100": "var(--tbl--colors--accent--100)" }, accentAlpha: { "10": "var(--tbl--colors--accent--A10)", "15": "var(--tbl--colors--accent--A15)", "40": "var(--tbl--colors--accent--A40)", "60": "var(--tbl--colors--accent--A60)", "70": "var(--tbl--colors--accent--A70)" }, accentSecondaryGrey: { "400": "var(--tbl--colors--accent-secondary-grey--400)", "600": "var(--tbl--colors--accent-secondary-grey--600)", "800": "var(--tbl--colors--accent-secondary-grey--800)" }, accentShades: { secondary1: "var(--tbl--colors--accent-shades--secondary-1)", secondary2: "var(--tbl--colors--accent-shades--secondary-2)", secondary3: "var(--tbl--colors--accent-shades--secondary-3)", secondary4: "var(--tbl--colors--accent-shades--secondary-4)" }, background: { canvas: "var(--tbl--colors--background--canvas)", controlsDetails: "var(--tbl--colors--background--controls-details)", data: "var(--tbl--colors--background--data)", dropdown: "var(--tbl--colors--background--dropdown)", panels: "var(--tbl--colors--background--panels)", primaryContent: "var(--tbl--colors--background--primary-content)", table: "var(--tbl--colors--background--table)" }, status: { error: "var(--tbl--colors--status--error)", idle: "var(--tbl--colors--status--idle)", running: "var(--tbl--colors--status--running)", success: "var(--tbl--colors--status--success)", warning: "var(--tbl--colors--status--warning)" }, borderControl: { canvasFlowPath: "var(--tbl--colors--border-control--canvas-flow-path)", dangerFocus: "var(--tbl--colors--border-control--danger-focus)", "default": "var(--tbl--colors--border-control--default)", error: "var(--tbl--colors--border-control--error)", errorFocus: "var(--tbl--colors--border-control--error-focus)", focus2: "var(--tbl--colors--border-control--focus-2)", focus: "var(--tbl--colors--border-control--focus)", hover: "var(--tbl--colors--border-control--hover)", selection: "var(--tbl--colors--border-control--selection)", warning: "var(--tbl--colors--border-control--warning)", warningFocus: "var(--tbl--colors--border-control--warning-focus)" }, brand: { postgres: "var(--tbl--colors--brand--postgres)", salesforce: "var(--tbl--colors--brand--salesforce)", snowflake: "var(--tbl--colors--brand--snowflake)", tabulaDrive: "var(--tbl--colors--brand--tabula-drive)", tomatDrive: "var(--tbl--colors--brand--tomat-drive)" }, chart: { "0": "var(--tbl--colors--chart--0)", "1": "var(--tbl--colors--chart--1)", "2": "var(--tbl--colors--chart--2)", "3": "var(--tbl--colors--chart--3)", "4": "var(--tbl--colors--chart--4)", "5": "var(--tbl--colors--chart--5)", "6": "var(--tbl--colors--chart--6)", "7": "var(--tbl--colors--chart--7)", "8": "var(--tbl--colors--chart--8)", "9": "var(--tbl--colors--chart--9)", "10": "var(--tbl--colors--chart--10)", "11": "var(--tbl--colors--chart--11)", "12": "var(--tbl--colors--chart--12)", "13": "var(--tbl--colors--chart--13)", "14": "var(--tbl--colors--chart--14)", "15": "var(--tbl--colors--chart--15)", "16": "var(--tbl--colors--chart--16)", "17": "var(--tbl--colors--chart--17)", "18": "var(--tbl--colors--chart--18)", "19": "var(--tbl--colors--chart--19)", "20": "var(--tbl--colors--chart--20)", "21": "var(--tbl--colors--chart--21)", "22": "var(--tbl--colors--chart--22)", "23": "var(--tbl--colors--chart--23)", "24": "var(--tbl--colors--chart--24)", "25": "var(--tbl--colors--chart--25)", "26": "var(--tbl--colors--chart--26)" }, code: { backgroundIconData: "var(--tbl--colors--code--background-icon-data)", backgroundIconFunction: "var(--tbl--colors--code--background-icon-function)", backgroundRegexHelpLetters: "var(--tbl--colors--code--background-regex-help-letters)", columnBackground: "var(--tbl--colors--code--column-background)", "function": "var(--tbl--colors--code--function)", functionOutside: "var(--tbl--colors--code--function-outside)", numbers: "var(--tbl--colors--code--numbers)", numbersOutside: "var(--tbl--colors--code--numbers-outside)", regex: "var(--tbl--colors--code--regex)", sql: "var(--tbl--colors--code--sql)", stringLight: "var(--tbl--colors--code--string-light)", stringLightOutsideFocus: "var(--tbl--colors--code--string-light-outside-focus)" }, codeColumns: { "0": "var(--tbl--colors--code-columns--0)", "1": "var(--tbl--colors--code-columns--1)", "2": "var(--tbl--colors--code-columns--2)", "3": "var(--tbl--colors--code-columns--3)", "4": "var(--tbl--colors--code-columns--4)", "5": "var(--tbl--colors--code-columns--5)", "6": "var(--tbl--colors--code-columns--6)" }, columnMenu: { press: "var(--tbl--colors--column-menu--press)", hover: "var(--tbl--colors--column-menu--hover)" }, content: { primary: "var(--tbl--colors--content--primary)", secondary: "var(--tbl--colors--content--secondary)", tertiary: "var(--tbl--colors--content--tertiary)", disabled: "var(--tbl--colors--content--disabled)", disabledLight: "var(--tbl--colors--content--disabled-light)", contrast: "var(--tbl--colors--content--contrast)", contrastSecondary: "var(--tbl--colors--content--contrast-secondary)", contrastTertiary: "var(--tbl--colors--content--contrast-tertiary)", contrastDisabled: "var(--tbl--colors--content--contrast-disabled)", accentActive: "var(--tbl--colors--content--accent-active)", accentActiveHover: "var(--tbl--colors--content--accent-active-hover)", counting: "var(--tbl--colors--content--counting)", placeholder: "var(--tbl--colors--content--placeholder)", success: "var(--tbl--colors--content--success)", warning: "var(--tbl--colors--content--warning)", warningLarge: "var(--tbl--colors--content--warning-large)", error: "var(--tbl--colors--content--error)" }, fillControl: { accentSecondary: "var(--tbl--colors--fill-control--accent-secondary)", ai: { from: "var(--tbl--colors--fill-control--ai--from)", to: "var(--tbl--colors--fill-control--ai--to)" }, aiPrimaryHover: { from: "var(--tbl--colors--fill-control--ai-primary-hover--from)", to: "var(--tbl--colors--fill-control--ai-primary-hover--to)" }, aiSecondaryHover: { from: "var(--tbl--colors--fill-control--ai-secondary-hover--from)", to: "var(--tbl--colors--fill-control--ai-secondary-hover--to)" }, aiPrimaryPressed: { from: "var(--tbl--colors--fill-control--ai-primary-pressed--from)", to: "var(--tbl--colors--fill-control--ai-primary-pressed--to)" }, aiSecondaryPressed: { from: "var(--tbl--colors--fill-control--ai-secondary-pressed--from)", to: "var(--tbl--colors--fill-control--ai-secondary-pressed--to)" }, btnDanger: "var(--tbl--colors--fill-control--btn-danger)", btnDangerHover: "var(--tbl--colors--fill-control--btn-danger-hover)", btnDangerPressed: "var(--tbl--colors--fill-control--btn-danger-pressed)", btnDisabled: "var(--tbl--colors--fill-control--btn-disabled)", btnPrimary: "var(--tbl--colors--fill-control--btn-primary)", btnPrimaryHover: "var(--tbl--colors--fill-control--btn-primary-hover)", btnPrimaryPressed: "var(--tbl--colors--fill-control--btn-primary-pressed)", checkbox: "var(--tbl--colors--fill-control--checkbox)" }, icons: { ai: { primary: { from: "var(--tbl--colors--icons--ai--primary--from)", to: "var(--tbl--colors--icons--ai--primary--to)" }, secondary: { from: "var(--tbl--colors--icons--ai--secondary--from)", to: "var(--tbl--colors--icons--ai--secondary--to)" } }, clean: { primary: "var(--tbl--colors--icons--clean--primary)", secondary: "var(--tbl--colors--icons--clean--secondary)" }, disabled: { primary: "var(--tbl--colors--icons--disabled--primary)", secondary: "var(--tbl--colors--icons--disabled--secondary)" }, enrich: { primary: "var(--tbl--colors--icons--enrich--primary)", secondary: "var(--tbl--colors--icons--enrich--secondary)", tertiary: "var(--tbl--colors--icons--enrich--tertiary)" }, group: { clean: "var(--tbl--colors--icons--group--clean)", transformation: "var(--tbl--colors--icons--group--transformation)" }, misc: { folder: "var(--tbl--colors--icons--misc--folder)" }, output: { primary: "var(--tbl--colors--icons--output--primary)", secondary: "var(--tbl--colors--icons--output--secondary)" }, source: { primary: "var(--tbl--colors--icons--source--primary)", secondary: "var(--tbl--colors--icons--source--secondary)" }, tomat: { primary: "var(--tbl--colors--icons--tomat--primary)", secondary: "var(--tbl--colors--icons--tomat--secondary)" }, transformation: { primary: "var(--tbl--colors--icons--transformation--primary)", secondary: "var(--tbl--colors--icons--transformation--secondary)", tertiary: "var(--tbl--colors--icons--transformation--tertiary)" } }, indexed: { "0": "var(--tbl--colors--indexed--0)", "1": "var(--tbl--colors--indexed--1)", "2": "var(--tbl--colors--indexed--2)", "3": "var(--tbl--colors--indexed--3)", "4": "var(--tbl--colors--indexed--4)", "5": "var(--tbl--colors--indexed--5)", "6": "var(--tbl--colors--indexed--6)", "7": "var(--tbl--colors--indexed--7)", "8": "var(--tbl--colors--indexed--8)", "9": "var(--tbl--colors--indexed--9)", "10": "var(--tbl--colors--indexed--10)", "11": "var(--tbl--colors--indexed--11)", "12": "var(--tbl--colors--indexed--12)", "13": "var(--tbl--colors--indexed--13)" }, neutral: { "0": "var(--tbl--colors--neutral--0)", "30": "var(--tbl--colors--neutral--30)", "50": "var(--tbl--colors--neutral--50)", "100": "var(--tbl--colors--neutral--100)", "150": "var(--tbl--colors--neutral--150)", "200": "var(--tbl--colors--neutral--200)", "300": "var(--tbl--colors--neutral--300)", "500": "var(--tbl--colors--neutral--500)", "600": "var(--tbl--colors--neutral--600)", "800": "var(--tbl--colors--neutral--800)", "1000": "var(--tbl--colors--neutral--1000)" }, neutralAlpha: { "3": "var(--tbl--colors--neutral--A3)", "5": "var(--tbl--colors--neutral--A5)", "7": "var(--tbl--colors--neutral--A7)", "10": "var(--tbl--colors--neutral--A10)", "15": "var(--tbl--colors--neutral--A15)", "20": "var(--tbl--colors--neutral--A20)", "40": "var(--tbl--colors--neutral--A40)" }, table: { labelPreview: "var(--tbl--colors--table--label-preview)", backgroundHeader: "var(--tbl--colors--table--background-header)", backgroundHeaderHover: "var(--tbl--colors--table--background-header-hover)", borderHeader: "var(--tbl--colors--table--border-header)", borderCells: "var(--tbl--colors--table--border-cells)", backgroundCells: "var(--tbl--colors--table--background-cells)", labelNew: "var(--tbl--colors--table--label-new)", borderNew: "var(--tbl--colors--table--border-new)", backgroundNew: "var(--tbl--colors--table--background-new)", labelRemove: "var(--tbl--colors--table--label-remove)", borderRemove: "var(--tbl--colors--table--border-remove)", backgroundRemove: "var(--tbl--colors--table--background-remove)", selectionLabel: "var(--tbl--colors--table--selection-label)", borderSelection: "var(--tbl--colors--table--border-selection)", backgroundSelection: "var(--tbl--colors--table--background-selection)", sourceLabel: "var(--tbl--colors--table--source-label)", borderSource: "var(--tbl--colors--table--border-source)", backgroundSource: "var(--tbl--colors--table--background-source)" }, whiteAlpha: { "10": "var(--tbl--colors--white--A10)", "15": "var(--tbl--colors--white--A15)", "20": "var(--tbl--colors--white--A20)", "30": "var(--tbl--colors--white--A30)", "50": "var(--tbl--colors--white--A50)", "70": "var(--tbl--colors--white--A70)", "80": "var(--tbl--colors--white--A80)" }, shadow: { "4": "var(--tbl--colors--shadow--4)", "6": "var(--tbl--colors--shadow--6)", "8": "var(--tbl--colors--shadow--8)", "12": "var(--tbl--colors--shadow--12)", "16": "var(--tbl--colors--shadow--16)" } }, duration: { fast: { "1": "var(--tbl--duration--fast--1)", "2": "var(--tbl--duration--fast--2)" }, moderate: { "1": "var(--tbl--duration--moderate--1)", "2": "var(--tbl--duration--moderate--2)" }, slow: { "1": "var(--tbl--duration--slow--1)", "2": "var(--tbl--duration--slow--2)" } }, easing: { standard: { productive: "var(--tbl--easing--standard--productive)", expressive: "var(--tbl--easing--standard--expressive)" }, entrance: { productive: "var(--tbl--easing--entrance--productive)", expressive: "var(--tbl--easing--entrance--expressive)" }, exit: { productive: "var(--tbl--easing--exit--productive)", expressive: "var(--tbl--easing--exit--expressive)" } }, fonts: { sansSerif: { bold12: { font: "var(--tbl--fonts--sans-serif--bold-12--font)", fontFamily: "var(--tbl--fonts--sans-serif--bold-12--font-family)", fontSize: "var(--tbl--fonts--sans-serif--bold-12--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--bold-12--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--bold-12--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--bold-12--line-height)", textTransform: "var(--tbl--fonts--sans-serif--bold-12--text-transform)" }, bold10: { font: "var(--tbl--fonts--sans-serif--bold-10--font)", fontFamily: "var(--tbl--fonts--sans-serif--bold-10--font-family)", fontSize: "var(--tbl--fonts--sans-serif--bold-10--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--bold-10--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--bold-10--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--bold-10--line-height)", textTransform: "var(--tbl--fonts--sans-serif--bold-10--text-transform)" }, semiBold18: { font: "var(--tbl--fonts--sans-serif--semi-bold-18--font)", fontFamily: "var(--tbl--fonts--sans-serif--semi-bold-18--font-family)", fontSize: "var(--tbl--fonts--sans-serif--semi-bold-18--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--semi-bold-18--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--semi-bold-18--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--semi-bold-18--line-height)", textTransform: "var(--tbl--fonts--sans-serif--semi-bold-18--text-transform)" }, semiBold14: { font: "var(--tbl--fonts--sans-serif--semi-bold-14--font)", fontFamily: "var(--tbl--fonts--sans-serif--semi-bold-14--font-family)", fontSize: "var(--tbl--fonts--sans-serif--semi-bold-14--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--semi-bold-14--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--semi-bold-14--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--semi-bold-14--line-height)", textTransform: "var(--tbl--fonts--sans-serif--semi-bold-14--text-transform)" }, semiBold12: { font: "var(--tbl--fonts--sans-serif--semi-bold-12--font)", fontFamily: "var(--tbl--fonts--sans-serif--semi-bold-12--font-family)", fontSize: "var(--tbl--fonts--sans-serif--semi-bold-12--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--semi-bold-12--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--semi-bold-12--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--semi-bold-12--line-height)", textTransform: "var(--tbl--fonts--sans-serif--semi-bold-12--text-transform)" }, semiBold10: { font: "var(--tbl--fonts--sans-serif--semi-bold-10--font)", fontFamily: "var(--tbl--fonts--sans-serif--semi-bold-10--font-family)", fontSize: "var(--tbl--fonts--sans-serif--semi-bold-10--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--semi-bold-10--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--semi-bold-10--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--semi-bold-10--line-height)", textTransform: "var(--tbl--fonts--sans-serif--semi-bold-10--text-transform)" }, medium32: { font: "var(--tbl--fonts--sans-serif--medium-32--font)", fontFamily: "var(--tbl--fonts--sans-serif--medium-32--font-family)", fontSize: "var(--tbl--fonts--sans-serif--medium-32--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--medium-32--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--medium-32--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--medium-32--line-height)", textTransform: "var(--tbl--fonts--sans-serif--medium-32--text-transform)" }, medium24: { font: "var(--tbl--fonts--sans-serif--medium-24--font)", fontFamily: "var(--tbl--fonts--sans-serif--medium-24--font-family)", fontSize: "var(--tbl--fonts--sans-serif--medium-24--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--medium-24--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--medium-24--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--medium-24--line-height)", textTransform: "var(--tbl--fonts--sans-serif--medium-24--text-transform)" }, medium18: { font: "var(--tbl--fonts--sans-serif--medium-18--font)", fontFamily: "var(--tbl--fonts--sans-serif--medium-18--font-family)", fontSize: "var(--tbl--fonts--sans-serif--medium-18--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--medium-18--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--medium-18--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--medium-18--line-height)", textTransform: "var(--tbl--fonts--sans-serif--medium-18--text-transform)" }, medium14: { font: "var(--tbl--fonts--sans-serif--medium-14--font)", fontFamily: "var(--tbl--fonts--sans-serif--medium-14--font-family)", fontSize: "var(--tbl--fonts--sans-serif--medium-14--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--medium-14--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--medium-14--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--medium-14--line-height)", textTransform: "var(--tbl--fonts--sans-serif--medium-14--text-transform)" }, medium12: { font: "var(--tbl--fonts--sans-serif--medium-12--font)", fontFamily: "var(--tbl--fonts--sans-serif--medium-12--font-family)", fontSize: "var(--tbl--fonts--sans-serif--medium-12--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--medium-12--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--medium-12--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--medium-12--line-height)", textTransform: "var(--tbl--fonts--sans-serif--medium-12--text-transform)" }, medium10: { font: "var(--tbl--fonts--sans-serif--medium-10--font)", fontFamily: "var(--tbl--fonts--sans-serif--medium-10--font-family)", fontSize: "var(--tbl--fonts--sans-serif--medium-10--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--medium-10--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--medium-10--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--medium-10--line-height)", textTransform: "var(--tbl--fonts--sans-serif--medium-10--text-transform)" }, regular24: { font: "var(--tbl--fonts--sans-serif--regular-24--font)", fontFamily: "var(--tbl--fonts--sans-serif--regular-24--font-family)", fontSize: "var(--tbl--fonts--sans-serif--regular-24--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--regular-24--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--regular-24--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--regular-24--line-height)", textTransform: "var(--tbl--fonts--sans-serif--regular-24--text-transform)" }, regular18: { font: "var(--tbl--fonts--sans-serif--regular-18--font)", fontFamily: "var(--tbl--fonts--sans-serif--regular-18--font-family)", fontSize: "var(--tbl--fonts--sans-serif--regular-18--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--regular-18--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--regular-18--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--regular-18--line-height)", textTransform: "var(--tbl--fonts--sans-serif--regular-18--text-transform)" }, regular14: { font: "var(--tbl--fonts--sans-serif--regular-14--font)", fontFamily: "var(--tbl--fonts--sans-serif--regular-14--font-family)", fontSize: "var(--tbl--fonts--sans-serif--regular-14--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--regular-14--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--regular-14--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--regular-14--line-height)", textTransform: "var(--tbl--fonts--sans-serif--regular-14--text-transform)" }, regular12: { font: "var(--tbl--fonts--sans-serif--regular-12--font)", fontFamily: "var(--tbl--fonts--sans-serif--regular-12--font-family)", fontSize: "var(--tbl--fonts--sans-serif--regular-12--font-size)", fontWeight: "var(--tbl--fonts--sans-serif--regular-12--font-weight)", letterSpacing: "var(--tbl--fonts--sans-serif--regular-12--letter-spacing)", lineHeight: "var(--tbl--fonts--sans-serif--regular-12--line-height)", textTransform: "var(--tbl--fonts--sans-serif--regular-12--text-transform)" } }, monospace: { bold12: { font: "var(--tbl--fonts--monospace--bold-12--font)", fontFamily: "var(--tbl--fonts--monospace--bold-12--font-family)", fontSize: "var(--tbl--fonts--monospace--bold-12--font-size)", fontWeight: "var(--tbl--fonts--monospace--bold-12--font-weight)", letterSpacing: "var(--tbl--fonts--monospace--bold-12--letter-spacing)", lineHeight: "var(--tbl--fonts--monospace--bold-12--line-height)", textTransform: "var(--tbl--fonts--monospace--bold-12--text-transform)" }, bold10: { font: "var(--tbl--fonts--monospace--bold-10--font)", fontFamily: "var(--tbl--fonts--monospace--bold-10--font-family)", fontSize: "var(--tbl--fonts--monospace--bold-10--font-size)", fontWeight: "var(--tbl--fonts--monospace--bold-10--font-weight)", letterSpacing: "var(--tbl--fonts--monospace--bold-10--letter-spacing)", lineHeight: "var(--tbl--fonts--monospace--bold-10--line-height)", textTransform: "var(--tbl--fonts--monospace--bold-10--text-transform)" }, semiBold14: { font: "var(--tbl--fonts--monospace--semi-bold-14--font)", fontFamily: "var(--tbl--fonts--monospace--semi-bold-14--font-family)", fontSize: "var(--tbl--fonts--monospace--semi-bold-14--font-size)", fontWeight: "var(--tbl--fonts--monospace--semi-bold-14--font-weight)", letterSpacing: "var(--tbl--fonts--monospace--semi-bold-14--letter-spacing)", lineHeight: "var(--tbl--fonts--monospace--semi-bold-14--line-height)", textTransform: "var(--tbl--fonts--monospace--semi-bold-14--text-transform)" }, semiBold12: { font: "var(--tbl--fonts--monospace--semi-bold-12--font)", fontFamily: "var(--tbl--fonts--monospace--semi-bold-12--font-family)", fontSize: "var(--tbl--fonts--monospace--semi-bold-12--font-size)", fontWeight: "var(--tbl--fonts--monospace--semi-bold-12--font-weight)", letterSpacing: "var(--tbl--fonts--monospace--semi-bold-12--letter-spacing)", lineHeight: "var(--tbl--fonts--monospace--semi-bold-12--line-height)", textTransform: "var(--tbl--fonts--monospace--semi-bold-12--text-transform)" }, regular12: { font: "var(--tbl--fonts--monospace--regular-12--font)", fontFamily: "var(--tbl--fonts--monospace--regular-12--font-family)", fontSize: "var(--tbl--fonts--monospace--regular-12--font-size)", fontWeight: "var(--tbl--fonts--monospace--regular-12--font-weight)", letterSpacing: "var(--tbl--fonts--monospace--regular-12--letter-spacing)", lineHeight: "var(--tbl--fonts--monospace--regular-12--line-height)", textTransform: "var(--tbl--fonts--monospace--regular-12--text-transform)" }, regular10: { font: "var(--tbl--fonts--monospace--regular-10--font)", fontFamily: "var(--tbl--fonts--monospace--regular-10--font-family)", fontSize: "var(--tbl--fonts--monospace--regular-10--font-size)", fontWeight: "var(--tbl--fonts--monospace--regular-10--font-weight)", letterSpacing: "var(--tbl--fonts--monospace--regular-10--letter-spacing)", lineHeight: "var(--tbl--fonts--monospace--regular-10--line-height)", textTransform: "var(--tbl--fonts--monospace--regular-10--text-transform)" } } } };

// src/UiTheme.tsx
import { createContext, useContext } from "react";
import { jsx } from "react/jsx-runtime";
var uiTheme = {
  layers,
  vars
};
var Context = createContext(uiTheme);
var UiTheme = ({ children }) => /* @__PURE__ */ jsx(Context.Provider, { value: uiTheme, children });
if (import.meta.env.DEV) {
  UiTheme.displayName = "ui-theme(UiTheme)";
}
var useUiTheme = () => useContext(Context);

// src/helpers.ts
function transformFonts(fonts, transformer) {
  const familiesOutput = {};
  for (const [family, variants] of Object.entries(fonts)) {
    const variantsOutput = {};
    for (const [variant, font] of Object.entries(variants)) {
      variantsOutput[variant] = transformer(font);
    }
    familiesOutput[family] = variantsOutput;
  }
  return familiesOutput;
}

// src/styles.ts
var styles = {
  fonts: transformFonts(
    vars.fonts,
    ({ font, letterSpacing, textTransform }) => ({
      "@layer": {
        [layers.components]: {
          font,
          letterSpacing,
          textTransform
        }
      }
    })
  )
};
export {
  UiTheme,
  layers as uiLayers,
  styles as uiStyles,
  vars as uiTheme,
  useUiTheme
};

// post-build: auto import bundled styles
import "./index.css";

//# sourceMappingURL=index.mjs.map