@spark-ui/theme-utils 8.1.8 → 9.0.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.0.0](https://github.com/adevinta/spark/compare/v8.1.8...v9.0.0) (2025-02-06)
+
+### Features
+
+- upgrade Tailwind to v4 ([92758fe](https://github.com/adevinta/spark/commit/92758feaab4b69f1c4d7d3394e1421ec36592511))
+
+### BREAKING CHANGES
+
+- upgrade tailwind to v4
+
 ## [8.1.8](https://github.com/adevinta/spark/compare/v8.1.7...v8.1.8) (2025-01-28)
 
 **Note:** Version bump only for package @spark-ui/theme-utils

package/dist/index.d.ts

@@ -1,5 +0,0 @@
-export { createTheme } from './createTheme';
-export { defaultTheme } from './defaultTheme';
-export { defaultThemeDark } from './defaultThemeDark';
-export { getThemeContrastReport, checkColorContrast } from './contrastCheck';
-export type { Theme, ThemeConfig } from './types';

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("deepmerge"),F={borderRadius:{none:"0px",sm:"0.25rem",md:"0.5rem",lg:"1rem",xl:"1.5rem",full:"9999px"},borderWidth:{none:"0px",sm:"1px",md:"2px"},boxShadow:{sm:"0 1px 2px 0 rgba(108 129 157 / 0.50)",DEFAULT:"0 4px 8px 0 rgba(108 129 157 / 0.50)",md:"0 6px 12px 0 rgba(108 129 157 / 0.50)",lg:"0 8px 16px 0 rgba(108 129 157 / 0.50)",xl:"0 12px 24px 0 rgba(108 129 157 / 0.50)",none:"none"},colors:{basic:"#094171",onBasic:"#FFFFFF",basicHovered:"#0C5291",basicContainer:"#E6F2FD",onBasicContainer:"#152233",basicContainerHovered:"#F4F9FE",accent:"#8526D9",onAccent:"#FFFFFF",accentHovered:"#9F47EB",accentContainer:"#E9D6FA",onAccentContainer:"#362555",accentContainerHovered:"#F5EDFD",accentVariant:"#501782",onAccentVariant:"#FFFFFF",accentVariantHovered:"#6B1FAD",main:"#EC5A13",onMain:"#FFFFFF",mainHovered:"#F07B42",mainContainer:"#FFE9DE",onMainContainer:"#89380F",mainContainerHovered:"#FFF2EB",mainVariant:"#B84A14",onMainVariant:"#FFFFFF",mainVariantHovered:"#EC5A13",support:"#094171",onSupport:"#FFFFFF",supportHovered:"#0C5291",supportContainer:"#E6F2FD",onSupportContainer:"#152233",supportContainerHovered:"#F4F9FE",supportVariant:"#0C5291",onSupportVariant:"#FFFFFF",supportVariantHovered:"#0F69B9",success:"#1D6340",onSuccess:"#FFFFFF",successHovered:"#278456",successContainer:"#E0F2E9",onSuccessContainer:"#1D6340",successContainerHovered:"#F5FBF8",alert:"#FFAA00",onAlert:"#202730",alertHovered:"#FFBB33",alertContainer:"#FFEECC",onAlertContainer:"#664400",alertContainerHovered:"#FFF6E5",error:"#AD291F",onError:"#FFFFFF",errorHovered:"#D93426",errorContainer:"#F7D7D4",onErrorContainer:"#822017",errorContainerHovered:"#FBECEB",info:"#0C5291",onInfo:"#FFFFFF",infoHovered:"#0F69B9",infoContainer:"#C2E0FA",onInfoContainer:"#0C5291",infoContainerHovered:"#E6F2FD",neutral:"#3A4757",onNeutral:"#FFFFFF",neutralHovered:"#4F6076",neutralContainer:"#F0F2F5",onNeutralContainer:"#3A4757",neutralContainerHovered:"#F6F8F9",background:"#FFFFFF",onBackground:"#152233",backgroundVariant:"#F4F9FE",onBackgroundVariant:"#152233",surface:"#FFFFFF",onSurface:"#152233",surfaceHovered:"#F6F8F9",surfaceInverse:"#2B3441",onSurfaceInverse:"#FFFFFF",surfaceInverseHovered:"#3A4757",outline:"#ACB8C7",outlineHigh:"#202730",overlay:"#202730B8",onOverlay:"#FFFFFF"},fontFamily:{sans:'"Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',mono:'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'},fontSize:{display1:{fontSize:"2.5rem",lineHeight:"3.5rem",fontWeight:"700"},display1Expanded:{fontSize:"3rem",lineHeight:"4rem",fontWeight:"700"},display2:{fontSize:"2rem",lineHeight:"2.75rem",fontWeight:"700"},display2Expanded:{fontSize:"2.5rem",lineHeight:"3.5rem",fontWeight:"700"},display3:{fontSize:"1.5rem",lineHeight:"2rem",fontWeight:"700"},display3Expanded:{fontSize:"2rem",lineHeight:"2.75rem",fontWeight:"700"},headline1:{fontSize:"1.25rem",lineHeight:"1.75rem",fontWeight:"700"},headline1Expanded:{fontSize:"1.5rem",lineHeight:"2rem",fontWeight:"700"},headline2:{fontSize:"1.125rem",lineHeight:"1.5rem",fontWeight:"700"},headline2Expanded:{fontSize:"1.25rem",lineHeight:"1.75rem",fontWeight:"700"},subhead:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},subheadExpanded:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},body1:{fontSize:"1rem",lineHeight:"1.5rem"},body2:{fontSize:"0.875rem",lineHeight:"1.25rem"},caption:{fontSize:"0.75rem",lineHeight:"1rem"},small:{fontSize:"0.625rem",lineHeight:"0.875rem"},body1Link:{fontSize:"1rem",lineHeight:"1.5rem"},body2Link:{fontSize:"0.875rem",lineHeight:"1.125rem"},captionLink:{fontSize:"0.75rem",lineHeight:"1rem"},callout:{fontSize:"1rem",lineHeight:"1.5rem"}},fontWeight:{regular:"400",medium:"500",semiBold:"600",bold:"700"},opacity:{0:"0",none:"1",dim1:"0.72",dim2:"0.56",dim3:"0.40",dim4:"0.16",dim5:"0.08"},screens:{sm:"640px",md:"768px",lg:"1024px",xl:"1280px"},spacing:{auto:"auto",none:"0px",sm:"0.25rem",md:"0.5rem",lg:"1rem",xl:"1.5rem","2xl":"2rem","3xl":"2.5rem"},zIndex:{hide:"-1",base:"0",raised:"1",dropdown:"1000",sticky:"1100",overlay:"1300",modal:"1400",popover:"1500",skipLink:"1600",toast:"1700",tooltip:"1800"}};function l(r,e=F){return p(e,r)}const v=l({boxShadow:{sm:"0 1px 2px 0 rgba(0 0 0 / 0.50)",DEFAULT:"0 4px 8px 0 rgba(0 0 0 / 0.50)",md:"0 6px 12px 0 rgba(0 0 0 / 0.50)",lg:"0 8px 16px 0 rgba(0 0 0 / 0.50)",xl:"0 12px 24px 0 rgba(0 0 0 / 0.50)",none:"none"},colors:{basic:"#C2E0FA",onBasic:"#152233",basicHovered:"#9FCEF7",basicContainer:"#094171",onBasicContainer:"#F4F9FE",basicContainerHovered:"#152233",accent:"#CFA3F5",onAccent:"#1B052E",accentHovered:"#AC7DDD",accentContainer:"#501782",onAccentContainer:"#F5EDFD",accentContainerHovered:"#360F57",accentVariant:"#B775F0",onAccentVariant:"#1B052E",accentVariantHovered:"#B775F0",main:"#F07B42",onMain:"#2F1305",mainHovered:"#EC5A13",mainContainer:"#89380F",onMainContainer:"#FFF2EB",mainContainerHovered:"#5C250A",mainVariant:"#F49D71",onMainVariant:"#2F1305",mainVariantHovered:"#F07B42",support:"#C2E0FA",onSupport:"#152233",supportHovered:"#9FCEF7",supportContainer:"#094171",onSupportContainer:"#F4F9FE",supportContainerHovered:"#152233",supportVariant:"#E6F2FD",onSupportVariant:"#152233",supportVariantHovered:"#C2E0FA",success:"#8ECDAE",onSuccess:"#0C291B",successHovered:"#64BC90",successContainer:"#1D6340",onSuccessContainer:"#F5FBF8",successContainerHovered:"#14422B",alert:"#FFCC66",onAlert:"#332200",alertHovered:"#FFBB33",alertContainer:"#664400",onAlertContainer:"#FFF6E5",alertContainerHovered:"#332200",error:"#E8867D",onError:"#2B0B08",errorHovered:"#E05D52",errorContainer:"#822017",onErrorContainer:"#FBECEB",errorContainerHovered:"#57150F",info:"#9FCEF7",onInfo:"#152233",infoHovered:"#69B2F3",infoContainer:"#0C5291",onInfoContainer:"#F4F9FE",infoContainerHovered:"#094171",neutral:"#D0D7DF",onNeutral:"#202730",neutralHovered:"#ACB8C7",neutralContainer:"#3A4757",onNeutralContainer:"#F6F8F9",neutralContainerHovered:"#2B3441",background:"#202730",onBackground:"#F6F8F9",backgroundVariant:"#13171D",onBackgroundVariant:"#F6F8F9",surface:"#202730",onSurface:"#F6F8F9",surfaceHovered:"#000000",surfaceInverse:"#F6F8F9",onSurfaceInverse:"#2B3441",surfaceInverseHovered:"#F0F2F5",outline:"#6C819D",outlineHigh:"#F0F2F5",overlay:"#2B3441B8",onOverlay:"#F6F8F9"}});function c(r){const e=[parseInt(r.slice(1,3),16)/255,parseInt(r.slice(3,5),16)/255,parseInt(r.slice(5,7),16)/255].map(o=>o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4));return .2126*e[0]+.7152*e[1]+.0722*e[2]}function C(r,e){const o=e>=24;return r>=7?"AAA":r>=4.5&&!o||r>=3&&o?"AA":"Failed"}function t(r,e,o){const a=function(u,d){const i=c(u),s=c(d);return(Math.max(i,s)+.05)/(Math.min(i,s)+.05)}(r,e);return{contrastRatio:a.toFixed(2),score:C(a,o),textSize:o>=24?"Large":"Small",colors:[r,e]}}const n=(r,e)=>({small:t(r,e,16),large:t(r,e,24)});exports.checkColorContrast=t,exports.createTheme=l,exports.defaultTheme=F,exports.defaultThemeDark=v,exports.getThemeContrastReport=r=>{const{colors:e}=r;return{main:{previewStyles:"bg-main text-on-main",...n(e.main,e.onMain)},mainHovered:{previewStyles:"bg-main-hovered text-on-main",...n(e.mainHovered,e.onMain)},mainContainer:{previewStyles:"bg-main-container text-on-main-container",...n(e.mainContainer,e.onMainContainer)},mainContainerHovered:{previewStyles:"bg-main-container-hovered text-on-main-container",...n(e.mainContainerHovered,e.onMainContainer)},support:{previewStyles:"bg-support text-on-support",...n(e.support,e.onSupport)},supportHovered:{previewStyles:"bg-support-hovered text-on-support",...n(e.supportHovered,e.onSupport)},supportContainer:{previewStyles:"bg-support-container text-on-support-container",...n(e.supportContainer,e.onSupportContainer)},supportContainerHovered:{previewStyles:"bg-support-container-hovered text-on-support-container",...n(e.supportContainerHovered,e.onSupportContainer)},accent:{previewStyles:"bg-accent text-on-accent",...n(e.accent,e.onAccent)},accentHovered:{previewStyles:"bg-accent-hovered text-on-accent",...n(e.accentHovered,e.onAccent)},accentContainer:{previewStyles:"bg-accent-container text-on-accent-container",...n(e.accentContainer,e.onAccentContainer)},accentContainerHovered:{previewStyles:"bg-accent-container-hovered text-on-accent-container",...n(e.accentContainerHovered,e.onAccentContainer)},basic:{previewStyles:"bg-basic text-on-basic",...n(e.basic,e.onBasic)},basicHovered:{previewStyles:"bg-basic-hovered text-on-basic",...n(e.basicHovered,e.onBasic)},basicContainer:{previewStyles:"bg-basic-container text-on-basic-container",...n(e.basicContainer,e.onBasicContainer)},basicContainerHovered:{previewStyles:"bg-basic-container-hovered text-on-basic-container",...n(e.basicContainerHovered,e.onBasicContainer)},success:{previewStyles:"bg-success text-on-success",...n(e.success,e.onSuccess)},successHovered:{previewStyles:"bg-success-hovered text-on-success",...n(e.successHovered,e.onSuccess)},successContainer:{previewStyles:"bg-success-container text-on-success-container",...n(e.successContainer,e.onSuccessContainer)},successContainerHovered:{previewStyles:"bg-success-container-hovered text-on-success-container",...n(e.successContainerHovered,e.onSuccessContainer)},error:{previewStyles:"bg-error text-on-error",...n(e.error,e.onError)},errorHovered:{previewStyles:"bg-error-hovered text-on-error",...n(e.errorHovered,e.onError)},errorContainer:{previewStyles:"bg-error-container text-on-error-container",...n(e.errorContainer,e.onErrorContainer)},errorContainerHovered:{previewStyles:"bg-error-container-hovered text-on-error-container",...n(e.errorContainerHovered,e.onErrorContainer)},alert:{previewStyles:"bg-alert text-on-alert",...n(e.alert,e.onAlert)},alertHovered:{previewStyles:"bg-alert-hovered text-on-alert",...n(e.alertHovered,e.onAlert)},alertContainer:{previewStyles:"bg-alert-container text-on-alert-container",...n(e.alertContainer,e.onAlertContainer)},alertContainerHovered:{previewStyles:"bg-alert-container-hovered text-on-alert-container",...n(e.alertContainerHovered,e.onAlertContainer)},info:{previewStyles:"bg-info text-on-info",...n(e.info,e.onInfo)},infoHovered:{previewStyles:"bg-info-hovered text-on-info",...n(e.infoHovered,e.onInfo)},infoContainer:{previewStyles:"bg-info-container text-on-info-container",...n(e.infoContainer,e.onInfoContainer)},infoContainerHovered:{previewStyles:"bg-info-container-hovered text-on-info-container",...n(e.infoContainerHovered,e.onInfoContainer)},neutral:{previewStyles:"bg-neutral text-on-neutral",...n(e.neutral,e.onNeutral)},neutralHovered:{previewStyles:"bg-neutral-hovered text-on-neutral",...n(e.neutralHovered,e.onNeutral)},neutralContainer:{previewStyles:"bg-neutral-container text-on-neutral-container",...n(e.neutralContainer,e.onNeutralContainer)},neutralContainerHovered:{previewStyles:"bg-neutral-container-hovered text-on-neutral-container",...n(e.neutralContainerHovered,e.onNeutralContainer)},background:{previewStyles:"bg-background text-on-background",...n(e.background,e.onBackground)},backgroundVariant:{previewStyles:"bg-background-variant text-on-background-variant",...n(e.backgroundVariant,e.onBackgroundVariant)},surface:{previewStyles:"bg-surface text-on-surface",...n(e.surface,e.onSurface)},surfaceHovered:{previewStyles:"bg-surface-hovered text-on-surface",...n(e.surfaceHovered,e.onSurface)},surfaceInverse:{previewStyles:"bg-surface-inverse text-on-surface-inverse",...n(e.surfaceInverse,e.onSurfaceInverse)},surfaceInverseHovered:{previewStyles:"bg-surface-inverse-hovered text-on-surface-inverse",...n(e.surfaceInverseHovered,e.onSurfaceInverse)}}};
+"use strict";

