|
| 1 | +import type { Theme, ThemeKey } from './theme' |
| 2 | +import { withAlpha } from './utilities' |
| 3 | +import { toKeyPath } from './utils/to-key-path' |
| 4 | + |
| 5 | +/** |
| 6 | + * Looks up a value in the CSS theme |
| 7 | + */ |
| 8 | +export function resolveThemeValue(theme: Theme, path: string, defaultValue?: string) { |
| 9 | + // Extract an eventual modifier from the path. e.g.: |
| 10 | + // - "colors.red.500 / 50%" -> "50%" |
| 11 | + // - "foo/bar/baz/50%" -> "50%" |
| 12 | + let lastSlash = path.lastIndexOf('/') |
| 13 | + let modifier: string | null = null |
| 14 | + if (lastSlash !== -1) { |
| 15 | + modifier = path.slice(lastSlash + 1).trim() |
| 16 | + path = path.slice(0, lastSlash).trim() |
| 17 | + } |
| 18 | + |
| 19 | + let themeValue = lookupThemeValue(theme, path, defaultValue) |
| 20 | + |
| 21 | + // Apply the opacity modifier if present |
| 22 | + if (modifier && typeof themeValue === 'string') { |
| 23 | + return withAlpha(themeValue, modifier) |
| 24 | + } |
| 25 | + |
| 26 | + return themeValue |
| 27 | +} |
| 28 | + |
| 29 | +function toThemeKey(keypath: string[]) { |
| 30 | + return ( |
| 31 | + keypath |
| 32 | + // [1] should move into the nested object tuple. To create the CSS variable |
| 33 | + // name for this, we replace it with an empty string that will result in two |
| 34 | + // subsequent dashes when joined. |
| 35 | + .map((path) => (path === '1' ? '' : path)) |
| 36 | + |
| 37 | + // Resolve the key path to a CSS variable segment |
| 38 | + .map((part) => |
| 39 | + part |
| 40 | + .replaceAll('.', '_') |
| 41 | + .replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`), |
| 42 | + ) |
| 43 | + |
| 44 | + // Remove the `DEFAULT` key at the end of a path |
| 45 | + // We're reading from CSS anyway so it'll be a string |
| 46 | + .filter((part, index) => part !== 'DEFAULT' || index !== keypath.length - 1) |
| 47 | + .join('-') |
| 48 | + ) |
| 49 | +} |
| 50 | + |
| 51 | +function lookupThemeValue(theme: Theme, path: string, defaultValue?: string) { |
| 52 | + if (path.startsWith('--')) { |
| 53 | + return theme.get([path as any]) ?? defaultValue |
| 54 | + } |
| 55 | + |
| 56 | + let baseThemeKey = '--' + toThemeKey(toKeyPath(path)) |
| 57 | + |
| 58 | + let resolvedValue = theme.get([baseThemeKey as ThemeKey]) |
| 59 | + |
| 60 | + if (resolvedValue !== null) { |
| 61 | + return resolvedValue |
| 62 | + } |
| 63 | + |
| 64 | + for (let [givenKey, upgradeKey] of Object.entries(themeUpgradeKeys)) { |
| 65 | + if (!baseThemeKey.startsWith(givenKey)) continue |
| 66 | + |
| 67 | + let upgradedKey = upgradeKey + baseThemeKey.slice(givenKey.length) |
| 68 | + let resolvedValue = theme.get([upgradedKey as ThemeKey]) |
| 69 | + |
| 70 | + if (resolvedValue !== null) { |
| 71 | + return resolvedValue |
| 72 | + } |
| 73 | + } |
| 74 | + |
| 75 | + return defaultValue |
| 76 | +} |
| 77 | + |
| 78 | +let themeUpgradeKeys = { |
| 79 | + '--colors': '--color', |
| 80 | + '--accent-color': '--color', |
| 81 | + '--backdrop-blur': '--blur', |
| 82 | + '--backdrop-brightness': '--brightness', |
| 83 | + '--backdrop-contrast': '--contrast', |
| 84 | + '--backdrop-grayscale': '--grayscale', |
| 85 | + '--backdrop-hue-rotate': '--hueRotate', |
| 86 | + '--backdrop-invert': '--invert', |
| 87 | + '--backdrop-opacity': '--opacity', |
| 88 | + '--backdrop-saturate': '--saturate', |
| 89 | + '--backdrop-sepia': '--sepia', |
| 90 | + '--background-color': '--color', |
| 91 | + '--background-opacity': '--opacity', |
| 92 | + '--border-color': '--color', |
| 93 | + '--border-opacity': '--opacity', |
| 94 | + '--border-spacing': '--spacing', |
| 95 | + '--box-shadow-color': '--color', |
| 96 | + '--caret-color': '--color', |
| 97 | + '--divide-color': '--borderColor', |
| 98 | + '--divide-opacity': '--borderOpacity', |
| 99 | + '--divide-width': '--borderWidth', |
| 100 | + '--fill': '--color', |
| 101 | + '--flex-basis': '--spacing', |
| 102 | + '--gap': '--spacing', |
| 103 | + '--gradient-color-stops': '--color', |
| 104 | + '--height': '--spacing', |
| 105 | + '--inset': '--spacing', |
| 106 | + '--margin': '--spacing', |
| 107 | + '--max-height': '--spacing', |
| 108 | + '--max-width': '--spacing', |
| 109 | + '--min-height': '--spacing', |
| 110 | + '--min-width': '--spacing', |
| 111 | + '--outline-color': '--color', |
| 112 | + '--padding': '--spacing', |
| 113 | + '--placeholder-color': '--color', |
| 114 | + '--placeholder-opacity': '--opacity', |
| 115 | + '--ring-color': '--color', |
| 116 | + '--ring-offset-color': '--color', |
| 117 | + '--ring-opacity': '--opacity', |
| 118 | + '--scroll-margin': '--spacing', |
| 119 | + '--scroll-padding': '--spacing', |
| 120 | + '--space': '--spacing', |
| 121 | + '--stroke': '--color', |
| 122 | + '--text-color': '--color', |
| 123 | + '--text-decoration-color': '--color', |
| 124 | + '--text-indent': '--spacing', |
| 125 | + '--text-opacity': '--opacity', |
| 126 | + '--translate': '--spacing', |
| 127 | + '--size': '--spacing', |
| 128 | + '--width': '--spacing', |
| 129 | +} |
0 commit comments