@spark-ui/theme-utils 8.1.7 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/index.d.ts +0 -5
  3. package/dist/index.js +1 -1
  4. package/dist/index.mjs +1 -32
  5. package/dist/style.css +1 -0
  6. package/package.json +2 -6
  7. package/dist/contrastCheck.d.ts +0 -656
  8. package/dist/createTheme.d.ts +0 -13
  9. package/dist/defaultTheme.d.ts +0 -2
  10. package/dist/defaultThemeDark.d.ts +0 -2
  11. package/dist/types.d.ts +0 -206
package/CHANGELOG.md CHANGED
@@ -3,6 +3,20 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [9.0.0](https://github.com/adevinta/spark/compare/v8.1.8...v9.0.0) (2025-02-06)
7
+
8
+ ### Features
9
+
10
+ - upgrade Tailwind to v4 ([92758fe](https://github.com/adevinta/spark/commit/92758feaab4b69f1c4d7d3394e1421ec36592511))
11
+
12
+ ### BREAKING CHANGES
13
+
14
+ - upgrade tailwind to v4
15
+
16
+ ## [8.1.8](https://github.com/adevinta/spark/compare/v8.1.7...v8.1.8) (2025-01-28)
17
+
18
+ **Note:** Version bump only for package @spark-ui/theme-utils
19
+
6
20
  ## [8.1.7](https://github.com/adevinta/spark/compare/v8.1.6...v8.1.7) (2025-01-22)
7
21
 
8
22
  **Note:** Version bump only for package @spark-ui/theme-utils
package/dist/index.d.ts CHANGED
@@ -1,5 +0,0 @@
1
- export { createTheme } from './createTheme';
2
- export { defaultTheme } from './defaultTheme';
3
- export { defaultThemeDark } from './defaultThemeDark';
4
- export { getThemeContrastReport, checkColorContrast } from './contrastCheck';
5
- export type { Theme, ThemeConfig } from './types';
package/dist/index.js CHANGED
@@ -1 +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)}}};
1
+ "use strict";
package/dist/index.mjs CHANGED
@@ -1,32 +1 @@
1
- import u from "deepmerge";
2
- 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" } };
3
- function p(r, e = d) {
4
- return u(e, r);
5
- }
6
- 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" } });
7
- function s(r) {
8
- 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));
9
- return 0.2126 * e[0] + 0.7152 * e[1] + 0.0722 * e[2];
10
- }
11
- function v(r, e) {
12
- const o = e >= 24;
13
- return r >= 7 ? "AAA" : r >= 4.5 && !o || r >= 3 && o ? "AA" : "Failed";
14
- }
15
- function c(r, e, o) {
16
- const t = function(F, l) {
17
- const a = s(F), i = s(l);
18
- return (Math.max(a, i) + 0.05) / (Math.min(a, i) + 0.05);
19
- }(r, e);
20
- return { contrastRatio: t.toFixed(2), score: v(t, o), textSize: o >= 24 ? "Large" : "Small", colors: [r, e] };
21
- }
22
- const n = (r, e) => ({ small: c(r, e, 16), large: c(r, e, 24) }), g = (r) => {
23
- const { colors: e } = r;
24
- 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) } };
25
- };
26
- export {
27
- c as checkColorContrast,
28
- p as createTheme,
29
- d as defaultTheme,
30
- m as defaultThemeDark,
31
- g as getThemeContrastReport
32
- };
1
+
package/dist/style.css ADDED
@@ -0,0 +1 @@
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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-ui/theme-utils",
3
- "version": "8.1.7",
3
+ "version": "9.0.0",
4
4
  "description": "package for managing Spark theme configuration",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -17,10 +17,6 @@
17
17
  "scripts": {
18
18
  "build": "vite build"
19
19
  },
20
- "dependencies": {
21
- "deepmerge": "4.3.1",
22
- "type-fest": "3.13.1"
23
- },
24
20
  "repository": {
25
21
  "type": "git",
26
22
  "url": "https://github.com/adevinta/spark.git",
@@ -35,5 +31,5 @@
35
31
  },