package/dist/index.mjs

@@ -1,32 +1 @@
-import u from "deepmerge";
-const d = { borderRadius: { none: "0px", sm: "0.25rem", md: "0.5rem", lg: "1rem", xl: "1.5rem", full: "9999px" }, borderWidth: { none: "0px", sm: "1px", md: "2px" }, boxShadow: { sm: "0 1px 2px 0 rgba(108 129 157 / 0.50)", DEFAULT: "0 4px 8px 0 rgba(108 129 157 / 0.50)", md: "0 6px 12px 0 rgba(108 129 157 / 0.50)", lg: "0 8px 16px 0 rgba(108 129 157 / 0.50)", xl: "0 12px 24px 0 rgba(108 129 157 / 0.50)", none: "none" }, colors: { basic: "#094171", onBasic: "#FFFFFF", basicHovered: "#0C5291", basicContainer: "#E6F2FD", onBasicContainer: "#152233", basicContainerHovered: "#F4F9FE", accent: "#8526D9", onAccent: "#FFFFFF", accentHovered: "#9F47EB", accentContainer: "#E9D6FA", onAccentContainer: "#362555", accentContainerHovered: "#F5EDFD", accentVariant: "#501782", onAccentVariant: "#FFFFFF", accentVariantHovered: "#6B1FAD", main: "#EC5A13", onMain: "#FFFFFF", mainHovered: "#F07B42", mainContainer: "#FFE9DE", onMainContainer: "#89380F", mainContainerHovered: "#FFF2EB", mainVariant: "#B84A14", onMainVariant: "#FFFFFF", mainVariantHovered: "#EC5A13", support: "#094171", onSupport: "#FFFFFF", supportHovered: "#0C5291", supportContainer: "#E6F2FD", onSupportContainer: "#152233", supportContainerHovered: "#F4F9FE", supportVariant: "#0C5291", onSupportVariant: "#FFFFFF", supportVariantHovered: "#0F69B9", success: "#1D6340", onSuccess: "#FFFFFF", successHovered: "#278456", successContainer: "#E0F2E9", onSuccessContainer: "#1D6340", successContainerHovered: "#F5FBF8", alert: "#FFAA00", onAlert: "#202730", alertHovered: "#FFBB33", alertContainer: "#FFEECC", onAlertContainer: "#664400", alertContainerHovered: "#FFF6E5", error: "#AD291F", onError: "#FFFFFF", errorHovered: "#D93426", errorContainer: "#F7D7D4", onErrorContainer: "#822017", errorContainerHovered: "#FBECEB", info: "#0C5291", onInfo: "#FFFFFF", infoHovered: "#0F69B9", infoContainer: "#C2E0FA", onInfoContainer: "#0C5291", infoContainerHovered: "#E6F2FD", neutral: "#3A4757", onNeutral: "#FFFFFF", neutralHovered: "#4F6076", neutralContainer: "#F0F2F5", onNeutralContainer: "#3A4757", neutralContainerHovered: "#F6F8F9", background: "#FFFFFF", onBackground: "#152233", backgroundVariant: "#F4F9FE", onBackgroundVariant: "#152233", surface: "#FFFFFF", onSurface: "#152233", surfaceHovered: "#F6F8F9", surfaceInverse: "#2B3441", onSurfaceInverse: "#FFFFFF", surfaceInverseHovered: "#3A4757", outline: "#ACB8C7", outlineHigh: "#202730", overlay: "#202730B8", onOverlay: "#FFFFFF" }, fontFamily: { sans: '"Nunito Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace' }, fontSize: { display1: { fontSize: "2.5rem", lineHeight: "3.5rem", fontWeight: "700" }, display1Expanded: { fontSize: "3rem", lineHeight: "4rem", fontWeight: "700" }, display2: { fontSize: "2rem", lineHeight: "2.75rem", fontWeight: "700" }, display2Expanded: { fontSize: "2.5rem", lineHeight: "3.5rem", fontWeight: "700" }, display3: { fontSize: "1.5rem", lineHeight: "2rem", fontWeight: "700" }, display3Expanded: { fontSize: "2rem", lineHeight: "2.75rem", fontWeight: "700" }, headline1: { fontSize: "1.25rem", lineHeight: "1.75rem", fontWeight: "700" }, headline1Expanded: { fontSize: "1.5rem", lineHeight: "2rem", fontWeight: "700" }, headline2: { fontSize: "1.125rem", lineHeight: "1.5rem", fontWeight: "700" }, headline2Expanded: { fontSize: "1.25rem", lineHeight: "1.75rem", fontWeight: "700" }, subhead: { fontSize: "1rem", lineHeight: "1.5rem", fontWeight: "700" }, subheadExpanded: { fontSize: "1rem", lineHeight: "1.5rem", fontWeight: "700" }, body1: { fontSize: "1rem", lineHeight: "1.5rem" }, body2: { fontSize: "0.875rem", lineHeight: "1.25rem" }, caption: { fontSize: "0.75rem", lineHeight: "1rem" }, small: { fontSize: "0.625rem", lineHeight: "0.875rem" }, body1Link: { fontSize: "1rem", lineHeight: "1.5rem" }, body2Link: { fontSize: "0.875rem", lineHeight: "1.125rem" }, captionLink: { fontSize: "0.75rem", lineHeight: "1rem" }, callout: { fontSize: "1rem", lineHeight: "1.5rem" } }, fontWeight: { regular: "400", medium: "500", semiBold: "600", bold: "700" }, opacity: { 0: "0", none: "1", dim1: "0.72", dim2: "0.56", dim3: "0.40", dim4: "0.16", dim5: "0.08" }, screens: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px" }, spacing: { auto: "auto", none: "0px", sm: "0.25rem", md: "0.5rem", lg: "1rem", xl: "1.5rem", "2xl": "2rem", "3xl": "2.5rem" }, zIndex: { hide: "-1", base: "0", raised: "1", dropdown: "1000", sticky: "1100", overlay: "1300", modal: "1400", popover: "1500", skipLink: "1600", toast: "1700", tooltip: "1800" } };
-function p(r, e = d) {
-  return u(e, r);
-}
-const m = p({ boxShadow: { sm: "0 1px 2px 0 rgba(0 0 0 / 0.50)", DEFAULT: "0 4px 8px 0 rgba(0 0 0 / 0.50)", md: "0 6px 12px 0 rgba(0 0 0 / 0.50)", lg: "0 8px 16px 0 rgba(0 0 0 / 0.50)", xl: "0 12px 24px 0 rgba(0 0 0 / 0.50)", none: "none" }, colors: { basic: "#C2E0FA", onBasic: "#152233", basicHovered: "#9FCEF7", basicContainer: "#094171", onBasicContainer: "#F4F9FE", basicContainerHovered: "#152233", accent: "#CFA3F5", onAccent: "#1B052E", accentHovered: "#AC7DDD", accentContainer: "#501782", onAccentContainer: "#F5EDFD", accentContainerHovered: "#360F57", accentVariant: "#B775F0", onAccentVariant: "#1B052E", accentVariantHovered: "#B775F0", main: "#F07B42", onMain: "#2F1305", mainHovered: "#EC5A13", mainContainer: "#89380F", onMainContainer: "#FFF2EB", mainContainerHovered: "#5C250A", mainVariant: "#F49D71", onMainVariant: "#2F1305", mainVariantHovered: "#F07B42", support: "#C2E0FA", onSupport: "#152233", supportHovered: "#9FCEF7", supportContainer: "#094171", onSupportContainer: "#F4F9FE", supportContainerHovered: "#152233", supportVariant: "#E6F2FD", onSupportVariant: "#152233", supportVariantHovered: "#C2E0FA", success: "#8ECDAE", onSuccess: "#0C291B", successHovered: "#64BC90", successContainer: "#1D6340", onSuccessContainer: "#F5FBF8", successContainerHovered: "#14422B", alert: "#FFCC66", onAlert: "#332200", alertHovered: "#FFBB33", alertContainer: "#664400", onAlertContainer: "#FFF6E5", alertContainerHovered: "#332200", error: "#E8867D", onError: "#2B0B08", errorHovered: "#E05D52", errorContainer: "#822017", onErrorContainer: "#FBECEB", errorContainerHovered: "#57150F", info: "#9FCEF7", onInfo: "#152233", infoHovered: "#69B2F3", infoContainer: "#0C5291", onInfoContainer: "#F4F9FE", infoContainerHovered: "#094171", neutral: "#D0D7DF", onNeutral: "#202730", neutralHovered: "#ACB8C7", neutralContainer: "#3A4757", onNeutralContainer: "#F6F8F9", neutralContainerHovered: "#2B3441", background: "#202730", onBackground: "#F6F8F9", backgroundVariant: "#13171D", onBackgroundVariant: "#F6F8F9", surface: "#202730", onSurface: "#F6F8F9", surfaceHovered: "#000000", surfaceInverse: "#F6F8F9", onSurfaceInverse: "#2B3441", surfaceInverseHovered: "#F0F2F5", outline: "#6C819D", outlineHigh: "#F0F2F5", overlay: "#2B3441B8", onOverlay: "#F6F8F9" } });
-function s(r) {
-  const e = [parseInt(r.slice(1, 3), 16) / 255, parseInt(r.slice(3, 5), 16) / 255, parseInt(r.slice(5, 7), 16) / 255].map((o) => o <= 0.03928 ? o / 12.92 : Math.pow((o + 0.055) / 1.055, 2.4));
-  return 0.2126 * e[0] + 0.7152 * e[1] + 0.0722 * e[2];
-}
-function v(r, e) {
-  const o = e >= 24;
-  return r >= 7 ? "AAA" : r >= 4.5 && !o || r >= 3 && o ? "AA" : "Failed";
-}
-function c(r, e, o) {
-  const t = function(F, l) {
-    const a = s(F), i = s(l);
-    return (Math.max(a, i) + 0.05) / (Math.min(a, i) + 0.05);
-  }(r, e);
-  return { contrastRatio: t.toFixed(2), score: v(t, o), textSize: o >= 24 ? "Large" : "Small", colors: [r, e] };
-}
-const n = (r, e) => ({ small: c(r, e, 16), large: c(r, e, 24) }), g = (r) => {
-  const { colors: e } = r;
-  return { main: { previewStyles: "bg-main text-on-main", ...n(e.main, e.onMain) }, mainHovered: { previewStyles: "bg-main-hovered text-on-main", ...n(e.mainHovered, e.onMain) }, mainContainer: { previewStyles: "bg-main-container text-on-main-container", ...n(e.mainContainer, e.onMainContainer) }, mainContainerHovered: { previewStyles: "bg-main-container-hovered text-on-main-container", ...n(e.mainContainerHovered, e.onMainContainer) }, support: { previewStyles: "bg-support text-on-support", ...n(e.support, e.onSupport) }, supportHovered: { previewStyles: "bg-support-hovered text-on-support", ...n(e.supportHovered, e.onSupport) }, supportContainer: { previewStyles: "bg-support-container text-on-support-container", ...n(e.supportContainer, e.onSupportContainer) }, supportContainerHovered: { previewStyles: "bg-support-container-hovered text-on-support-container", ...n(e.supportContainerHovered, e.onSupportContainer) }, accent: { previewStyles: "bg-accent text-on-accent", ...n(e.accent, e.onAccent) }, accentHovered: { previewStyles: "bg-accent-hovered text-on-accent", ...n(e.accentHovered, e.onAccent) }, accentContainer: { previewStyles: "bg-accent-container text-on-accent-container", ...n(e.accentContainer, e.onAccentContainer) }, accentContainerHovered: { previewStyles: "bg-accent-container-hovered text-on-accent-container", ...n(e.accentContainerHovered, e.onAccentContainer) }, basic: { previewStyles: "bg-basic text-on-basic", ...n(e.basic, e.onBasic) }, basicHovered: { previewStyles: "bg-basic-hovered text-on-basic", ...n(e.basicHovered, e.onBasic) }, basicContainer: { previewStyles: "bg-basic-container text-on-basic-container", ...n(e.basicContainer, e.onBasicContainer) }, basicContainerHovered: { previewStyles: "bg-basic-container-hovered text-on-basic-container", ...n(e.basicContainerHovered, e.onBasicContainer) }, success: { previewStyles: "bg-success text-on-success", ...n(e.success, e.onSuccess) }, successHovered: { previewStyles: "bg-success-hovered text-on-success", ...n(e.successHovered, e.onSuccess) }, successContainer: { previewStyles: "bg-success-container text-on-success-container", ...n(e.successContainer, e.onSuccessContainer) }, successContainerHovered: { previewStyles: "bg-success-container-hovered text-on-success-container", ...n(e.successContainerHovered, e.onSuccessContainer) }, error: { previewStyles: "bg-error text-on-error", ...n(e.error, e.onError) }, errorHovered: { previewStyles: "bg-error-hovered text-on-error", ...n(e.errorHovered, e.onError) }, errorContainer: { previewStyles: "bg-error-container text-on-error-container", ...n(e.errorContainer, e.onErrorContainer) }, errorContainerHovered: { previewStyles: "bg-error-container-hovered text-on-error-container", ...n(e.errorContainerHovered, e.onErrorContainer) }, alert: { previewStyles: "bg-alert text-on-alert", ...n(e.alert, e.onAlert) }, alertHovered: { previewStyles: "bg-alert-hovered text-on-alert", ...n(e.alertHovered, e.onAlert) }, alertContainer: { previewStyles: "bg-alert-container text-on-alert-container", ...n(e.alertContainer, e.onAlertContainer) }, alertContainerHovered: { previewStyles: "bg-alert-container-hovered text-on-alert-container", ...n(e.alertContainerHovered, e.onAlertContainer) }, info: { previewStyles: "bg-info text-on-info", ...n(e.info, e.onInfo) }, infoHovered: { previewStyles: "bg-info-hovered text-on-info", ...n(e.infoHovered, e.onInfo) }, infoContainer: { previewStyles: "bg-info-container text-on-info-container", ...n(e.infoContainer, e.onInfoContainer) }, infoContainerHovered: { previewStyles: "bg-info-container-hovered text-on-info-container", ...n(e.infoContainerHovered, e.onInfoContainer) }, neutral: { previewStyles: "bg-neutral text-on-neutral", ...n(e.neutral, e.onNeutral) }, neutralHovered: { previewStyles: "bg-neutral-hovered text-on-neutral", ...n(e.neutralHovered, e.onNeutral) }, neutralContainer: { previewStyles: "bg-neutral-container text-on-neutral-container", ...n(e.neutralContainer, e.onNeutralContainer) }, neutralContainerHovered: { previewStyles: "bg-neutral-container-hovered text-on-neutral-container", ...n(e.neutralContainerHovered, e.onNeutralContainer) }, background: { previewStyles: "bg-background text-on-background", ...n(e.background, e.onBackground) }, backgroundVariant: { previewStyles: "bg-background-variant text-on-background-variant", ...n(e.backgroundVariant, e.onBackgroundVariant) }, surface: { previewStyles: "bg-surface text-on-surface", ...n(e.surface, e.onSurface) }, surfaceHovered: { previewStyles: "bg-surface-hovered text-on-surface", ...n(e.surfaceHovered, e.onSurface) }, surfaceInverse: { previewStyles: "bg-surface-inverse text-on-surface-inverse", ...n(e.surfaceInverse, e.onSurfaceInverse) }, surfaceInverseHovered: { previewStyles: "bg-surface-inverse-hovered text-on-surface-inverse", ...n(e.surfaceInverseHovered, e.onSurfaceInverse) } };
-};
-export {
-  c as checkColorContrast,
-  p as createTheme,
-  d as defaultTheme,
-  m as defaultThemeDark,
-  g as getThemeContrastReport
-};
+

package/dist/style.css

@@ -0,0 +1 @@
+@theme{ --animate-fade-in: fade-in .25s cubic-bezier(.2, 0, 0, 1); @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } --animate-fade-out: fade-out .25s cubic-bezier(.2, 0, 0, 1); @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } --animate-slide-in-top: slide-in-top .4s cubic-bezier(.05, .7, .1, 1); @keyframes slide-in-top { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } --animate-slide-in-right: slide-in-right .4s cubic-bezier(.05, .7, .1, 1); @keyframes slide-in-right { 0% { transform: translateX(100%); } 100% { transform: translateX(0); } } --animate-slide-in-bottom: slide-in-bottom .4s cubic-bezier(.05, .7, .1, 1); @keyframes slide-in-bottom { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } --animate-slide-in-left: slide-in-left .4s cubic-bezier(.05, .7, .1, 1); @keyframes slide-in-left { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } --animate-slide-out-top: slide-out-top .4s cubic-bezier(.05, .7, .1, 1); @keyframes slide-out-top { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } --animate-slide-out-right: slide-out-right .4s cubic-bezier(.05, .7, .1, 1); @keyframes slide-out-right { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } --animate-slide-out-bottom: slide-out-bottom .4s cubic-bezier(.05, .7, .1, 1); @keyframes slide-out-bottom { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } } --animate-slide-out-left: slide-out-left .4s cubic-bezier(.05, .7, .1, 1); @keyframes slide-out-left { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } --animate-standalone-collapse-in: collapse-in .25s cubic-bezier(.2, 0, 0, 1); @keyframes collapse-in { 0% { opacity: 0; height: 0; } 100% { opacity: 1; height: var(--height); } } --animate-standalone-collapse-out: collapse-out .25s cubic-bezier(.2, 0, 0, 1); @keyframes collapse-out { 0% { opacity: 1; height: var(--height); } 100% { opacity: 0; height: 0; } } --animate-standalone-indeterminate-bar: indeterminate-bar 1s ease-out infinite normal none running; @keyframes indeterminate-bar { 0% { left: 0; width: 0; } 50% { left: 50%; width: 50%; } 75% { left: 100%; width: 0; } 100% { left: 0; width: 0; } } --animate-standalone-shimmer: shimmer 2s ease-in infinite; @keyframes shimmer { 100% { mask-position: -200% 0%; } } --animate-standalone-swipe-out-left: swipe-out-left .1s ease-out; @keyframes swipe-out-left { 0% { transform: translateX(var(--swipe-position-x)); } 100% { transform: translateX(-100vw); } } --animate-standalone-swipe-out-right: swipe-out-right .1s ease-out; @keyframes swipe-out-right { 0% { transform: translateX(var(--swipe-position-x)); } 100% { transform: translateX(100vw); } } }@utility text-display-1{font-size: calc(2.5rem * var(--spacing-factor)); line-height: calc(3.5rem * var(--spacing-factor)); font-weight: 700;}@utility text-display-1-expanded{font-size: calc(3rem * var(--spacing-factor)); line-height: calc(4rem * var(--spacing-factor)); font-weight: 700;}@utility text-display-2{font-size: calc(2rem * var(--spacing-factor)); line-height: calc(2.75rem * var(--spacing-factor)); font-weight: 700;}@utility text-display-1-expanded{font-size: calc(2.5rem * var(--spacing-factor)); line-height: calc(3.5rem * var(--spacing-factor)); font-weight: 700;}@utility text-display-3{font-size: calc(1.5rem * var(--spacing-factor)); line-height: calc(2rem * var(--spacing-factor)); font-weight: 700;}@utility text-display-3-expanded{font-size: calc(2rem * var(--spacing-factor)); line-height: calc(2.75rem * var(--spacing-factor)); font-weight: 700;}@utility text-headline-1{font-size: calc(1.25rem * var(--spacing-factor)); line-height: calc(1.75rem * var(--spacing-factor)); font-weight: 700;}@utility text-headline-1-expanded{font-size: calc(1.5rem * var(--spacing-factor)); line-height: calc(2rem * var(--spacing-factor)); font-weight: 700;}@utility text-headline-2{font-size: calc(1.125rem * var(--spacing-factor)); line-height: calc(1.5rem * var(--spacing-factor)); font-weight: 700;}@utility text-headline-2-expanded{font-size: calc(1.25rem * var(--spacing-factor)); line-height: calc(1.75rem * var(--spacing-factor)); font-weight: 700;}@utility text-subhead{font-size: calc(1rem * var(--spacing-factor)); line-height: calc(1.5rem * var(--spacing-factor)); font-weight: 700;}@utility text-subhead-expanded{font-size: calc(1rem * var(--spacing-factor)); line-height: calc(1.5rem * var(--spacing-factor)); font-weight: 700;}@utility text-body-1{font-size: calc(1rem * var(--spacing-factor)); line-height: calc(1.5rem * var(--spacing-factor));}@utility text-body-2{font-size: calc(.875rem * var(--spacing-factor)); line-height: calc(1.25rem * var(--spacing-factor));}@utility text-caption{font-size: calc(.75rem * var(--spacing-factor)); line-height: calc(1rem * var(--spacing-factor));}@utility text-small{font-size: calc(.625rem * var(--spacing-factor)); line-height: calc(.875rem * var(--spacing-factor));}@utility text-body-1-link{font-size: calc(1rem * var(--spacing-factor)); line-height: calc(1.5rem * var(--spacing-factor));}@utility text-body-2-link{font-size: calc(.875rem * var(--spacing-factor)); line-height: calc(1.125rem * var(--spacing-factor));}@utility text-caption-link{font-size: calc(.75rem * var(--spacing-factor)); line-height: calc(1rem * var(--spacing-factor));}@utility text-callout{font-size: calc(1rem * var(--spacing-factor)); line-height: calc(1.5rem * var(--spacing-factor));}@utility u-current-font-size{width: 1em; height: 1em;}@utility u-shadow-border-transition{transition: box-shadow .1s cubic-bezier(.4,0,1,1),border-color .3s cubic-bezier(.4,0,1,1);}@utility u-no-scrollbar{scrollbar-width: none;}@utility u-no-scrollbar{&::-webkit-scrollbar {display: none;}}@utility u-outline{outline-color: var(--color-blue); outline-style: solid; outline-width: 2px; outline-offset: 2px;}@utility u-outline-inset{outline-color: var(--color-blue); outline-style: solid; outline-width: 2px; outline-offset: -2px;}[data-theme=dark]{--color-basic: #c2e0fa;--color-on-basic: #152233;--color-basic-hovered: #9fcef7;--color-basic-container: #094171;--color-on-basic-container: #f4f9fe;--color-basic-container-hovered: #152233;--color-accent: #cfa3f5;--color-on-accent: #1b052e;--color-accent-hovered: #ac7ddd;--color-accent-container: #501782;--color-on-accent-container: #f5edfd;--color-accent-container-hovered: #360f57;--color-accent-variant: #b775f0;--color-on-accent-variant: #1b052e;--color-accent-variant-hovered: #b775f0;--color-main: #f07b42;--color-on-main: #2f1305;--color-main-hovered: #ec5a13;--color-main-container: #89380f;--color-on-main-container: #fff2eb;--color-main-container-hovered: #5c250a;--color-main-variant: #f49d71;--color-on-main-variant: #2f1305;--color-main-variant-hovered: #f07b42;--color-support: #c2e0fa;--color-on-support: #152233;--color-support-hovered: #9fcef7;--color-support-container: #094171;--color-on-support-container: #f4f9fe;--color-support-container-hovered: #152233;--color-support-variant: #e6f2fd;--color-on-support-variant: #152233;--color-support-variant-hovered: #c2e0fa;--color-success: #8ecdae;--color-on-success: #0c291b;--color-success-hovered: #64bc90;--color-success-container: #1d6340;--color-on-success-container: #f5fbf8;--color-success-container-hovered: #14422b;--color-alert: #ffcc66;--color-on-alert: #332200;--color-alert-hovered: #ffbb33;--color-alert-container: #664400;--color-on-alert-container: #fff6e5;--color-alert-container-hovered: #332200;--color-error: #e8867d;--color-on-error: #2b0b08;--color-error-hovered: #e05d52;--color-error-container: #822017;--color-on-error-container: #fbeceb;--color-error-container-hovered: #57150f;--color-info: #9fcef7;--color-on-info: #152233;--color-info-hovered: #69b2f3;--color-info-container: #0c5291;--color-on-info-container: #f4f9fe;--color-info-container-hovered: #094171;--color-neutral: #d0d7df;--color-on-neutral: #202730;--color-neutral-hovered: #acb8c7;--color-neutral-container: #3a4757;--color-on-neutral-container: #f6f8f9;--color-neutral-container-hovered: #2b3441;--color-background: #202730;--color-on-background: #f6f8f9;--color-background-variant: #13171d;--color-on-background-variant: #f6f8f9;--color-surface: #202730;--color-on-surface: #f6f8f9;--color-surface-hovered: #000000;--color-surface-inverse: #f6f8f9;--color-on-surface-inverse: #2b3441;--color-surface-inverse-hovered: #f0f2f5;--color-outline: #6c819d;--color-outline-high: #f0f2f5;--color-overlay: #2b3441;--color-on-overlay: #f6f8f9;--color-shadow: rgba(0 0 0 / .5)}@theme{--breakpoint-*: initial; --color-*: initial; --container-*: initial; --font-*: initial; --font-weight-*: initial; --radius-*: initial; --shadow-*: initial; --spacing-*: initial; --text-*: initial; --z-index-*: initial; --border-width-none: 0px; --border-width-sm: 1px; --border-width-md: 2px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --font-sans: "Nunito Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semi-bold: 600; --font-weight-bold: 700; --color-blue: #00f; --color-basic: #094171; --color-on-basic: #ffffff; --color-basic-hovered: #0c5291; --color-basic-container: #e6f2fd; --color-on-basic-container: #152233; --color-basic-container-hovered: #f4f9fe; --color-accent: #8526d9; --color-on-accent: #ffffff; --color-accent-hovered: #9f47eb; --color-accent-container: #e9d6fa; --color-on-accent-container: #362555; --color-accent-container-hovered: #f5edfd; --color-accent-variant: #501782; --color-on-accent-variant: #ffffff; --color-accent-variant-hovered: #6b1fad; --color-main: #ec5a13; --color-on-main: #ffffff; --color-main-hovered: #f07b42; --color-main-container: #ffe9de; --color-on-main-container: #89380f; --color-main-container-hovered: #fff2eb; --color-main-variant: #b84a14; --color-on-main-variant: #ffffff; --color-main-variant-hovered: #ec5a13; --color-support: #094171; --color-on-support: #ffffff; --color-support-hovered: #0c5291; --color-support-container: #e6f2fd; --color-on-support-container: #152233; --color-support-container-hovered: #f4f9fe; --color-support-variant: #0c5291; --color-on-support-variant: #ffffff; --color-support-variant-hovered: #0f69b9; --color-success: #1d6340; --color-on-success: #ffffff; --color-success-hovered: #278456; --color-success-container: #e0f2e9; --color-on-success-container: #1d6340; --color-success-container-hovered: #f5fbf8; --color-alert: #ffaa00; --color-on-alert: #202730; --color-alert-hovered: #ffbb33; --color-alert-container: #ffeecc; --color-on-alert-container: #664400; --color-alert-container-hovered: #fff6e5; --color-error: #ad291f; --color-on-error: #ffffff; --color-error-hovered: #d93426; --color-error-container: #f7d7d4; --color-on-error-container: #822017; --color-error-container-hovered: #fbeceb; --color-info: #0c5291; --color-on-info: #ffffff; --color-info-hovered: #0f69b9; --color-info-container: #c2e0fa; --color-on-info-container: #0c5291; --color-info-container-hovered: #e6f2fd; --color-neutral: #3a4757; --color-on-neutral: #ffffff; --color-neutral-hovered: #4f6076; --color-neutral-container: #f0f2f5; --color-on-neutral-container: #3a4757; --color-neutral-container-hovered: #f6f8f9; --color-background: #ffffff; --color-on-background: #152233; --color-background-variant: #f4f9fe; --color-on-background-variant: #152233; --color-surface: #ffffff; --color-on-surface: #152233; --color-surface-hovered: #f6f8f9; --color-surface-inverse: #2b3441; --color-on-surface-inverse: #ffffff; --color-surface-inverse-hovered: #3a4757; --color-outline: #acb8c7; --color-outline-high: #202730; --color-overlay: #202730; --color-on-overlay: #ffffff; --color-shadow: rgba(108 129 157 / .5); --ease-standard: cubic-bezier(.2,0,0,1); --ease-linear: cubic-bezier(0,0,1,1); --ease-accelerate: cubic-bezier(.3,0,.8,1.15); --ease-decelerate: cubic-bezier(.05,.7,.1,1); --ease-standard: cubic-bezier(.2,0,0,1); --ease-standard-back: cubic-bezier(.3,-.05,.7,-.5); --ease-accelerate-back: cubic-bezier(.45,1.45,.8,1); --ease-decelerate-back: cubic-bezier(.42,0,.58,1); --opacity-0: 0; --opacity-none: 100%; --opacity-dim-1: 72%; --opacity-dim-2: 56%; --opacity-dim-3: 40%; --opacity-dim-4: 16%; --opacity-dim-5: 8%; --radius-none: 0px; --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px; --shadow-xs: 0 1px 2px 0 var(--color-shadow); --shadow-sm: 0 4px 8px 0 var(--color-shadow); --shadow-md: 0 6px 12px 0 var(--color-shadow); --shadow-lg: 0 8px 16px 0 var(--color-shadow); --shadow-xl: 0 12px 24px 0 var(--color-shadow); --shadow-none: none; --spacing-scale: 16; --spacing-factor: calc(16 / var(--spacing-scale)); --spacing-auto: auto; --spacing-none: 0px; --spacing-sm: calc(.25rem * var(--spacing-factor)); --spacing-md: calc(.5rem * var(--spacing-factor)); --spacing-lg: calc(1rem * var(--spacing-factor)); --spacing-xl: calc(1.5rem * var(--spacing-factor)); --spacing-2xl: calc(2rem * var(--spacing-factor)); --spacing-3xl: calc(2.5rem * var(--spacing-factor)); --spacing-sz-0: 0rem; --spacing-sz-1: calc(.625rem * var(--spacing-factor)); --spacing-sz-2: calc(.125rem * var(--spacing-factor)); --spacing-sz-4: calc(.25rem * var(--spacing-factor)); --spacing-sz-6: calc(.375rem * var(--spacing-factor)); --spacing-sz-8: calc(.5rem * var(--spacing-factor)); --spacing-sz-10: calc(.625rem * var(--spacing-factor)); --spacing-sz-12: calc(.75rem * var(--spacing-factor)); --spacing-sz-14: calc(.875rem * var(--spacing-factor)); --spacing-sz-16: calc(1rem * var(--spacing-factor)); --spacing-sz-20: calc(1.25rem * var(--spacing-factor)); --spacing-sz-24: calc(1.5rem * var(--spacing-factor)); --spacing-sz-28: calc(1.75rem * var(--spacing-factor)); --spacing-sz-32: calc(2rem * var(--spacing-factor)); --spacing-sz-36: calc(2.25rem * var(--spacing-factor)); --spacing-sz-40: calc(2.5rem * var(--spacing-factor)); --spacing-sz-44: calc(2.75rem * var(--spacing-factor)); --spacing-sz-48: calc(3rem * var(--spacing-factor)); --spacing-sz-56: calc(3.5rem * var(--spacing-factor)); --spacing-sz-64: calc(4rem * var(--spacing-factor)); --spacing-sz-80: calc(5rem * var(--spacing-factor)); --spacing-sz-96: calc(6rem * var(--spacing-factor)); --spacing-sz-112: calc(7rem * var(--spacing-factor)); --spacing-sz-128: calc(8rem * var(--spacing-factor)); --spacing-sz-144: calc(9rem * var(--spacing-factor)); --spacing-sz-160: calc(10rem * var(--spacing-factor)); --spacing-sz-176: calc(11rem * var(--spacing-factor)); --spacing-sz-192: calc(12rem * var(--spacing-factor)); --spacing-sz-208: calc(13rem * var(--spacing-factor)); --spacing-sz-224: calc(14rem * var(--spacing-factor)); --spacing-sz-240: calc(15rem * var(--spacing-factor)); --spacing-sz-256: calc(16rem * var(--spacing-factor)); --spacing-sz-288: calc(18rem * var(--spacing-factor)); --spacing-sz-320: calc(20rem * var(--spacing-factor)); --spacing-sz-384: calc(24rem * var(--spacing-factor)); --spacing-sz-400: calc(25rem * var(--spacing-factor)); --spacing-sz-416: calc(26rem * var(--spacing-factor)); --spacing-sz-432: calc(27rem * var(--spacing-factor)); --spacing-sz-448: calc(28rem * var(--spacing-factor)); --spacing-sz-464: calc(29rem * var(--spacing-factor)); --spacing-sz-480: calc(30rem * var(--spacing-factor)); --spacing-sz-512: calc(32rem * var(--spacing-factor)); --spacing-sz-544: calc(34rem * var(--spacing-factor)); --spacing-sz-576: calc(36rem * var(--spacing-factor)); --spacing-sz-608: calc(39rem * var(--spacing-factor)); --spacing-sz-640: calc(40rem * var(--spacing-factor)); --spacing-sz-672: calc(42rem * var(--spacing-factor)); --spacing-sz-704: calc(44rem * var(--spacing-factor)); --spacing-sz-736: calc(46rem * var(--spacing-factor)); --spacing-sz-768: calc(48rem * var(--spacing-factor)); --spacing-sz-800: calc(50rem * var(--spacing-factor)); --spacing-sz-832: calc(52rem * var(--spacing-factor)); --spacing-sz-864: calc(54rem * var(--spacing-factor)); --z-index-hide: -1; --z-index-base: 0; --z-index-raised: 1; --z-index-dropdown: 1000; --z-index-sticky: 1100; --z-index-overlay: 1300; --z-index-modal: 1400; --z-index-popover: 1500; --z-index-skip-link: 1600; --z-index-toast: 1700; --z-index-tooltip: 1800;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/theme-utils",
-  "version": "8.1.8",
+  "version": "9.0.0",
   "description": "package for managing Spark theme configuration",
   "publishConfig": {
     "access": "public"
@@ -17,10 +17,6 @@
   "scripts": {
     "build": "vite build"
   },
-  "dependencies": {
-    "deepmerge": "4.3.1",
-    "type-fest": "3.13.1"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/adevinta/spark.git",
@@ -35,5 +31,5 @@
   },
   "homepage": "https://sparkui.vercel.app",
   "license": "MIT",
-  "gitHead": "e29d6cfd8145f8ce93cc94062c33ce62a07476e0"
+  "gitHead": "8fe6ef5b52e2440947f6278e00d00c89410a9ca8"
 }

package/dist/contrastCheck.d.ts

@@ -1,656 +0,0 @@
-import { Theme } from './types';
-/**
- * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
- *
- * - Normal text  expected ratio: 4.5:1
- * - Large text (>= 18pt or 14pt with bold font) expected ratio: 3:1
- *
- * (1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px)
- *
- *
- * How to read contrast:
- *
- * In the ratio "4.5:1", the 4.5 represents the luminance of the lighter color compared to the darker color, which is 1.
- * A ratio of 4.5:1 means the lighter color is 4.5 times brighter than the darker color.
- *
- * 1:1 – No contrast (the two colors are identical).
- * 21:1 (maximum contrast, black vs. white).
- */
-export declare function checkColorContrast(hex1: string, hex2: string, fontSizePx: number): {
-    contrastRatio: string;
-    score: string;
-    textSize: string;
-    colors: [string, string];
-};
-export declare const getThemeContrastReport: (theme: Theme) => {
-    main: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    mainHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    mainContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    mainContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    support: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    supportHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    supportContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    supportContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    accent: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    accentHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    accentContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    accentContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    basic: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    basicHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    basicContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    basicContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    success: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    successHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    successContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    successContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    error: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    errorHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    errorContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    errorContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    alert: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    alertHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    alertContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    alertContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    info: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    infoHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    infoContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    infoContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    neutral: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    neutralHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    neutralContainer: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    neutralContainerHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    background: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    backgroundVariant: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    surface: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    surfaceHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    surfaceInverse: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-    surfaceInverseHovered: {
-        small: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        large: {
-            contrastRatio: string;
-            score: string;
-            textSize: string;
-            colors: [string, string];
-        };
-        previewStyles: string;
-    };
-};

package/dist/createTheme.d.ts

@@ -1,13 +0,0 @@
-import { type Theme } from './types';
-/**
- * Creates a custom theme by merging the default theme with a partial custom theme passed as an argument.
- *
- * @param {Partial<Theme>} theme - A partial theme object which holds the theme values that need to be customized or overridden. When a category is included in the `theme` parameter, all of the category's tokens must be overridden.
- * @param {Theme} [fromTheme=defaultTheme] - (Optional) A theme object from which to derive the new custom theme (instead of Spark's `defaultTheme`)
- *
- * @example
- *
- * const alternativeTheme: Partial<Theme> = { ... }
- * const newTheme = createTheme(alternativeTheme)
- */
-export declare function createTheme(theme: Partial<Theme>, fromTheme?: Theme): Theme;

package/dist/defaultTheme.d.ts

@@ -1,2 +0,0 @@
-import type { Theme } from './types';
-export declare const defaultTheme: Theme;

package/dist/defaultThemeDark.d.ts

@@ -1,2 +0,0 @@
-import { type Theme } from './types';
-export declare const defaultThemeDark: Theme;

package/dist/types.d.ts

@@ -1,206 +0,0 @@
-import { RequireAtLeastOne } from 'type-fest';
-interface SparkFontSize {
-    fontSize: string;
-    lineHeight: string;
-    fontWeight?: string;
-    letterSpacing?: string;
-}
-export interface Theme {
-    borderRadius: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-    };
-    borderWidth: {
-        none: string;
-        sm: string;
-        md: string;
-    };
-    boxShadow: {
-        sm: string;
-        DEFAULT: string;
-        md: string;
-        lg: string;
-        xl: string;
-        none: string;
-    };
-    /**
-     * Spark color specifications: https://zeroheight.com/1186e1705/p/0879a9-colors/b/27d7a3
-     */
-    colors: {
-        basic: string;
-        onBasic: string;
-        basicHovered: string;
-        basicContainer: string;
-        onBasicContainer: string;
-        basicContainerHovered: string;
-        accent: string;
-        onAccent: string;
-        accentHovered: string;
-        accentContainer: string;
-        onAccentContainer: string;
-        accentContainerHovered: string;
-        accentVariant: string;
-        onAccentVariant: string;
-        accentVariantHovered: string;
-        main: string;
-        onMain: string;
-        mainHovered: string;
-        mainContainer: string;
-        onMainContainer: string;
-        mainContainerHovered: string;
-        support: string;
-        onSupport: string;
-        supportHovered: string;
-        supportContainer: string;
-        onSupportContainer: string;
-        supportContainerHovered: string;
-        mainVariant: string;
-        onMainVariant: string;
-        mainVariantHovered: string;
-        supportVariant: string;
-        onSupportVariant: string;
-        supportVariantHovered: string;
-        success: string;
-        onSuccess: string;
-        successHovered: string;
-        successContainer: string;
-        onSuccessContainer: string;
-        successContainerHovered: string;
-        alert: string;
-        onAlert: string;
-        alertHovered: string;
-        alertContainer: string;
-        onAlertContainer: string;
-        alertContainerHovered: string;
-        error: string;
-        onError: string;
-        errorHovered: string;
-        errorContainer: string;
-        onErrorContainer: string;
-        errorContainerHovered: string;
-        info: string;
-        onInfo: string;
-        infoHovered: string;
-        infoContainer: string;
-        onInfoContainer: string;
-        infoContainerHovered: string;
-        neutral: string;
-        onNeutral: string;
-        neutralHovered: string;
-        neutralContainer: string;
-        onNeutralContainer: string;
-        neutralContainerHovered: string;
-        background: string;
-        onBackground: string;
-        backgroundVariant: string;
-        onBackgroundVariant: string;
-        surface: string;
-        onSurface: string;
-        surfaceHovered: string;
-        surfaceInverse: string;
-        onSurfaceInverse: string;
-        surfaceInverseHovered: string;
-        outline: string;
-        outlineHigh: string;
-        overlay: string;
-        onOverlay: string;
-    };
-    fontFamily: {
-        sans: string;
-        mono: string;
-    };
-    /**
-     * https://www.figma.com/file/ezqkDE3LqYrek9MvYnr4dR/Spark-Foundations?node-id=105%3A2710&t=lLeJnznf64zUBmdL-4
-     */
-    fontSize: {
-        /** Reserved for short/important large text */
-        display1: SparkFontSize;
-        display1Expanded: SparkFontSize;
-        /** Reserved for short/important medium text */
-        display2: SparkFontSize;
-        display2Expanded: SparkFontSize;
-        /** Reserved for short/important small text */
-        display3: SparkFontSize;
-        display3Expanded: SparkFontSize;
-        /** High-emphasis large text */
-        headline1: SparkFontSize;
-        headline1Expanded: SparkFontSize;
-        /** High-emphasis medium text  */
-        headline2: SparkFontSize;
-        headline2Expanded: SparkFontSize;
-        /** High-emphasis small text  */
-        subhead: SparkFontSize;
-        subheadExpanded: SparkFontSize;
-        /** Content base text */
-        body1: SparkFontSize;
-        /** Content base text low hierarchy */
-        body2: SparkFontSize;
-        /** Support texts or error texts */
-        caption: SparkFontSize;
-        /** Legal texts, App bar labels */
-        small: SparkFontSize;
-        /** Content base text, Links */
-        body1Link: SparkFontSize;
-        /** Content base text, low hierarchy Links */
-        body2Link: SparkFontSize;
-        /** Support or error texts with a link */
-        captionLink: SparkFontSize;
-        /** Call to actions */
-        callout: SparkFontSize;
-    };
-    fontWeight: {
-        regular: string;
-        medium: string;
-        semiBold: string;
-        bold: string;
-    };
-    opacity: {
-        0: string;
-        none: string;
-        dim1: string;
-        dim2: string;
-        dim3: string;
-        dim4: string;
-        dim5: string;
-    };
-    screens: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    spacing: {
-        auto: string;
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-    };
-    zIndex: {
-        hide: string;
-        base: string;
-        raised: string;
-        dropdown: string;
-        sticky: string;
-        overlay: string;
-        modal: string;
-        popover: string;
-        skipLink: string;
-        toast: string;
-        tooltip: string;
-    };
-}
-export interface ThemeConfig {
-    tailwindThemeConfigPath: string;
-    htmlFontSize?: number;
-    tailwindCSSPath: string;
-    themes: RequireAtLeastOne<Record<string, Theme>, 'default'>;
-}
-export {};