@skdx/tokens 0.27.0 → 0.29.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.
- package/LICENSE +21 -0
- package/README.md +92 -69
- package/dist/foundation.css +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1 -1
- package/dist/themes/AntDark.cjs +1 -1
- package/dist/themes/AntDark.d.cts +3 -12
- package/dist/themes/AntDark.d.ts +3 -12
- package/dist/themes/AntDark.js +1 -1
- package/dist/themes/{AntBrand.cjs → AntLight.cjs} +1 -1
- package/dist/themes/{AntBrand.d.cts → AntLight.d.cts} +1 -1
- package/dist/themes/{AntBrand.d.ts → AntLight.d.ts} +1 -1
- package/dist/themes/{AntBrand.js → AntLight.js} +1 -1
- package/dist/themes/CatppuccinLatte.cjs +1 -1
- package/dist/themes/CatppuccinLatte.d.cts +1 -7
- package/dist/themes/CatppuccinLatte.d.ts +1 -7
- package/dist/themes/CatppuccinLatte.js +1 -1
- package/dist/themes/CatppuccinMocha.cjs +1 -1
- package/dist/themes/CatppuccinMocha.d.cts +1 -7
- package/dist/themes/CatppuccinMocha.d.ts +1 -7
- package/dist/themes/CatppuccinMocha.js +1 -1
- package/dist/themes/ChakraDark.cjs +1 -1
- package/dist/themes/ChakraDark.d.cts +3 -12
- package/dist/themes/ChakraDark.d.ts +3 -12
- package/dist/themes/ChakraDark.js +1 -1
- package/dist/themes/{ChakraBrand.cjs → ChakraLight.cjs} +1 -1
- package/dist/themes/{ChakraBrand.d.cts → ChakraLight.d.cts} +1 -1
- package/dist/themes/{ChakraBrand.d.ts → ChakraLight.d.ts} +1 -1
- package/dist/themes/{ChakraBrand.js → ChakraLight.js} +1 -1
- package/dist/themes/CupcakeDark.cjs +1 -1
- package/dist/themes/CupcakeDark.d.cts +3 -5
- package/dist/themes/CupcakeDark.d.ts +3 -5
- package/dist/themes/CupcakeLight.cjs +1 -1
- package/dist/themes/CupcakeLight.d.cts +1 -8
- package/dist/themes/CupcakeLight.d.ts +1 -8
- package/dist/themes/CupcakeLight.js +1 -1
- package/dist/themes/DefaultTheme.cjs +1 -1
- package/dist/themes/DefaultTheme.d.cts +3 -15
- package/dist/themes/DefaultTheme.d.ts +3 -15
- package/dist/themes/DefaultTheme.js +1 -1
- package/dist/themes/DraculaLight.cjs +1 -1
- package/dist/themes/DraculaLight.d.cts +3 -10
- package/dist/themes/DraculaLight.d.ts +3 -10
- package/dist/themes/DraculaLight.js +1 -1
- package/dist/themes/EmeraldDark.cjs +1 -1
- package/dist/themes/EmeraldDark.d.cts +3 -8
- package/dist/themes/EmeraldDark.d.ts +3 -8
- package/dist/themes/EmeraldDark.js +1 -1
- package/dist/themes/{EmeraldBrand.cjs → EmeraldLight.cjs} +1 -1
- package/dist/themes/{EmeraldBrand.d.cts → EmeraldLight.d.cts} +1 -1
- package/dist/themes/{EmeraldBrand.d.ts → EmeraldLight.d.ts} +1 -1
- package/dist/themes/{EmeraldBrand.js → EmeraldLight.js} +1 -1
- package/dist/themes/EverforestDark.cjs +1 -1
- package/dist/themes/EverforestDark.d.cts +1 -2
- package/dist/themes/EverforestDark.d.ts +1 -2
- package/dist/themes/EverforestDark.js +1 -1
- package/dist/themes/EverforestLight.cjs +1 -1
- package/dist/themes/EverforestLight.d.cts +3 -9
- package/dist/themes/EverforestLight.d.ts +3 -9
- package/dist/themes/FluentDark.cjs +1 -1
- package/dist/themes/FluentDark.d.cts +3 -11
- package/dist/themes/FluentDark.d.ts +3 -11
- package/dist/themes/FluentDark.js +1 -1
- package/dist/themes/{FluentBrand.cjs → FluentLight.cjs} +1 -1
- package/dist/themes/{FluentBrand.d.cts → FluentLight.d.cts} +1 -1
- package/dist/themes/{FluentBrand.d.ts → FluentLight.d.ts} +1 -1
- package/dist/themes/{FluentBrand.js → FluentLight.js} +1 -1
- package/dist/themes/GraphiteDark.cjs +1 -1
- package/dist/themes/GraphiteDark.d.cts +3 -8
- package/dist/themes/GraphiteDark.d.ts +3 -8
- package/dist/themes/GraphiteDark.js +1 -1
- package/dist/themes/{GraphiteBrand.cjs → GraphiteLight.cjs} +1 -1
- package/dist/themes/{GraphiteBrand.d.cts → GraphiteLight.d.cts} +1 -1
- package/dist/themes/{GraphiteBrand.d.ts → GraphiteLight.d.ts} +1 -1
- package/dist/themes/{GraphiteBrand.js → GraphiteLight.js} +1 -1
- package/dist/themes/GruvboxDark.cjs +1 -1
- package/dist/themes/GruvboxDark.d.cts +1 -7
- package/dist/themes/GruvboxDark.d.ts +1 -7
- package/dist/themes/GruvboxDark.js +1 -1
- package/dist/themes/GruvboxLight.cjs +1 -1
- package/dist/themes/GruvboxLight.d.cts +3 -13
- package/dist/themes/GruvboxLight.d.ts +3 -13
- package/dist/themes/GruvboxLight.js +1 -1
- package/dist/themes/MaterialDark.cjs +1 -1
- package/dist/themes/MaterialDark.d.cts +3 -12
- package/dist/themes/MaterialDark.d.ts +3 -12
- package/dist/themes/MaterialDark.js +1 -1
- package/dist/themes/{MaterialBrand.cjs → MaterialLight.cjs} +1 -1
- package/dist/themes/MaterialLight.d.cts +3 -0
- package/dist/themes/MaterialLight.d.ts +3 -0
- package/dist/themes/{MaterialBrand.js → MaterialLight.js} +1 -1
- package/dist/themes/MidnightDark.cjs +1 -0
- package/dist/themes/MidnightDark.d.cts +3 -0
- package/dist/themes/MidnightDark.d.ts +3 -0
- package/dist/themes/{MidnightBrand.js → MidnightDark.js} +1 -1
- package/dist/themes/MidnightLight.cjs +1 -1
- package/dist/themes/MidnightLight.d.cts +4 -6
- package/dist/themes/MidnightLight.d.ts +4 -6
- package/dist/themes/MidnightLight.js +1 -1
- package/dist/themes/NordDark.cjs +1 -1
- package/dist/themes/NordDark.js +1 -1
- package/dist/themes/NordLight.cjs +1 -1
- package/dist/themes/NordLight.d.cts +3 -13
- package/dist/themes/NordLight.d.ts +3 -13
- package/dist/themes/NordLight.js +1 -1
- package/dist/themes/OneDark.cjs +1 -1
- package/dist/themes/OneDark.d.cts +1 -7
- package/dist/themes/OneDark.d.ts +1 -7
- package/dist/themes/OneDark.js +1 -1
- package/dist/themes/OneLight.cjs +1 -1
- package/dist/themes/OneLight.d.cts +3 -9
- package/dist/themes/OneLight.d.ts +3 -9
- package/dist/themes/OneLight.js +1 -1
- package/dist/themes/PrimerDark.cjs +1 -1
- package/dist/themes/PrimerDark.d.cts +0 -1
- package/dist/themes/PrimerDark.d.ts +0 -1
- package/dist/themes/PrimerDark.js +1 -1
- package/dist/themes/PrimerLight.d.cts +1 -7
- package/dist/themes/PrimerLight.d.ts +1 -7
- package/dist/themes/RosePine.cjs +1 -1
- package/dist/themes/RosePine.d.cts +1 -7
- package/dist/themes/RosePine.d.ts +1 -7
- package/dist/themes/RosePine.js +1 -1
- package/dist/themes/RosePineDawn.cjs +1 -1
- package/dist/themes/RosePineDawn.d.cts +3 -9
- package/dist/themes/RosePineDawn.d.ts +3 -9
- package/dist/themes/RosePineDawn.js +1 -1
- package/dist/themes/SkandaDark.cjs +1 -1
- package/dist/themes/SkandaDark.d.cts +5 -8
- package/dist/themes/SkandaDark.d.ts +5 -8
- package/dist/themes/SkandaDark.js +1 -1
- package/dist/themes/SkandaLight.cjs +1 -1
- package/dist/themes/SkandaLight.js +1 -1
- package/dist/themes/SolarizedDark.d.cts +1 -7
- package/dist/themes/SolarizedDark.d.ts +1 -7
- package/dist/themes/SolarizedLight.cjs +1 -1
- package/dist/themes/SolarizedLight.d.cts +1 -7
- package/dist/themes/SolarizedLight.d.ts +1 -7
- package/dist/themes/SolarizedLight.js +1 -1
- package/dist/themes/SynthwaveDark.d.cts +1 -7
- package/dist/themes/SynthwaveDark.d.ts +1 -7
- package/dist/themes/SynthwaveLight.cjs +1 -1
- package/dist/themes/SynthwaveLight.d.cts +3 -12
- package/dist/themes/SynthwaveLight.d.ts +3 -12
- package/dist/themes/SynthwaveLight.js +1 -1
- package/dist/themes/brands.cjs +1 -1
- package/dist/themes/brands.d.cts +5 -28
- package/dist/themes/brands.d.ts +5 -28
- package/dist/themes/brands.js +1 -1
- package/dist/themes/createBrandTheme.cjs +1 -1
- package/dist/themes/createBrandTheme.d.cts +11 -23
- package/dist/themes/createBrandTheme.d.ts +11 -23
- package/dist/themes/createBrandTheme.js +1 -1
- package/dist/themes/index.cjs +1 -1
- package/dist/themes/index.d.cts +10 -9
- package/dist/themes/index.d.ts +10 -9
- package/dist/themes/index.js +1 -1
- package/dist/themes.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tokens.dtcg.json +14246 -0
- package/dist/utils/aliases.cjs +9 -3
- package/dist/utils/aliases.d.cts +19 -99
- package/dist/utils/aliases.d.ts +19 -99
- package/dist/utils/aliases.js +9 -3
- package/dist/utils/contrast.d.cts +2 -17
- package/dist/utils/contrast.d.ts +2 -17
- package/dist/utils/cssVars.cjs +2 -2
- package/dist/utils/cssVars.d.cts +12 -37
- package/dist/utils/cssVars.d.ts +12 -37
- package/dist/utils/cssVars.js +2 -2
- package/dist/utils/foundation.cjs +4 -4
- package/dist/utils/foundation.d.cts +24 -177
- package/dist/utils/foundation.d.ts +24 -177
- package/dist/utils/foundation.js +3 -3
- package/dist/utils/mode.cjs +1 -1
- package/dist/utils/mode.d.cts +18 -57
- package/dist/utils/mode.d.ts +18 -57
- package/dist/utils/mode.js +1 -1
- package/dist/utils/theme.cjs +1 -1
- package/dist/utils/theme.d.cts +68 -292
- package/dist/utils/theme.d.ts +68 -292
- package/dist/utils/toCss.cjs +5 -5
- package/dist/utils/toCss.d.cts +22 -60
- package/dist/utils/toCss.d.ts +22 -60
- package/dist/utils/toCss.js +5 -5
- package/package.json +5 -4
- package/dist/themes/MaterialBrand.d.cts +0 -3
- package/dist/themes/MaterialBrand.d.ts +0 -3
- package/dist/themes/MidnightBrand.cjs +0 -1
- package/dist/themes/MidnightBrand.d.cts +0 -11
- package/dist/themes/MidnightBrand.d.ts +0 -11
package/dist/utils/aliases.cjs
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var t=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var k=(o,r)=>{for(var s in r)d(o,s,{get:r[s],enumerable:!0})},i=(o,r,s,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let c of x(r))!n.call(o,c)&&c!==s&&d(o,c,{get:()=>r[c],enumerable:!(a=t(r,c))||a.enumerable});return o};var v=o=>i(d({},"__esModule",{value:!0}),o);var m={};k(m,{aliasesToCss:()=>g,aliasesToCssVars:()=>b,colorAliases:()=>e,darkAliasesToCss:()=>u,darkColorAliases:()=>l});module.exports=v(m);var e=[["--skdx-color-surface-inverse","var(--skdx-color-neutral-900)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-50)"],["--skdx-color-surface-page","var(--skdx-color-semantic-background)"],["--skdx-color-surface-default","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-surface-raised","var(--skdx-color-semantic-background)"],["--skdx-color-surface-sunken","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-surface-selected","var(--skdx-color-primary-50)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-surface-overlay","var(--skdx-color-semantic-overlay)"],["--skdx-color-text-default","var(--skdx-color-semantic-text)"],["--skdx-color-text-muted","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-on-accent","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-text-accent","var(--skdx-color-primary-700)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-600)"],["--skdx-color-text-placeholder","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-danger","var(--skdx-color-danger-700)"],["--skdx-color-text-success","var(--skdx-color-success-800)"],["--skdx-color-text-warning","var(--skdx-color-warning-900)"],["--skdx-color-text-info","var(--skdx-color-primary-700)"],["--skdx-color-border-default","var(--skdx-color-semantic-border)"],["--skdx-color-border-strong","var(--skdx-color-semantic-border-strong)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-200)"],["--skdx-color-border-accent","var(--skdx-color-primary-600)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-200)"],["--skdx-color-border-danger","var(--skdx-color-danger-600)"],["--skdx-color-border-success","var(--skdx-color-success-600)"],["--skdx-color-border-warning","var(--skdx-color-warning-600)"],["--skdx-color-action-primary-bg","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-bg-hover","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-bg-pressed","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-border-hover","var(--skdx-color-primary-800)"],["--skdx-color-action-primary-text","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-action-primary-border","var(--skdx-color-primary-600)"],["--skdx-color-action-secondary-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-300)"],["--skdx-color-action-secondary-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-secondary-border","var(--skdx-color-semantic-border)"],["--skdx-color-action-outline-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-outline-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-ghost-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-danger-bg","var(--skdx-color-danger-700)"],["--skdx-color-action-danger-bg-hover","var(--skdx-color-danger-800)"],["--skdx-color-action-danger-bg-pressed","var(--skdx-color-danger-900)"],["--skdx-color-action-danger-text","var(--skdx-color-danger-50)"],["--skdx-color-action-danger-border","var(--skdx-color-danger-700)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-100)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-700)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-200)"],["--skdx-color-field-bg","var(--skdx-color-semantic-background)"],["--skdx-color-field-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-50)"],["--skdx-color-field-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-field-border-hover","var(--skdx-color-neutral-500)"],["--skdx-color-field-border-focus","var(--skdx-color-primary-600)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-700)"],["--skdx-color-field-text","var(--skdx-color-semantic-text)"],["--skdx-color-selection-bg","var(--skdx-color-primary-600)"],["--skdx-color-selection-bg-hover","var(--skdx-color-primary-600)"],["--skdx-color-selection-mark","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-highlight-bg","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-highlight-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-50)"],["--skdx-color-status-info-border","var(--skdx-color-primary-200)"],["--skdx-color-status-info-text","var(--skdx-color-primary-800)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-600)"],["--skdx-color-status-success-bg","var(--skdx-color-success-50)"],["--skdx-color-status-success-border","var(--skdx-color-success-200)"],["--skdx-color-status-success-text","var(--skdx-color-success-800)"],["--skdx-color-status-success-icon","var(--skdx-color-success-600)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-50)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-600)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-50)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-600)"],["--skdx-color-status-neutral-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-status-neutral-border","var(--skdx-color-semantic-border)"],["--skdx-color-status-neutral-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-neutral-icon","var(--skdx-color-semantic-text-muted)"],["--skdx-color-focus-ring","var(--skdx-color-semantic-focus-ring)"],["--skdx-color-focus-ring-offset","var(--skdx-color-semantic-background)"],["--skdx-color-separator","var(--skdx-color-semantic-border)"],["--skdx-color-track","var(--skdx-color-neutral-100)"],["--skdx-color-track-fill","var(--skdx-color-primary-600)"],["--skdx-color-skeleton","var(--skdx-color-neutral-200)"],["--skdx-color-skeleton-sheen","var(--skdx-color-neutral-100)"]],l=[["--skdx-color-text-accent","var(--skdx-color-primary-300)"],["--skdx-color-text-danger","var(--skdx-color-danger-300)"],["--skdx-color-text-success","var(--skdx-color-success-300)"],["--skdx-color-text-warning","var(--skdx-color-warning-300)"],["--skdx-color-text-info","var(--skdx-color-primary-300)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-400)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-400)"],["--skdx-color-border-danger","var(--skdx-color-danger-400)"],["--skdx-color-border-success","var(--skdx-color-success-400)"],["--skdx-color-border-warning","var(--skdx-color-warning-400)"],["--skdx-color-surface-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-field-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-highlight-bg","var(--skdx-color-neutral-800)"],["--skdx-color-surface-sunken","var(--skdx-color-neutral-800)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-surface-selected","var(--skdx-color-primary-950)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-400)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-700)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-600)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-800)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-700)"],["--skdx-color-track","var(--skdx-color-neutral-900)"],["--skdx-color-skeleton","var(--skdx-color-neutral-800)"],["--skdx-color-skeleton-sheen","var(--skdx-color-neutral-700)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-900)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-950)"],["--skdx-color-status-info-border","var(--skdx-color-primary-800)"],["--skdx-color-status-info-text","var(--skdx-color-primary-200)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-400)"],["--skdx-color-status-success-bg","var(--skdx-color-success-950)"],["--skdx-color-status-success-border","var(--skdx-color-success-800)"],["--skdx-color-status-success-text","var(--skdx-color-success-200)"],["--skdx-color-status-success-icon","var(--skdx-color-success-400)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-950)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-400)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-950)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-400)"],["--skdx-color-surface-inverse","var(--skdx-color-neutral-100)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-900)"]];function u(o){let r=l.map(([s,a])=>` ${s}: ${a};`);return`${o} {
|
|
1
|
+
"use strict";var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var i=(o,r)=>{for(var s in r)d(o,s,{get:r[s],enumerable:!0})},v=(o,r,s,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let c of n(r))!k.call(o,c)&&c!==s&&d(o,c,{get:()=>r[c],enumerable:!(a=x(r,c))||a.enumerable});return o};var u=o=>v(d({},"__esModule",{value:!0}),o);var p={};i(p,{aliasesToCss:()=>b,aliasesToCssVars:()=>f,colorAliases:()=>e,contrastAliasesToCss:()=>m,contrastColorAliases:()=>l,darkAliasesToCss:()=>g,darkColorAliases:()=>t});module.exports=u(p);var e=[["--skdx-color-surface-inverse","var(--skdx-color-neutral-900)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-50)"],["--skdx-color-surface-page","var(--skdx-color-semantic-background)"],["--skdx-color-surface-default","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-surface-raised","var(--skdx-color-semantic-background)"],["--skdx-color-surface-sunken","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-surface-selected","var(--skdx-color-primary-50)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-surface-overlay","var(--skdx-color-semantic-overlay)"],["--skdx-color-text-default","var(--skdx-color-semantic-text)"],["--skdx-color-text-muted","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-on-accent","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-text-accent","var(--skdx-color-primary-700)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-600)"],["--skdx-color-text-placeholder","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-danger","var(--skdx-color-danger-700)"],["--skdx-color-text-success","var(--skdx-color-success-800)"],["--skdx-color-text-warning","var(--skdx-color-warning-900)"],["--skdx-color-text-info","var(--skdx-color-primary-700)"],["--skdx-color-border-default","var(--skdx-color-semantic-border)"],["--skdx-color-border-strong","var(--skdx-color-semantic-border-strong)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-200)"],["--skdx-color-border-accent","var(--skdx-color-primary-600)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-200)"],["--skdx-color-border-danger","var(--skdx-color-danger-600)"],["--skdx-color-border-success","var(--skdx-color-success-600)"],["--skdx-color-border-warning","var(--skdx-color-warning-600)"],["--skdx-color-action-primary-bg","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-bg-hover","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-border-hover","var(--skdx-color-primary-800)"],["--skdx-color-action-primary-text","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-action-primary-border","var(--skdx-color-primary-600)"],["--skdx-color-action-secondary-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-300)"],["--skdx-color-action-secondary-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-secondary-border","var(--skdx-color-semantic-border)"],["--skdx-color-action-outline-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-outline-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-ghost-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-danger-bg","var(--skdx-color-danger-700)"],["--skdx-color-action-danger-bg-hover","var(--skdx-color-danger-800)"],["--skdx-color-action-danger-bg-pressed","var(--skdx-color-danger-900)"],["--skdx-color-action-danger-text","var(--skdx-color-danger-50)"],["--skdx-color-action-danger-border","var(--skdx-color-danger-700)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-100)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-700)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-200)"],["--skdx-color-field-bg","var(--skdx-color-semantic-background)"],["--skdx-color-field-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-50)"],["--skdx-color-field-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-field-border-hover","var(--skdx-color-neutral-500)"],["--skdx-color-field-border-focus","var(--skdx-color-primary-600)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-700)"],["--skdx-color-field-text","var(--skdx-color-semantic-text)"],["--skdx-color-selection-bg","var(--skdx-color-primary-600)"],["--skdx-color-selection-mark","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-highlight-bg","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-highlight-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-50)"],["--skdx-color-status-info-border","var(--skdx-color-primary-200)"],["--skdx-color-status-info-text","var(--skdx-color-primary-800)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-600)"],["--skdx-color-status-success-bg","var(--skdx-color-success-50)"],["--skdx-color-status-success-border","var(--skdx-color-success-200)"],["--skdx-color-status-success-text","var(--skdx-color-success-800)"],["--skdx-color-status-success-icon","var(--skdx-color-success-600)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-50)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-600)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-50)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-600)"],["--skdx-color-status-neutral-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-status-neutral-border","var(--skdx-color-semantic-border)"],["--skdx-color-status-neutral-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-neutral-icon","var(--skdx-color-semantic-text-muted)"],["--skdx-color-focus-ring","var(--skdx-color-semantic-focus-ring)"],["--skdx-color-separator","var(--skdx-color-semantic-border)"],["--skdx-color-track","var(--skdx-color-neutral-100)"],["--skdx-color-track-fill","var(--skdx-color-primary-600)"],["--skdx-color-skeleton","var(--skdx-color-neutral-200)"]],l=[["--skdx-color-border-default","var(--skdx-color-semantic-border-strong)"],["--skdx-color-border-strong","var(--skdx-color-semantic-text-muted)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-400)"],["--skdx-color-text-muted","var(--skdx-color-semantic-text)"],["--skdx-color-text-placeholder","var(--skdx-color-semantic-text)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-focus-ring","var(--skdx-color-semantic-text)"],["--skdx-color-separator","var(--skdx-color-semantic-border-strong)"]],t=[["--skdx-color-text-accent","var(--skdx-color-primary-300)"],["--skdx-color-text-danger","var(--skdx-color-danger-300)"],["--skdx-color-text-success","var(--skdx-color-success-300)"],["--skdx-color-text-warning","var(--skdx-color-warning-300)"],["--skdx-color-text-info","var(--skdx-color-primary-300)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-400)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-400)"],["--skdx-color-border-danger","var(--skdx-color-danger-400)"],["--skdx-color-border-success","var(--skdx-color-success-400)"],["--skdx-color-border-warning","var(--skdx-color-warning-400)"],["--skdx-color-surface-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-field-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-highlight-bg","var(--skdx-color-neutral-800)"],["--skdx-color-surface-sunken","var(--skdx-color-neutral-800)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-surface-selected","var(--skdx-color-primary-950)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-400)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-700)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-600)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-800)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-700)"],["--skdx-color-track","var(--skdx-color-neutral-900)"],["--skdx-color-skeleton","var(--skdx-color-neutral-600)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-900)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-950)"],["--skdx-color-status-info-border","var(--skdx-color-primary-800)"],["--skdx-color-status-info-text","var(--skdx-color-primary-200)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-400)"],["--skdx-color-status-success-bg","var(--skdx-color-success-950)"],["--skdx-color-status-success-border","var(--skdx-color-success-800)"],["--skdx-color-status-success-text","var(--skdx-color-success-200)"],["--skdx-color-status-success-icon","var(--skdx-color-success-400)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-950)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-400)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-950)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-400)"],["--skdx-color-surface-inverse","var(--skdx-color-neutral-100)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-900)"]];function g(o){let r=t.map(([s,a])=>` ${s}: ${a};`);return`${o} {
|
|
2
2
|
${r.join(`
|
|
3
3
|
`)}
|
|
4
4
|
}
|
|
5
|
-
`}function
|
|
5
|
+
`}function b(){return`:root {
|
|
6
6
|
${e.map(([r,s])=>` ${r}: ${s};`).join(`
|
|
7
7
|
`)}
|
|
8
8
|
}
|
|
9
|
-
`}function
|
|
9
|
+
`}function m(){return`@media (prefers-contrast: more) {
|
|
10
|
+
:root {
|
|
11
|
+
${l.map(([r,s])=>` ${r}: ${s};`).join(`
|
|
12
|
+
`)}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
`}function f(){return Object.fromEntries(e.map(([o,r])=>[o,r]))}0&&(module.exports={aliasesToCss,aliasesToCssVars,colorAliases,contrastAliasesToCss,contrastColorAliases,darkAliasesToCss,darkColorAliases});
|
package/dist/utils/aliases.d.cts
CHANGED
|
@@ -1,121 +1,41 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The semantic alias layer: the vocabulary component skins are allowed to name.
|
|
3
|
-
*
|
|
4
|
-
* Why this file exists
|
|
5
|
-
* -------------------
|
|
6
|
-
* `@skdx/skins` is forbidden from containing a colour literal — every colour
|
|
7
|
-
* it declares must resolve through a token. But the surface a theme actually
|
|
8
|
-
* defines is small: five ramps (`primary`, `neutral`, `success`, `warning`,
|
|
9
|
-
* `danger`) and ten `semantic` entries. A button skin needs more than that. It
|
|
10
|
-
* needs to say "the background of a pressed primary action" and "the border of
|
|
11
|
-
* an invalid field", and neither exists as a theme-authored token.
|
|
12
|
-
*
|
|
13
|
-
* The naive fix is to add those names to `SemanticColors` and set them in all
|
|
14
|
-
* 38 themes. That is 38 files edited per alias added, and every one of those
|
|
15
|
-
* edits is a chance for a theme to drift out of step with the others.
|
|
16
|
-
*
|
|
17
|
-
* This layer takes the other option: aliases are **pure `var()` indirection**,
|
|
18
|
-
* declared once at `:root`, pointing at ramp steps and semantic entries the
|
|
19
|
-
* themes already define. No alias holds a colour — it holds the *name of* a
|
|
20
|
-
* colour. So when `[data-skdx-theme="nord-dark"]` redeclares
|
|
21
|
-
* `--skdx-color-primary-600` at its own higher-specificity selector, every alias
|
|
22
|
-
* pointing at that step re-resolves to Nord's value automatically. Adding a
|
|
23
|
-
* theme costs nothing here, and adding an alias costs one line rather than 38.
|
|
24
|
-
*
|
|
25
|
-
* This is also why the aliases are emitted at `:root` rather than inside each
|
|
26
|
-
* theme block: they must sit *below* the theme declarations in the cascade so a
|
|
27
|
-
* theme can still override an alias outright when the derivation is wrong for
|
|
28
|
-
* it. {@link darkColorAliases} is exactly that escape hatch in use: a ramp runs
|
|
29
|
-
* light-to-dark in every theme, so the aliases that put ink directly on the
|
|
30
|
-
* page need the opposite end in dark mode.
|
|
31
|
-
*
|
|
32
|
-
* Choosing the ramp step
|
|
33
|
-
* ----------------------
|
|
34
|
-
* A dark theme's ramp is authored for dark — `NordDark`'s `primary-600` is
|
|
35
|
-
* already a step that works as a filled background on a dark surface, the same
|
|
36
|
-
* way `DefaultTheme`'s is on a light one. So a single step choice per alias is
|
|
37
|
-
* correct in both modes for the *filled* aliases. It does not hold for aliases
|
|
38
|
-
* that put ink or a wash directly on the page — see {@link darkColorAliases},
|
|
39
|
-
* which was written after measuring 22 of 38 themes failing WCAG contrast.
|
|
40
|
-
*
|
|
41
|
-
* @see docs/architecture/skin-token-map.md for the per-property mapping table.
|
|
42
|
-
*/
|
|
43
|
-
/**
|
|
44
|
-
* Every alias, as `[name, value]` pairs where `value` is always a `var()`
|
|
45
|
-
* reference — never a literal. Grouped by the question a skin author asks.
|
|
46
|
-
*
|
|
47
|
-
* Kept as data rather than a hand-written CSS string so
|
|
48
|
-
* `aliases.test.ts` can assert the no-literal rule mechanically over the whole
|
|
49
|
-
* set, which is the only thing standing between this file and the exact class
|
|
50
|
-
* of drift the skins package's Stylelint rule exists to prevent.
|
|
51
|
-
*/
|
|
1
|
+
/** Alias entries as `[name, value]` pairs, where `value` is always a `var()` reference. */
|
|
52
2
|
export declare const colorAliases: ReadonlyArray<readonly [string, string]>;
|
|
53
3
|
/**
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
* The base table above picks one ramp step per alias and claims that is correct
|
|
59
|
-
* in both modes. For most aliases it is: a theme authors its ramp for its own
|
|
60
|
-
* mode, so `primary-600` is a usable filled background whichever way the page
|
|
61
|
-
* faces.
|
|
62
|
-
*
|
|
63
|
-
* It is *not* true for the aliases that put ink directly on the page. A ramp
|
|
64
|
-
* runs light at 50 to dark at 950 in every theme, dark ones included — that is
|
|
65
|
-
* what makes a ramp a ramp. So `--skdx-color-text-danger: danger-700` is dark
|
|
66
|
-
* red: correct on a white page, and nearly invisible on a charcoal one. The
|
|
67
|
-
* same applies to every "wash + dark ink" status pairing, and to the neutral
|
|
68
|
-
* fills (`surface-sunken`, `track`, `skeleton`) that assume the page is lighter
|
|
69
|
-
* than they are.
|
|
70
|
-
*
|
|
71
|
-
* Measured before writing this: 22 of the 38 themes had at least one contrast
|
|
72
|
-
* failure, every one of them a dark theme, and every failure in this list.
|
|
73
|
-
* Input text sat at 1.07:1 and the tooltip at 1.00:1.
|
|
74
|
-
*
|
|
75
|
-
* The fix uses the escape hatch the base table was designed around — a theme
|
|
76
|
-
* may override an alias, because `[data-skdx-theme="…"]` outranks `:root`. These
|
|
77
|
-
* overrides are emitted automatically for every theme whose `mode` is `'dark'`,
|
|
78
|
-
* so the cost stays "one line per alias" rather than "one edit per theme", and
|
|
79
|
-
* a new dark theme is correct the day it lands without anyone remembering this
|
|
80
|
-
* file exists.
|
|
81
|
-
*
|
|
82
|
-
* Steps mirror around the middle of the ramp: 700 → 300, 800 → 200, 50 → 950.
|
|
83
|
-
* That keeps the light and dark treatments the same *distance* from their
|
|
84
|
-
* background rather than merely both legible.
|
|
4
|
+
* {@link colorAliases} entries whose value steps toward the theme's ink colour
|
|
5
|
+
* under `@media (prefers-contrast: more)`, for consumers who ask the OS for
|
|
6
|
+
* stronger contrast than a theme's default alias resolves to.
|
|
7
|
+
* @public
|
|
85
8
|
*/
|
|
9
|
+
export declare const contrastColorAliases: ReadonlyArray<readonly [string, string]>;
|
|
10
|
+
/** Dark-mode overrides for {@link colorAliases} entries whose fixed step would put invisible ink on the page. */
|
|
86
11
|
export declare const darkColorAliases: ReadonlyArray<readonly [string, string]>;
|
|
87
12
|
/**
|
|
88
|
-
* Renders {@link darkColorAliases} at
|
|
89
|
-
*
|
|
90
|
-
* @param selector - The theme's own selector, e.g. `'[data-skdx-theme="nord-dark"]'`.
|
|
13
|
+
* Renders {@link darkColorAliases} at the theme selector.
|
|
14
|
+
* @param selector - Theme selector, e.g. `'[data-skdx-theme="nord-dark"]'`.
|
|
91
15
|
* @public
|
|
92
16
|
*/
|
|
93
17
|
export declare function darkAliasesToCss(selector: string): string;
|
|
94
18
|
/**
|
|
95
|
-
* Renders {@link colorAliases} as a `:root` rule block.
|
|
96
|
-
*
|
|
97
|
-
* Emitted *after* `foundationToCss()` and *before* the theme blocks in
|
|
98
|
-
* `@skdx/tokens/css`. Order matters in one direction only: an alias must be
|
|
99
|
-
* able to be overridden by a theme, and `:root` loses to
|
|
100
|
-
* `[data-skdx-theme="…"]` on specificity regardless of source order, so the
|
|
101
|
-
* position here is for readability rather than correctness.
|
|
102
|
-
*
|
|
103
|
-
* @returns A CSS string, e.g. `':root {\n --skdx-color-action-primary-bg: var(--skdx-color-primary-600);\n …\n}\n'`.
|
|
19
|
+
* Renders {@link colorAliases} as a `:root` rule block. `:root` always loses
|
|
20
|
+
* to `[data-skdx-theme="…"]` on specificity.
|
|
104
21
|
*
|
|
22
|
+
* @returns CSS string; emitted after `foundationToCss()` and before theme blocks.
|
|
105
23
|
* @example
|
|
106
24
|
* ```ts
|
|
107
25
|
* import { foundationToCss, aliasesToCss } from '@skdx/tokens';
|
|
108
|
-
*
|
|
109
26
|
* fs.writeFileSync('tokens.css', foundationToCss() + aliasesToCss());
|
|
110
27
|
* ```
|
|
111
|
-
*
|
|
112
28
|
* @public
|
|
113
29
|
*/
|
|
114
30
|
export declare function aliasesToCss(): string;
|
|
115
31
|
/**
|
|
116
|
-
* {@link
|
|
117
|
-
*
|
|
118
|
-
*
|
|
32
|
+
* Renders {@link contrastColorAliases} inside an `@media (prefers-contrast: more)` block.
|
|
33
|
+
* @returns CSS string; emitted after `aliasesToCss()`.
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
export declare function contrastAliasesToCss(): string;
|
|
37
|
+
/**
|
|
38
|
+
* {@link colorAliases} as a plain object for JS consumers (counterpart to `themeToCssVars`).
|
|
119
39
|
* @public
|
|
120
40
|
*/
|
|
121
41
|
export declare function aliasesToCssVars(): Record<string, string>;
|
package/dist/utils/aliases.d.ts
CHANGED
|
@@ -1,121 +1,41 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The semantic alias layer: the vocabulary component skins are allowed to name.
|
|
3
|
-
*
|
|
4
|
-
* Why this file exists
|
|
5
|
-
* -------------------
|
|
6
|
-
* `@skdx/skins` is forbidden from containing a colour literal — every colour
|
|
7
|
-
* it declares must resolve through a token. But the surface a theme actually
|
|
8
|
-
* defines is small: five ramps (`primary`, `neutral`, `success`, `warning`,
|
|
9
|
-
* `danger`) and ten `semantic` entries. A button skin needs more than that. It
|
|
10
|
-
* needs to say "the background of a pressed primary action" and "the border of
|
|
11
|
-
* an invalid field", and neither exists as a theme-authored token.
|
|
12
|
-
*
|
|
13
|
-
* The naive fix is to add those names to `SemanticColors` and set them in all
|
|
14
|
-
* 38 themes. That is 38 files edited per alias added, and every one of those
|
|
15
|
-
* edits is a chance for a theme to drift out of step with the others.
|
|
16
|
-
*
|
|
17
|
-
* This layer takes the other option: aliases are **pure `var()` indirection**,
|
|
18
|
-
* declared once at `:root`, pointing at ramp steps and semantic entries the
|
|
19
|
-
* themes already define. No alias holds a colour — it holds the *name of* a
|
|
20
|
-
* colour. So when `[data-skdx-theme="nord-dark"]` redeclares
|
|
21
|
-
* `--skdx-color-primary-600` at its own higher-specificity selector, every alias
|
|
22
|
-
* pointing at that step re-resolves to Nord's value automatically. Adding a
|
|
23
|
-
* theme costs nothing here, and adding an alias costs one line rather than 38.
|
|
24
|
-
*
|
|
25
|
-
* This is also why the aliases are emitted at `:root` rather than inside each
|
|
26
|
-
* theme block: they must sit *below* the theme declarations in the cascade so a
|
|
27
|
-
* theme can still override an alias outright when the derivation is wrong for
|
|
28
|
-
* it. {@link darkColorAliases} is exactly that escape hatch in use: a ramp runs
|
|
29
|
-
* light-to-dark in every theme, so the aliases that put ink directly on the
|
|
30
|
-
* page need the opposite end in dark mode.
|
|
31
|
-
*
|
|
32
|
-
* Choosing the ramp step
|
|
33
|
-
* ----------------------
|
|
34
|
-
* A dark theme's ramp is authored for dark — `NordDark`'s `primary-600` is
|
|
35
|
-
* already a step that works as a filled background on a dark surface, the same
|
|
36
|
-
* way `DefaultTheme`'s is on a light one. So a single step choice per alias is
|
|
37
|
-
* correct in both modes for the *filled* aliases. It does not hold for aliases
|
|
38
|
-
* that put ink or a wash directly on the page — see {@link darkColorAliases},
|
|
39
|
-
* which was written after measuring 22 of 38 themes failing WCAG contrast.
|
|
40
|
-
*
|
|
41
|
-
* @see docs/architecture/skin-token-map.md for the per-property mapping table.
|
|
42
|
-
*/
|
|
43
|
-
/**
|
|
44
|
-
* Every alias, as `[name, value]` pairs where `value` is always a `var()`
|
|
45
|
-
* reference — never a literal. Grouped by the question a skin author asks.
|
|
46
|
-
*
|
|
47
|
-
* Kept as data rather than a hand-written CSS string so
|
|
48
|
-
* `aliases.test.ts` can assert the no-literal rule mechanically over the whole
|
|
49
|
-
* set, which is the only thing standing between this file and the exact class
|
|
50
|
-
* of drift the skins package's Stylelint rule exists to prevent.
|
|
51
|
-
*/
|
|
1
|
+
/** Alias entries as `[name, value]` pairs, where `value` is always a `var()` reference. */
|
|
52
2
|
export declare const colorAliases: ReadonlyArray<readonly [string, string]>;
|
|
53
3
|
/**
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
* The base table above picks one ramp step per alias and claims that is correct
|
|
59
|
-
* in both modes. For most aliases it is: a theme authors its ramp for its own
|
|
60
|
-
* mode, so `primary-600` is a usable filled background whichever way the page
|
|
61
|
-
* faces.
|
|
62
|
-
*
|
|
63
|
-
* It is *not* true for the aliases that put ink directly on the page. A ramp
|
|
64
|
-
* runs light at 50 to dark at 950 in every theme, dark ones included — that is
|
|
65
|
-
* what makes a ramp a ramp. So `--skdx-color-text-danger: danger-700` is dark
|
|
66
|
-
* red: correct on a white page, and nearly invisible on a charcoal one. The
|
|
67
|
-
* same applies to every "wash + dark ink" status pairing, and to the neutral
|
|
68
|
-
* fills (`surface-sunken`, `track`, `skeleton`) that assume the page is lighter
|
|
69
|
-
* than they are.
|
|
70
|
-
*
|
|
71
|
-
* Measured before writing this: 22 of the 38 themes had at least one contrast
|
|
72
|
-
* failure, every one of them a dark theme, and every failure in this list.
|
|
73
|
-
* Input text sat at 1.07:1 and the tooltip at 1.00:1.
|
|
74
|
-
*
|
|
75
|
-
* The fix uses the escape hatch the base table was designed around — a theme
|
|
76
|
-
* may override an alias, because `[data-skdx-theme="…"]` outranks `:root`. These
|
|
77
|
-
* overrides are emitted automatically for every theme whose `mode` is `'dark'`,
|
|
78
|
-
* so the cost stays "one line per alias" rather than "one edit per theme", and
|
|
79
|
-
* a new dark theme is correct the day it lands without anyone remembering this
|
|
80
|
-
* file exists.
|
|
81
|
-
*
|
|
82
|
-
* Steps mirror around the middle of the ramp: 700 → 300, 800 → 200, 50 → 950.
|
|
83
|
-
* That keeps the light and dark treatments the same *distance* from their
|
|
84
|
-
* background rather than merely both legible.
|
|
4
|
+
* {@link colorAliases} entries whose value steps toward the theme's ink colour
|
|
5
|
+
* under `@media (prefers-contrast: more)`, for consumers who ask the OS for
|
|
6
|
+
* stronger contrast than a theme's default alias resolves to.
|
|
7
|
+
* @public
|
|
85
8
|
*/
|
|
9
|
+
export declare const contrastColorAliases: ReadonlyArray<readonly [string, string]>;
|
|
10
|
+
/** Dark-mode overrides for {@link colorAliases} entries whose fixed step would put invisible ink on the page. */
|
|
86
11
|
export declare const darkColorAliases: ReadonlyArray<readonly [string, string]>;
|
|
87
12
|
/**
|
|
88
|
-
* Renders {@link darkColorAliases} at
|
|
89
|
-
*
|
|
90
|
-
* @param selector - The theme's own selector, e.g. `'[data-skdx-theme="nord-dark"]'`.
|
|
13
|
+
* Renders {@link darkColorAliases} at the theme selector.
|
|
14
|
+
* @param selector - Theme selector, e.g. `'[data-skdx-theme="nord-dark"]'`.
|
|
91
15
|
* @public
|
|
92
16
|
*/
|
|
93
17
|
export declare function darkAliasesToCss(selector: string): string;
|
|
94
18
|
/**
|
|
95
|
-
* Renders {@link colorAliases} as a `:root` rule block.
|
|
96
|
-
*
|
|
97
|
-
* Emitted *after* `foundationToCss()` and *before* the theme blocks in
|
|
98
|
-
* `@skdx/tokens/css`. Order matters in one direction only: an alias must be
|
|
99
|
-
* able to be overridden by a theme, and `:root` loses to
|
|
100
|
-
* `[data-skdx-theme="…"]` on specificity regardless of source order, so the
|
|
101
|
-
* position here is for readability rather than correctness.
|
|
102
|
-
*
|
|
103
|
-
* @returns A CSS string, e.g. `':root {\n --skdx-color-action-primary-bg: var(--skdx-color-primary-600);\n …\n}\n'`.
|
|
19
|
+
* Renders {@link colorAliases} as a `:root` rule block. `:root` always loses
|
|
20
|
+
* to `[data-skdx-theme="…"]` on specificity.
|
|
104
21
|
*
|
|
22
|
+
* @returns CSS string; emitted after `foundationToCss()` and before theme blocks.
|
|
105
23
|
* @example
|
|
106
24
|
* ```ts
|
|
107
25
|
* import { foundationToCss, aliasesToCss } from '@skdx/tokens';
|
|
108
|
-
*
|
|
109
26
|
* fs.writeFileSync('tokens.css', foundationToCss() + aliasesToCss());
|
|
110
27
|
* ```
|
|
111
|
-
*
|
|
112
28
|
* @public
|
|
113
29
|
*/
|
|
114
30
|
export declare function aliasesToCss(): string;
|
|
115
31
|
/**
|
|
116
|
-
* {@link
|
|
117
|
-
*
|
|
118
|
-
*
|
|
32
|
+
* Renders {@link contrastColorAliases} inside an `@media (prefers-contrast: more)` block.
|
|
33
|
+
* @returns CSS string; emitted after `aliasesToCss()`.
|
|
34
|
+
* @public
|
|
35
|
+
*/
|
|
36
|
+
export declare function contrastAliasesToCss(): string;
|
|
37
|
+
/**
|
|
38
|
+
* {@link colorAliases} as a plain object for JS consumers (counterpart to `themeToCssVars`).
|
|
119
39
|
* @public
|
|
120
40
|
*/
|
|
121
41
|
export declare function aliasesToCssVars(): Record<string, string>;
|
package/dist/utils/aliases.js
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
var c=[["--skdx-color-surface-inverse","var(--skdx-color-neutral-900)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-50)"],["--skdx-color-surface-page","var(--skdx-color-semantic-background)"],["--skdx-color-surface-default","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-surface-raised","var(--skdx-color-semantic-background)"],["--skdx-color-surface-sunken","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-surface-selected","var(--skdx-color-primary-50)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-surface-overlay","var(--skdx-color-semantic-overlay)"],["--skdx-color-text-default","var(--skdx-color-semantic-text)"],["--skdx-color-text-muted","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-on-accent","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-text-accent","var(--skdx-color-primary-700)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-600)"],["--skdx-color-text-placeholder","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-danger","var(--skdx-color-danger-700)"],["--skdx-color-text-success","var(--skdx-color-success-800)"],["--skdx-color-text-warning","var(--skdx-color-warning-900)"],["--skdx-color-text-info","var(--skdx-color-primary-700)"],["--skdx-color-border-default","var(--skdx-color-semantic-border)"],["--skdx-color-border-strong","var(--skdx-color-semantic-border-strong)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-200)"],["--skdx-color-border-accent","var(--skdx-color-primary-600)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-200)"],["--skdx-color-border-danger","var(--skdx-color-danger-600)"],["--skdx-color-border-success","var(--skdx-color-success-600)"],["--skdx-color-border-warning","var(--skdx-color-warning-600)"],["--skdx-color-action-primary-bg","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-bg-hover","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-bg-pressed","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-border-hover","var(--skdx-color-primary-800)"],["--skdx-color-action-primary-text","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-action-primary-border","var(--skdx-color-primary-600)"],["--skdx-color-action-secondary-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-300)"],["--skdx-color-action-secondary-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-secondary-border","var(--skdx-color-semantic-border)"],["--skdx-color-action-outline-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-outline-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-ghost-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-danger-bg","var(--skdx-color-danger-700)"],["--skdx-color-action-danger-bg-hover","var(--skdx-color-danger-800)"],["--skdx-color-action-danger-bg-pressed","var(--skdx-color-danger-900)"],["--skdx-color-action-danger-text","var(--skdx-color-danger-50)"],["--skdx-color-action-danger-border","var(--skdx-color-danger-700)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-100)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-700)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-200)"],["--skdx-color-field-bg","var(--skdx-color-semantic-background)"],["--skdx-color-field-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-50)"],["--skdx-color-field-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-field-border-hover","var(--skdx-color-neutral-500)"],["--skdx-color-field-border-focus","var(--skdx-color-primary-600)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-700)"],["--skdx-color-field-text","var(--skdx-color-semantic-text)"],["--skdx-color-selection-bg","var(--skdx-color-primary-600)"],["--skdx-color-selection-bg-hover","var(--skdx-color-primary-600)"],["--skdx-color-selection-mark","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-highlight-bg","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-highlight-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-50)"],["--skdx-color-status-info-border","var(--skdx-color-primary-200)"],["--skdx-color-status-info-text","var(--skdx-color-primary-800)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-600)"],["--skdx-color-status-success-bg","var(--skdx-color-success-50)"],["--skdx-color-status-success-border","var(--skdx-color-success-200)"],["--skdx-color-status-success-text","var(--skdx-color-success-800)"],["--skdx-color-status-success-icon","var(--skdx-color-success-600)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-50)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-600)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-50)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-600)"],["--skdx-color-status-neutral-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-status-neutral-border","var(--skdx-color-semantic-border)"],["--skdx-color-status-neutral-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-neutral-icon","var(--skdx-color-semantic-text-muted)"],["--skdx-color-focus-ring","var(--skdx-color-semantic-focus-ring)"],["--skdx-color-focus-ring-offset","var(--skdx-color-semantic-background)"],["--skdx-color-separator","var(--skdx-color-semantic-border)"],["--skdx-color-track","var(--skdx-color-neutral-100)"],["--skdx-color-track-fill","var(--skdx-color-primary-600)"],["--skdx-color-skeleton","var(--skdx-color-neutral-200)"],["--skdx-color-skeleton-sheen","var(--skdx-color-neutral-100)"]],d=[["--skdx-color-text-accent","var(--skdx-color-primary-300)"],["--skdx-color-text-danger","var(--skdx-color-danger-300)"],["--skdx-color-text-success","var(--skdx-color-success-300)"],["--skdx-color-text-warning","var(--skdx-color-warning-300)"],["--skdx-color-text-info","var(--skdx-color-primary-300)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-400)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-400)"],["--skdx-color-border-danger","var(--skdx-color-danger-400)"],["--skdx-color-border-success","var(--skdx-color-success-400)"],["--skdx-color-border-warning","var(--skdx-color-warning-400)"],["--skdx-color-surface-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-field-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-highlight-bg","var(--skdx-color-neutral-800)"],["--skdx-color-surface-sunken","var(--skdx-color-neutral-800)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-surface-selected","var(--skdx-color-primary-950)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-400)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-700)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-600)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-800)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-700)"],["--skdx-color-track","var(--skdx-color-neutral-900)"],["--skdx-color-skeleton","var(--skdx-color-neutral-800)"],["--skdx-color-skeleton-sheen","var(--skdx-color-neutral-700)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-900)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-950)"],["--skdx-color-status-info-border","var(--skdx-color-primary-800)"],["--skdx-color-status-info-text","var(--skdx-color-primary-200)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-400)"],["--skdx-color-status-success-bg","var(--skdx-color-success-950)"],["--skdx-color-status-success-border","var(--skdx-color-success-800)"],["--skdx-color-status-success-text","var(--skdx-color-success-200)"],["--skdx-color-status-success-icon","var(--skdx-color-success-400)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-950)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-400)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-950)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-400)"],["--skdx-color-surface-inverse","var(--skdx-color-neutral-100)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-900)"]];function e(o){let r=d.map(([s,a])=>` ${s}: ${a};`);return`${o} {
|
|
1
|
+
var c=[["--skdx-color-surface-inverse","var(--skdx-color-neutral-900)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-50)"],["--skdx-color-surface-page","var(--skdx-color-semantic-background)"],["--skdx-color-surface-default","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-surface-raised","var(--skdx-color-semantic-background)"],["--skdx-color-surface-sunken","var(--skdx-color-semantic-surface)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-surface-selected","var(--skdx-color-primary-50)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-surface-overlay","var(--skdx-color-semantic-overlay)"],["--skdx-color-text-default","var(--skdx-color-semantic-text)"],["--skdx-color-text-muted","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-on-accent","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-text-accent","var(--skdx-color-primary-700)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-600)"],["--skdx-color-text-placeholder","var(--skdx-color-semantic-text-muted)"],["--skdx-color-text-danger","var(--skdx-color-danger-700)"],["--skdx-color-text-success","var(--skdx-color-success-800)"],["--skdx-color-text-warning","var(--skdx-color-warning-900)"],["--skdx-color-text-info","var(--skdx-color-primary-700)"],["--skdx-color-border-default","var(--skdx-color-semantic-border)"],["--skdx-color-border-strong","var(--skdx-color-semantic-border-strong)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-200)"],["--skdx-color-border-accent","var(--skdx-color-primary-600)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-200)"],["--skdx-color-border-danger","var(--skdx-color-danger-600)"],["--skdx-color-border-success","var(--skdx-color-success-600)"],["--skdx-color-border-warning","var(--skdx-color-warning-600)"],["--skdx-color-action-primary-bg","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-bg-hover","var(--skdx-color-primary-600)"],["--skdx-color-action-primary-border-hover","var(--skdx-color-primary-800)"],["--skdx-color-action-primary-text","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-action-primary-border","var(--skdx-color-primary-600)"],["--skdx-color-action-secondary-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-300)"],["--skdx-color-action-secondary-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-secondary-border","var(--skdx-color-semantic-border)"],["--skdx-color-action-outline-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-outline-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-ghost-text","var(--skdx-color-semantic-text)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-200)"],["--skdx-color-action-danger-bg","var(--skdx-color-danger-700)"],["--skdx-color-action-danger-bg-hover","var(--skdx-color-danger-800)"],["--skdx-color-action-danger-bg-pressed","var(--skdx-color-danger-900)"],["--skdx-color-action-danger-text","var(--skdx-color-danger-50)"],["--skdx-color-action-danger-border","var(--skdx-color-danger-700)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-100)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-700)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-200)"],["--skdx-color-field-bg","var(--skdx-color-semantic-background)"],["--skdx-color-field-bg-hover","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-100)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-50)"],["--skdx-color-field-border","var(--skdx-color-semantic-border-strong)"],["--skdx-color-field-border-hover","var(--skdx-color-neutral-500)"],["--skdx-color-field-border-focus","var(--skdx-color-primary-600)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-700)"],["--skdx-color-field-text","var(--skdx-color-semantic-text)"],["--skdx-color-selection-bg","var(--skdx-color-primary-600)"],["--skdx-color-selection-mark","var(--skdx-color-semantic-text-inverted)"],["--skdx-color-highlight-bg","var(--skdx-color-semantic-surface-hover)"],["--skdx-color-highlight-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-50)"],["--skdx-color-status-info-border","var(--skdx-color-primary-200)"],["--skdx-color-status-info-text","var(--skdx-color-primary-800)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-600)"],["--skdx-color-status-success-bg","var(--skdx-color-success-50)"],["--skdx-color-status-success-border","var(--skdx-color-success-200)"],["--skdx-color-status-success-text","var(--skdx-color-success-800)"],["--skdx-color-status-success-icon","var(--skdx-color-success-600)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-50)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-600)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-50)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-600)"],["--skdx-color-status-neutral-bg","var(--skdx-color-semantic-surface)"],["--skdx-color-status-neutral-border","var(--skdx-color-semantic-border)"],["--skdx-color-status-neutral-text","var(--skdx-color-semantic-text)"],["--skdx-color-status-neutral-icon","var(--skdx-color-semantic-text-muted)"],["--skdx-color-focus-ring","var(--skdx-color-semantic-focus-ring)"],["--skdx-color-separator","var(--skdx-color-semantic-border)"],["--skdx-color-track","var(--skdx-color-neutral-100)"],["--skdx-color-track-fill","var(--skdx-color-primary-600)"],["--skdx-color-skeleton","var(--skdx-color-neutral-200)"]],d=[["--skdx-color-border-default","var(--skdx-color-semantic-border-strong)"],["--skdx-color-border-strong","var(--skdx-color-semantic-text-muted)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-400)"],["--skdx-color-text-muted","var(--skdx-color-semantic-text)"],["--skdx-color-text-placeholder","var(--skdx-color-semantic-text)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-focus-ring","var(--skdx-color-semantic-text)"],["--skdx-color-separator","var(--skdx-color-semantic-border-strong)"]],e=[["--skdx-color-text-accent","var(--skdx-color-primary-300)"],["--skdx-color-text-danger","var(--skdx-color-danger-300)"],["--skdx-color-text-success","var(--skdx-color-success-300)"],["--skdx-color-text-warning","var(--skdx-color-warning-300)"],["--skdx-color-text-info","var(--skdx-color-primary-300)"],["--skdx-color-text-disabled","var(--skdx-color-neutral-400)"],["--skdx-color-field-border-invalid","var(--skdx-color-danger-400)"],["--skdx-color-border-danger","var(--skdx-color-danger-400)"],["--skdx-color-border-success","var(--skdx-color-success-400)"],["--skdx-color-border-warning","var(--skdx-color-warning-400)"],["--skdx-color-surface-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-secondary-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-outline-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-action-ghost-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-field-bg-hover","var(--skdx-color-neutral-800)"],["--skdx-color-highlight-bg","var(--skdx-color-neutral-800)"],["--skdx-color-surface-sunken","var(--skdx-color-neutral-800)"],["--skdx-color-surface-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-surface-selected","var(--skdx-color-primary-950)"],["--skdx-color-surface-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-bg","var(--skdx-color-neutral-800)"],["--skdx-color-action-disabled-text","var(--skdx-color-neutral-400)"],["--skdx-color-action-disabled-border","var(--skdx-color-neutral-700)"],["--skdx-color-action-secondary-bg-pressed","var(--skdx-color-neutral-600)"],["--skdx-color-action-outline-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-action-ghost-bg-pressed","var(--skdx-color-neutral-700)"],["--skdx-color-border-subtle","var(--skdx-color-neutral-800)"],["--skdx-color-border-disabled","var(--skdx-color-neutral-700)"],["--skdx-color-track","var(--skdx-color-neutral-900)"],["--skdx-color-skeleton","var(--skdx-color-neutral-600)"],["--skdx-color-field-bg-readonly","var(--skdx-color-neutral-900)"],["--skdx-color-field-bg-disabled","var(--skdx-color-neutral-800)"],["--skdx-color-status-info-bg","var(--skdx-color-primary-950)"],["--skdx-color-status-info-border","var(--skdx-color-primary-800)"],["--skdx-color-status-info-text","var(--skdx-color-primary-200)"],["--skdx-color-status-info-icon","var(--skdx-color-primary-400)"],["--skdx-color-status-success-bg","var(--skdx-color-success-950)"],["--skdx-color-status-success-border","var(--skdx-color-success-800)"],["--skdx-color-status-success-text","var(--skdx-color-success-200)"],["--skdx-color-status-success-icon","var(--skdx-color-success-400)"],["--skdx-color-status-warning-bg","var(--skdx-color-warning-950)"],["--skdx-color-status-warning-border","var(--skdx-color-warning-800)"],["--skdx-color-status-warning-text","var(--skdx-color-warning-200)"],["--skdx-color-status-warning-icon","var(--skdx-color-warning-400)"],["--skdx-color-status-danger-bg","var(--skdx-color-danger-950)"],["--skdx-color-status-danger-border","var(--skdx-color-danger-800)"],["--skdx-color-status-danger-text","var(--skdx-color-danger-200)"],["--skdx-color-status-danger-icon","var(--skdx-color-danger-400)"],["--skdx-color-surface-inverse","var(--skdx-color-neutral-100)"],["--skdx-color-text-on-inverse","var(--skdx-color-neutral-900)"]];function l(o){let r=e.map(([s,a])=>` ${s}: ${a};`);return`${o} {
|
|
2
2
|
${r.join(`
|
|
3
3
|
`)}
|
|
4
4
|
}
|
|
5
|
-
`}function
|
|
5
|
+
`}function t(){return`:root {
|
|
6
6
|
${c.map(([r,s])=>` ${r}: ${s};`).join(`
|
|
7
7
|
`)}
|
|
8
8
|
}
|
|
9
|
-
`}function
|
|
9
|
+
`}function x(){return`@media (prefers-contrast: more) {
|
|
10
|
+
:root {
|
|
11
|
+
${d.map(([r,s])=>` ${r}: ${s};`).join(`
|
|
12
|
+
`)}
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
`}function n(){return Object.fromEntries(c.map(([o,r])=>[o,r]))}export{t as aliasesToCss,n as aliasesToCssVars,c as colorAliases,x as contrastAliasesToCss,d as contrastColorAliases,l as darkAliasesToCss,e as darkColorAliases};
|
|
@@ -3,25 +3,10 @@
|
|
|
3
3
|
* colors, per the standard formula (https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio).
|
|
4
4
|
* Returns a value from 1 (no contrast) to 21 (black on white).
|
|
5
5
|
*
|
|
6
|
-
* **Throws on anything that is not a hex color.**
|
|
7
|
-
*
|
|
8
|
-
* `rgb(0 0 0 / 0.45)`, and `(NaN >> 16) & 255` is `0`, so a translucent value
|
|
9
|
-
* was measured as opaque black. `ant-daybreak`'s `textMuted` scored a perfect
|
|
10
|
-
* 21:1 while rendering at 3.36:1 — a live AA failure passing as a perfect
|
|
11
|
-
* score, which is worse than no guard at all.
|
|
12
|
-
*
|
|
13
|
-
* Throwing rather than compositing is deliberate. Compositing would need a
|
|
14
|
-
* backdrop this function does not have and cannot infer, and it would let the
|
|
15
|
-
* next translucent value into the theme set silently. Rejecting forces every
|
|
16
|
-
* theme to state its colors as measurable values, which makes the whole set
|
|
17
|
-
* auditable by construction instead of by vigilance.
|
|
18
|
-
*
|
|
19
|
-
* `#rgba` and `#rrggbbaa` are rejected too: an alpha channel is exactly the
|
|
20
|
-
* thing that needs a backdrop, and the luminance math below would read those
|
|
21
|
-
* extra digits as colour.
|
|
6
|
+
* **Throws on anything that is not a hex color.** Compositing would need
|
|
7
|
+
* a backdrop this function does not have; rejecting forces measurable values.
|
|
22
8
|
*
|
|
23
9
|
* @throws {TypeError} if either argument is not `#rgb` or `#rrggbb`
|
|
24
|
-
*
|
|
25
10
|
* @public
|
|
26
11
|
*/
|
|
27
12
|
export declare function contrastRatio(hexA: string, hexB: string): number;
|
package/dist/utils/contrast.d.ts
CHANGED
|
@@ -3,25 +3,10 @@
|
|
|
3
3
|
* colors, per the standard formula (https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio).
|
|
4
4
|
* Returns a value from 1 (no contrast) to 21 (black on white).
|
|
5
5
|
*
|
|
6
|
-
* **Throws on anything that is not a hex color.**
|
|
7
|
-
*
|
|
8
|
-
* `rgb(0 0 0 / 0.45)`, and `(NaN >> 16) & 255` is `0`, so a translucent value
|
|
9
|
-
* was measured as opaque black. `ant-daybreak`'s `textMuted` scored a perfect
|
|
10
|
-
* 21:1 while rendering at 3.36:1 — a live AA failure passing as a perfect
|
|
11
|
-
* score, which is worse than no guard at all.
|
|
12
|
-
*
|
|
13
|
-
* Throwing rather than compositing is deliberate. Compositing would need a
|
|
14
|
-
* backdrop this function does not have and cannot infer, and it would let the
|
|
15
|
-
* next translucent value into the theme set silently. Rejecting forces every
|
|
16
|
-
* theme to state its colors as measurable values, which makes the whole set
|
|
17
|
-
* auditable by construction instead of by vigilance.
|
|
18
|
-
*
|
|
19
|
-
* `#rgba` and `#rrggbbaa` are rejected too: an alpha channel is exactly the
|
|
20
|
-
* thing that needs a backdrop, and the luminance math below would read those
|
|
21
|
-
* extra digits as colour.
|
|
6
|
+
* **Throws on anything that is not a hex color.** Compositing would need
|
|
7
|
+
* a backdrop this function does not have; rejecting forces measurable values.
|
|
22
8
|
*
|
|
23
9
|
* @throws {TypeError} if either argument is not `#rgb` or `#rrggbb`
|
|
24
|
-
*
|
|
25
10
|
* @public
|
|
26
11
|
*/
|
|
27
12
|
export declare function contrastRatio(hexA: string, hexB: string): number;
|
package/dist/utils/cssVars.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
2
|
-
`)}function
|
|
1
|
+
"use strict";var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var p=(t,n)=>{for(var r in n)c(t,r,{get:n[r],enumerable:!0})},b=(t,n,r,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let e of d(n))!$.call(t,e)&&e!==r&&c(t,e,{get:()=>n[e],enumerable:!(s=g(n,e))||s.enumerable});return t};var C=t=>b(c({},"__esModule",{value:!0}),t);var R={};p(R,{PREFIX:()=>i,reducedMotionVarNames:()=>x,sectionsToCssVars:()=>l,varsToDeclarations:()=>k});module.exports=C(R);var i="skdx";function V(t){return t!==null&&typeof t=="object"}function a(t,n,r){for(let[s,e]of Object.entries(t))e!==void 0&&(V(e)?a(e,[...n,s],r):r[[...n,s].join("-")]=String(e));return r}function j(t){return t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function l(t){let n={};for(let[r,s]of t)if(s)for(let[e,f]of Object.entries(a(s,[],{}))){let o=j(e),u=o.startsWith(`${r}-`)||o===r?o:`${r}-${o}`;n[`--${i}-${u}`]=f}return n}function k(t,n=" "){return Object.entries(t).map(([r,s])=>`${n}${r}: ${s};`).join(`
|
|
2
|
+
`)}function x(t){return Object.keys(t).filter(n=>n.startsWith(`--${i}-motion-duration-`)||n.startsWith(`--${i}-motion-stagger-`))}0&&(module.exports={PREFIX,reducedMotionVarNames,sectionsToCssVars,varsToDeclarations});
|
package/dist/utils/cssVars.d.cts
CHANGED
|
@@ -1,37 +1,12 @@
|
|
|
1
|
-
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
* @internal
|
|
14
|
-
*/
|
|
15
|
-
/** A token group and the `--skdx-<prefix>-…` namespace its keys render under. @internal */
|
|
16
|
-
export type CssVarSection = [prefix: string, tokens: Record<string, unknown> | undefined];
|
|
17
|
-
/**
|
|
18
|
-
* Flattens token groups into a `{ '--skdx-…': value }` map.
|
|
19
|
-
*
|
|
20
|
-
* A section whose tokens are `undefined` contributes nothing — that is how an
|
|
21
|
-
* optional group (a theme's `typography` or `motion`) opts out without the caller
|
|
22
|
-
* needing a conditional.
|
|
23
|
-
*
|
|
24
|
-
* @internal
|
|
25
|
-
*/
|
|
26
|
-
export declare function sectionsToCssVars(sections: CssVarSection[]): Record<string, string>;
|
|
27
|
-
/** Renders a var map as the indented declaration lines of a CSS rule block. @internal */
|
|
28
|
-
export declare function varsToDeclarations(vars: Record<string, string>, indent?: string): string;
|
|
29
|
-
/**
|
|
30
|
-
* The `--skdx-motion-*` variables that a `prefers-reduced-motion: reduce` block
|
|
31
|
-
* has to zero: every duration *and* every stagger. A stagger is a delay, so
|
|
32
|
-
* zeroing the durations without zeroing it would leave a still page that still
|
|
33
|
-
* arrives late.
|
|
34
|
-
*
|
|
35
|
-
* @internal
|
|
36
|
-
*/
|
|
37
|
-
export declare function reducedMotionVarNames(vars: Record<string, string>): string[];
|
|
1
|
+
/** Namespace every SkandaDX custom property is emitted under, without the leading dashes. */
|
|
2
|
+
export declare const PREFIX: "skdx";
|
|
3
|
+
/** A custom property in the `--skdx-` namespace. */
|
|
4
|
+
export type CssVar = `--${typeof PREFIX}-${string}`;
|
|
5
|
+
/** A token group paired with the `--skdx-<prefix>-…` namespace its keys are emitted under. @public */
|
|
6
|
+
export type CssVarSection = [prefix: string, tokens: object | undefined];
|
|
7
|
+
/** Flattens token groups into a `{ '--skdx-…': value }` map; undefined sections contribute nothing. @public */
|
|
8
|
+
export declare function sectionsToCssVars(sections: CssVarSection[]): Record<CssVar, string>;
|
|
9
|
+
/** Render vars as indented CSS declarations. @internal */
|
|
10
|
+
export declare function varsToDeclarations(vars: Record<CssVar, string>, indent?: string): string;
|
|
11
|
+
/** Motion variable names to zero under `prefers-reduced-motion: reduce`: durations and staggers. @internal */
|
|
12
|
+
export declare function reducedMotionVarNames(vars: Record<CssVar, string>): CssVar[];
|
package/dist/utils/cssVars.d.ts
CHANGED
|
@@ -1,37 +1,12 @@
|
|
|
1
|
-
/**
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
* @internal
|
|
14
|
-
*/
|
|
15
|
-
/** A token group and the `--skdx-<prefix>-…` namespace its keys render under. @internal */
|
|
16
|
-
export type CssVarSection = [prefix: string, tokens: Record<string, unknown> | undefined];
|
|
17
|
-
/**
|
|
18
|
-
* Flattens token groups into a `{ '--skdx-…': value }` map.
|
|
19
|
-
*
|
|
20
|
-
* A section whose tokens are `undefined` contributes nothing — that is how an
|
|
21
|
-
* optional group (a theme's `typography` or `motion`) opts out without the caller
|
|
22
|
-
* needing a conditional.
|
|
23
|
-
*
|
|
24
|
-
* @internal
|
|
25
|
-
*/
|
|
26
|
-
export declare function sectionsToCssVars(sections: CssVarSection[]): Record<string, string>;
|
|
27
|
-
/** Renders a var map as the indented declaration lines of a CSS rule block. @internal */
|
|
28
|
-
export declare function varsToDeclarations(vars: Record<string, string>, indent?: string): string;
|
|
29
|
-
/**
|
|
30
|
-
* The `--skdx-motion-*` variables that a `prefers-reduced-motion: reduce` block
|
|
31
|
-
* has to zero: every duration *and* every stagger. A stagger is a delay, so
|
|
32
|
-
* zeroing the durations without zeroing it would leave a still page that still
|
|
33
|
-
* arrives late.
|
|
34
|
-
*
|
|
35
|
-
* @internal
|
|
36
|
-
*/
|
|
37
|
-
export declare function reducedMotionVarNames(vars: Record<string, string>): string[];
|
|
1
|
+
/** Namespace every SkandaDX custom property is emitted under, without the leading dashes. */
|
|
2
|
+
export declare const PREFIX: "skdx";
|
|
3
|
+
/** A custom property in the `--skdx-` namespace. */
|
|
4
|
+
export type CssVar = `--${typeof PREFIX}-${string}`;
|
|
5
|
+
/** A token group paired with the `--skdx-<prefix>-…` namespace its keys are emitted under. @public */
|
|
6
|
+
export type CssVarSection = [prefix: string, tokens: object | undefined];
|
|
7
|
+
/** Flattens token groups into a `{ '--skdx-…': value }` map; undefined sections contribute nothing. @public */
|
|
8
|
+
export declare function sectionsToCssVars(sections: CssVarSection[]): Record<CssVar, string>;
|
|
9
|
+
/** Render vars as indented CSS declarations. @internal */
|
|
10
|
+
export declare function varsToDeclarations(vars: Record<CssVar, string>, indent?: string): string;
|
|
11
|
+
/** Motion variable names to zero under `prefers-reduced-motion: reduce`: durations and staggers. @internal */
|
|
12
|
+
export declare function reducedMotionVarNames(vars: Record<CssVar, string>): CssVar[];
|
package/dist/utils/cssVars.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var i="skdx";function
|
|
2
|
-
`)}function
|
|
1
|
+
var i="skdx";function u(t){return t!==null&&typeof t=="object"}function c(t,n,r){for(let[e,s]of Object.entries(t))s!==void 0&&(u(s)?c(s,[...n,e],r):r[[...n,e].join("-")]=String(s));return r}function g(t){return t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}function d(t){let n={};for(let[r,e]of t)if(e)for(let[s,a]of Object.entries(c(e,[],{}))){let o=g(s),f=o.startsWith(`${r}-`)||o===r?o:`${r}-${o}`;n[`--${i}-${f}`]=a}return n}function $(t,n=" "){return Object.entries(t).map(([r,e])=>`${n}${r}: ${e};`).join(`
|
|
2
|
+
`)}function p(t){return Object.keys(t).filter(n=>n.startsWith(`--${i}-motion-duration-`)||n.startsWith(`--${i}-motion-stagger-`))}export{i as PREFIX,p as reducedMotionVarNames,d as sectionsToCssVars,$ as varsToDeclarations};
|