36
32
  "homepage": "https://sparkui.vercel.app",
37
33
  "license": "MIT",
38
- "gitHead": "b42f3503f7c1cdb55250769433de9121a0366f6e"
34
+ "gitHead": "8fe6ef5b52e2440947f6278e00d00c89410a9ca8"
39
35
  }
package/dist/contrastCheck.d.ts DELETED
@@ -1,656 +0,0 @@
1
- import { Theme } from './types';
2
- /**
3
- * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
4
- *
5
- * - Normal text expected ratio: 4.5:1
6
- * - Large text (>= 18pt or 14pt with bold font) expected ratio: 3:1
7
- *
8
- * (1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px)
9
- *
10
- *
11
- * How to read contrast:
12
- *
13
- * In the ratio "4.5:1", the 4.5 represents the luminance of the lighter color compared to the darker color, which is 1.
14
- * A ratio of 4.5:1 means the lighter color is 4.5 times brighter than the darker color.
15
- *
16
- * 1:1 – No contrast (the two colors are identical).
17
- * 21:1 (maximum contrast, black vs. white).
18
- */
19
- export declare function checkColorContrast(hex1: string, hex2: string, fontSizePx: number): {
20
- contrastRatio: string;
21
- score: string;
22
- textSize: string;
23
- colors: [string, string];
24
- };
25
- export declare const getThemeContrastReport: (theme: Theme) => {
26
- main: {
27
- small: {
28
- contrastRatio: string;
29
- score: string;
30
- textSize: string;
31
- colors: [string, string];
32
- };
33
- large: {
34
- contrastRatio: string;
35
- score: string;
36
- textSize: string;
37
- colors: [string, string];
38
- };
39
- previewStyles: string;
40
- };
41
- mainHovered: {
42
- small: {
43
- contrastRatio: string;
44
- score: string;
45
- textSize: string;
46
- colors: [string, string];
47
- };
48
- large: {
49
- contrastRatio: string;
50
- score: string;
51
- textSize: string;
52
- colors: [string, string];
53
- };
54
- previewStyles: string;
55
- };
56
- mainContainer: {
57
- small: {
58
- contrastRatio: string;
59
- score: string;
60
- textSize: string;
61
- colors: [string, string];
62
- };
63
- large: {
64
- contrastRatio: string;
65
- score: string;
66
- textSize: string;
67
- colors: [string, string];
68
- };
69
- previewStyles: string;
70
- };
71
- mainContainerHovered: {
72
- small: {
73
- contrastRatio: string;
74
- score: string;
75
- textSize: string;
76
- colors: [string, string];
77
- };
78
- large: {
79
- contrastRatio: string;
80
- score: string;
81
- textSize: string;
82
- colors: [string, string];
83
- };
84
- previewStyles: string;
85
- };
86
- support: {
87
- small: {
88
- contrastRatio: string;
89
- score: string;
90
- textSize: string;
91
- colors: [string, string];
92
- };
93
- large: {
94
- contrastRatio: string;
95
- score: string;
96
- textSize: string;
97
- colors: [string, string];
98
- };
99
- previewStyles: string;
100
- };
101
- supportHovered: {
102
- small: {
103
- contrastRatio: string;
104
- score: string;
105
- textSize: string;
106
- colors: [string, string];
107
- };
108
- large: {
109
- contrastRatio: string;
110
- score: string;
111
- textSize: string;
112
- colors: [string, string];
113
- };
114
- previewStyles: string;
115
- };
116
- supportContainer: {
117
- small: {
118
- contrastRatio: string;
119
- score: string;
120
- textSize: string;
121
- colors: [string, string];
122
- };
123
- large: {
124
- contrastRatio: string;
125
- score: string;
126
- textSize: string;
127
- colors: [string, string];
128
- };
129
- previewStyles: string;
130
- };
131
- supportContainerHovered: {
132
- small: {
133
- contrastRatio: string;
134
- score: string;
135
- textSize: string;
136
- colors: [string, string];
137
- };
138
- large: {
139
- contrastRatio: string;
140
- score: string;
141
- textSize: string;
142
- colors: [string, string];
143
- };
144
- previewStyles: string;
145
- };
146
- accent: {
147
- small: {
148
- contrastRatio: string;
149
- score: string;
150
- textSize: string;
151
- colors: [string, string];
152
- };
153
- large: {
154
- contrastRatio: string;
155
- score: string;
156
- textSize: string;
157
- colors: [string, string];
158
- };
159
- previewStyles: string;
160
- };
161
- accentHovered: {
162
- small: {
163
- contrastRatio: string;
164
- score: string;
165
- textSize: string;
166
- colors: [string, string];
167
- };
168
- large: {
169
- contrastRatio: string;
170
- score: string;
171
- textSize: string;
172
- colors: [string, string];
173
- };
174
- previewStyles: string;
175
- };
176
- accentContainer: {
177
- small: {
178
- contrastRatio: string;
179
- score: string;
180
- textSize: string;
181
- colors: [string, string];
182
- };
183
- large: {
184
- contrastRatio: string;
185
- score: string;
186
- textSize: string;
187
- colors: [string, string];
188
- };
189
- previewStyles: string;
190
- };
191
- accentContainerHovered: {
192
- small: {
193
- contrastRatio: string;
194
- score: string;
195
- textSize: string;
196
- colors: [string, string];
197
- };
198
- large: {
199
- contrastRatio: string;
200
- score: string;
201
- textSize: string;
202
- colors: [string, string];
203
- };
204
- previewStyles: string;
205
- };
206
- basic: {
207
- small: {
208
- contrastRatio: string;
209
- score: string;
210
- textSize: string;
211
- colors: [string, string];
212
- };
213
- large: {
214
- contrastRatio: string;
215
- score: string;
216
- textSize: string;
217
- colors: [string, string];
218
- };
219
- previewStyles: string;
220
- };
221
- basicHovered: {
222
- small: {
223
- contrastRatio: string;
224
- score: string;
225
- textSize: string;
226
- colors: [string, string];
227
- };
228
- large: {
229
- contrastRatio: string;
230
- score: string;
231
- textSize: string;
232
- colors: [string, string];
233
- };
234
- previewStyles: string;
235
- };
236
- basicContainer: {
237
- small: {
238
- contrastRatio: string;
239
- score: string;
240
- textSize: string;
241
- colors: [string, string];
242
- };
243
- large: {
244
- contrastRatio: string;
245
- score: string;
246
- textSize: string;
247
- colors: [string, string];
248
- };
249
- previewStyles: string;
250
- };
251
- basicContainerHovered: {
252
- small: {
253
- contrastRatio: string;
254
- score: string;
255
- textSize: string;
256
- colors: [string, string];
257
- };
258
- large: {
259
- contrastRatio: string;
260
- score: string;
261
- textSize: string;
262
- colors: [string, string];
263
- };
264
- previewStyles: string;
265
- };
266
- success: {
267
- small: {
268
- contrastRatio: string;
269
- score: string;
270
- textSize: string;
271
- colors: [string, string];
272
- };
273
- large: {
274
- contrastRatio: string;
275
- score: string;
276
- textSize: string;
277
- colors: [string, string];
278
- };
279
- previewStyles: string;
280
- };
281
- successHovered: {
282
- small: {
283
- contrastRatio: string;
284
- score: string;
285
- textSize: string;
286
- colors: [string, string];
287
- };
288
- large: {
289
- contrastRatio: string;
290
- score: string;
291
- textSize: string;
292
- colors: [string, string];
293
- };
294
- previewStyles: string;
295
- };
296
- successContainer: {
297
- small: {
298
- contrastRatio: string;
299
- score: string;
300
- textSize: string;
301
- colors: [string, string];
302
- };
303
- large: {
304
- contrastRatio: string;
305
- score: string;
306
- textSize: string;
307
- colors: [string, string];
308
- };
309
- previewStyles: string;
310
- };
311
- successContainerHovered: {
312
- small: {
313
- contrastRatio: string;
314
- score: string;
315
- textSize: string;
316
- colors: [string, string];
317
- };
318
- large: {
319
- contrastRatio: string;
320
- score: string;
321
- textSize: string;
322
- colors: [string, string];
323
- };
324
- previewStyles: string;
325
- };
326
- error: {
327
- small: {
328
- contrastRatio: string;
329
- score: string;
330
- textSize: string;
331
- colors: [string, string];
332
- };
333
- large: {
334
- contrastRatio: string;
335
- score: string;
336
- textSize: string;
337
- colors: [string, string];
338
- };
339
- previewStyles: string;
340
- };
341
- errorHovered: {
342
- small: {
343
- contrastRatio: string;
344
- score: string;
345
- textSize: string;
346
- colors: [string, string];
347
- };
348
- large: {
349
- contrastRatio: string;
350
- score: string;
351
- textSize: string;
352
- colors: [string, string];
353
- };
354
- previewStyles: string;
355
- };
356
- errorContainer: {
357
- small: {
358
- contrastRatio: string;
359
- score: string;
360
- textSize: string;
361
- colors: [string, string];
362
- };
363
- large: {
364
- contrastRatio: string;
365
- score: string;
366
- textSize: string;
367
- colors: [string, string];
368
- };
369
- previewStyles: string;
370
- };
371
- errorContainerHovered: {
372
- small: {
373
- contrastRatio: string;
374
- score: string;
375
- textSize: string;
376
- colors: [string, string];
377
- };
378
- large: {
379
- contrastRatio: string;
380
- score: string;
381
- textSize: string;
382
- colors: [string, string];
383
- };
384
- previewStyles: string;
385
- };
386
- alert: {
387
- small: {
388
- contrastRatio: string;
389
- score: string;
390
- textSize: string;
391
- colors: [string, string];
392
- };
393
- large: {
394
- contrastRatio: string;
395
- score: string;
396
- textSize: string;
397
- colors: [string, string];
398
- };
399
- previewStyles: string;
400
- };
401
- alertHovered: {
402
- small: {
403
- contrastRatio: string;
404
- score: string;
405
- textSize: string;
406
- colors: [string, string];
407
- };
408
- large: {
409
- contrastRatio: string;
410
- score: string;
411
- textSize: string;
412
- colors: [string, string];
413
- };
414
- previewStyles: string;
415
- };
416
- alertContainer: {
417
- small: {
418
- contrastRatio: string;
419
- score: string;
420
- textSize: string;
421
- colors: [string, string];
422
- };
423
- large: {
424
- contrastRatio: string;
425
- score: string;
426
- textSize: string;
427
- colors: [string, string];
428
- };
429
- previewStyles: string;
430
- };
431
- alertContainerHovered: {
432
- small: {
433
- contrastRatio: string;
434
- score: string;
435
- textSize: string;
436
- colors: [string, string];
437
- };
438
- large: {
439
- contrastRatio: string;
440
- score: string;
441
- textSize: string;
442
- colors: [string, string];
443
- };
444
- previewStyles: string;
445
- };
446
- info: {
447
- small: {
448
- contrastRatio: string;
449
- score: string;
450
- textSize: string;
451
- colors: [string, string];
452
- };
453
- large: {
454
- contrastRatio: string;
455
- score: string;
456
- textSize: string;
457
- colors: [string, string];
458
- };
459
- previewStyles: string;
460
- };
461
- infoHovered: {
462
- small: {
463
- contrastRatio: string;
464
- score: string;
465
- textSize: string;
466
- colors: [string, string];
467
- };
468
- large: {
469
- contrastRatio: string;
470
- score: string;
471
- textSize: string;
472
- colors: [string, string];
473
- };
474
- previewStyles: string;
475
- };
476
- infoContainer: {
477
- small: {
478
- contrastRatio: string;
479
- score: string;
480
- textSize: string;
481
- colors: [string, string];
482
- };
483
- large: {
484
- contrastRatio: string;
485
- score: string;
486
- textSize: string;
487
- colors: [string, string];
488
- };
489
- previewStyles: string;
490
- };
491
- infoContainerHovered: {
492
- small: {
493
- contrastRatio: string;
494
- score: string;
495
- textSize: string;
496
- colors: [string, string];
497
- };
498
- large: {
499
- contrastRatio: string;
500
- score: string;
501
- textSize: string;
502
- colors: [string, string];
503
- };
504
- previewStyles: string;
505
- };
506
- neutral: {
507
- small: {
508
- contrastRatio: string;
509
- score: string;
510
- textSize: string;
511
- colors: [string, string];
512
- };
513
- large: {
514
- contrastRatio: string;
515
- score: string;
516
- textSize: string;
517
- colors: [string, string];
518
- };
519
- previewStyles: string;
520
- };
521
- neutralHovered: {
522
- small: {
523
- contrastRatio: string;
524
- score: string;
525
- textSize: string;
526
- colors: [string, string];
527
- };
528
- large: {
529
- contrastRatio: string;
530
- score: string;
531
- textSize: string;
532
- colors: [string, string];
533
- };
534
- previewStyles: string;
535
- };
536
- neutralContainer: {
537
- small: {
538
- contrastRatio: string;
539
- score: string;
540
- textSize: string;
541
- colors: [string, string];
542
- };
543
- large: {
544
- contrastRatio: string;
545
- score: string;
546
- textSize: string;
547
- colors: [string, string];
548
- };
549
- previewStyles: string;
550
- };
551
- neutralContainerHovered: {
552
- small: {
553
- contrastRatio: string;
554
- score: string;
555
- textSize: string;
556
- colors: [string, string];
557
- };
558
- large: {
559
- contrastRatio: string;
560
- score: string;
561
- textSize: string;
562
- colors: [string, string];
563
- };
564
- previewStyles: string;
565
- };
566
- background: {
567
- small: {
568
- contrastRatio: string;
569
- score: string;
570
- textSize: string;
571
- colors: [string, string];
572
- };
573
- large: {
574
- contrastRatio: string;
575
- score: string;
576
- textSize: string;
577
- colors: [string, string];
578
- };
579
- previewStyles: string;
580
- };
581
- backgroundVariant: {
582
- small: {
583
- contrastRatio: string;
584
- score: string;
585
- textSize: string;
586
- colors: [string, string];
587
- };
588
- large: {
589
- contrastRatio: string;
590
- score: string;
591
- textSize: string;
592
- colors: [string, string];
593
- };
594
- previewStyles: string;
595
- };
596
- surface: {
597
- small: {
598
- contrastRatio: string;
599
- score: string;
600
- textSize: string;
601
- colors: [string, string];
602
- };
603
- large: {
604
- contrastRatio: string;
605
- score: string;
606
- textSize: string;
607
- colors: [string, string];
608
- };
609
- previewStyles: string;
610
- };
611
- surfaceHovered: {
612
- small: {
613
- contrastRatio: string;
614
- score: string;
615
- textSize: string;
616
- colors: [string, string];
617
- };
618
- large: {
619
- contrastRatio: string;
620
- score: string;
621
- textSize: string;
622
- colors: [string, string];
623
- };
624
- previewStyles: string;
625
- };
626
- surfaceInverse: {
627
- small: {
628
- contrastRatio: string;
629
- score: string;
630
- textSize: string;
631
- colors: [string, string];
632
- };
633
- large: {
634
- contrastRatio: string;
635
- score: string;
636
- textSize: string;
637
- colors: [string, string];
638
- };
639
- previewStyles: string;
640
- };
641
- surfaceInverseHovered: {
642
- small: {
643
- contrastRatio: string;
644
- score: string;
645
- textSize: string;
646
- colors: [string, string];
647
- };
648
- large: {
649
- contrastRatio: string;
650
- score: string;
651
- textSize: string;
652
- colors: [string, string];
653
- };
654
- previewStyles: string;
655
- };
656
- };
package/dist/createTheme.d.ts DELETED
@@ -1,13 +0,0 @@
1
- import { type Theme } from './types';
2
- /**
3
- * Creates a custom theme by merging the default theme with a partial custom theme passed as an argument.
4
- *
5
- * @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.
6
- * @param {Theme} [fromTheme=defaultTheme] - (Optional) A theme object from which to derive the new custom theme (instead of Spark's `defaultTheme`)
7
- *
8
- * @example
9
- *
10
- * const alternativeTheme: Partial<Theme> = { ... }
11
- * const newTheme = createTheme(alternativeTheme)
12
- */
13
- export declare function createTheme(theme: Partial<Theme>, fromTheme?: Theme): Theme;
package/dist/defaultTheme.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import type { Theme } from './types';
2
- export declare const defaultTheme: Theme;
package/dist/defaultThemeDark.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { type Theme } from './types';
2
- export declare const defaultThemeDark: Theme;
package/dist/types.d.ts DELETED
@@ -1,206 +0,0 @@
1
- import { RequireAtLeastOne } from 'type-fest';
2
- interface SparkFontSize {
3
- fontSize: string;
4
- lineHeight: string;
5
- fontWeight?: string;
6
- letterSpacing?: string;
7
- }
8
- export interface Theme {
9
- borderRadius: {
10
- none: string;
11
- sm: string;
12
- md: string;
13
- lg: string;
14
- xl: string;
15
- full: string;
16
- };
17
- borderWidth: {
18
- none: string;
19
- sm: string;
20
- md: string;
21
- };
22
- boxShadow: {
23
- sm: string;
24
- DEFAULT: string;
25
- md: string;
26
- lg: string;
27
- xl: string;
28
- none: string;
29
- };
30
- /**
31
- * Spark color specifications: https://zeroheight.com/1186e1705/p/0879a9-colors/b/27d7a3
32
- */
33
- colors: {
34
- basic: string;
35
- onBasic: string;
36
- basicHovered: string;
37
- basicContainer: string;
38
- onBasicContainer: string;
39
- basicContainerHovered: string;
40
- accent: string;
41
- onAccent: string;
42
- accentHovered: string;
43
- accentContainer: string;
44
- onAccentContainer: string;
45
- accentContainerHovered: string;
46
- accentVariant: string;
47
- onAccentVariant: string;
48
- accentVariantHovered: string;
49
- main: string;
50
- onMain: string;
51
- mainHovered: string;
52
- mainContainer: string;
53
- onMainContainer: string;
54
- mainContainerHovered: string;
55
- support: string;
56
- onSupport: string;
57
- supportHovered: string;
58
- supportContainer: string;
59
- onSupportContainer: string;
60
- supportContainerHovered: string;
61
- mainVariant: string;
62
- onMainVariant: string;
63
- mainVariantHovered: string;
64
- supportVariant: string;
65
- onSupportVariant: string;
66
- supportVariantHovered: string;
67
- success: string;
68
- onSuccess: string;
69
- successHovered: string;
70
- successContainer: string;
71
- onSuccessContainer: string;
72
- successContainerHovered: string;
73
- alert: string;
74
- onAlert: string;
75
- alertHovered: string;
76
- alertContainer: string;
77
- onAlertContainer: string;
78
- alertContainerHovered: string;
79
- error: string;
80
- onError: string;
81
- errorHovered: string;
82
- errorContainer: string;
83
- onErrorContainer: string;
84
- errorContainerHovered: string;
85
- info: string;
86
- onInfo: string;
87
- infoHovered: string;
88
- infoContainer: string;
89
- onInfoContainer: string;
90
- infoContainerHovered: string;
91
- neutral: string;
92
- onNeutral: string;
93
- neutralHovered: string;
94
- neutralContainer: string;
95
- onNeutralContainer: string;
96
- neutralContainerHovered: string;
97
- background: string;
98
- onBackground: string;
99
- backgroundVariant: string;
100
- onBackgroundVariant: string;
101
- surface: string;
102
- onSurface: string;
103
- surfaceHovered: string;
104
- surfaceInverse: string;
105
- onSurfaceInverse: string;
106
- surfaceInverseHovered: string;
107
- outline: string;
108
- outlineHigh: string;
109
- overlay: string;
110
- onOverlay: string;
111
- };
112
- fontFamily: {
113
- sans: string;
114
- mono: string;
115
- };
116
- /**
117
- * https://www.figma.com/file/ezqkDE3LqYrek9MvYnr4dR/Spark-Foundations?node-id=105%3A2710&t=lLeJnznf64zUBmdL-4
118
- */
119
- fontSize: {
120
- /** Reserved for short/important large text */
121
- display1: SparkFontSize;
122
- display1Expanded: SparkFontSize;
123
- /** Reserved for short/important medium text */
124
- display2: SparkFontSize;
125
- display2Expanded: SparkFontSize;
126
- /** Reserved for short/important small text */
127
- display3: SparkFontSize;
128
- display3Expanded: SparkFontSize;
129
- /** High-emphasis large text */
130
- headline1: SparkFontSize;
131
- headline1Expanded: SparkFontSize;
132
- /** High-emphasis medium text */
133
- headline2: SparkFontSize;
134
- headline2Expanded: SparkFontSize;
135
- /** High-emphasis small text */
136
- subhead: SparkFontSize;
137
- subheadExpanded: SparkFontSize;
138
- /** Content base text */
139
- body1: SparkFontSize;
140
- /** Content base text low hierarchy */
141
- body2: SparkFontSize;
142
- /** Support texts or error texts */
143
- caption: SparkFontSize;
144
- /** Legal texts, App bar labels */
145
- small: SparkFontSize;
146
- /** Content base text, Links */
147
- body1Link: SparkFontSize;
148
- /** Content base text, low hierarchy Links */
149
- body2Link: SparkFontSize;
150
- /** Support or error texts with a link */
151
- captionLink: SparkFontSize;
152
- /** Call to actions */
153
- callout: SparkFontSize;
154
- };
155
- fontWeight: {
156
- regular: string;
157
- medium: string;
158
- semiBold: string;
159
- bold: string;
160
- };
161
- opacity: {
162
- 0: string;
163
- none: string;
164
- dim1: string;
165
- dim2: string;
166
- dim3: string;
167
- dim4: string;
168
- dim5: string;
169
- };
170
- screens: {
171
- sm: string;
172
- md: string;
173
- lg: string;
174
- xl: string;
175
- };
176
- spacing: {
177
- auto: string;
178
- none: string;
179
- sm: string;
180
- md: string;
181
- lg: string;
182
- xl: string;
183
- '2xl': string;
184
- '3xl': string;
185
- };
186
- zIndex: {
187
- hide: string;
188
- base: string;
189
- raised: string;
190
- dropdown: string;
191
- sticky: string;
192
- overlay: string;
193
- modal: string;
194
- popover: string;
195
- skipLink: string;
196
- toast: string;
197
- tooltip: string;
198
- };
199
- }
200
- export interface ThemeConfig {
201
- tailwindThemeConfigPath: string;
202
- htmlFontSize?: number;
203
- tailwindCSSPath: string;
204
- themes: RequireAtLeastOne<Record<string, Theme>, 'default'>;
205
- }
206
- export {};