diff --git a/packages/core/src/popover/popover.css b/packages/core/src/popover/popover.css index dcc90031..b261a6b3 100644 --- a/packages/core/src/popover/popover.css +++ b/packages/core/src/popover/popover.css @@ -1,6 +1,6 @@ :root { --f-popover-border-color: var(--f-color-border); - --f-popover-border-radius: var(--f-radius); + --f-popover-border-radius: var(--f-radius-lg); --f-popover-background: var(--f-color-surface); --f-popover-box-shadow: var(--f-shadow-popover); } diff --git a/packages/core/src/styles/reset.css b/packages/core/src/styles/reset.css index 15a3298c..3c5c8310 100644 --- a/packages/core/src/styles/reset.css +++ b/packages/core/src/styles/reset.css @@ -1,7 +1,7 @@ html, body { background-color: transparent; box-sizing: border-box; - font-size: 14px; + font-size: 13px; font-weight: var(--f-font-weight-normal); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" } diff --git a/packages/design/config.js b/packages/design/config.js index f33c36fe..fbbdd31e 100644 --- a/packages/design/config.js +++ b/packages/design/config.js @@ -156,11 +156,13 @@ module.exports = { type: `value`, transitive: true, matcher: (token) => token.attributes.category == 'color', - transformer: (token) => { - if (token.value.includes('oklch')) return token.value - const [l, c, h] = chroma(token.value).oklch() - return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${isNaN(h) ? 0 : h.toFixed(1)})` - }, + transformer: (token) => token.value.includes('oklch') ? oklchToHex(token.value) : chroma(token.value).hex(), + // this keeps the oklch value + // transformer: (token) => { + // if (token.value.includes('oklch')) return token.value + // const [l, c, h] = chroma(token.value).oklch() + // return `oklch(${l.toFixed(3)} ${c.toFixed(3)} ${isNaN(h) ? 0 : h.toFixed(1)})` + // }, }, 'color/css': Object.assign({}, StyleDictionary.transform[`color/css`], { transitive: true, diff --git a/packages/design/tokens/color.json b/packages/design/tokens/color.json index 65cc6a67..8e5f16f6 100644 --- a/packages/design/tokens/color.json +++ b/packages/design/tokens/color.json @@ -2,131 +2,131 @@ "color": { "black": { "value": "oklch(0.05 0.0012 0)" }, "white": { "value": "oklch(0.995 0.001 0)" }, - "overlay": { "value": "oklch(11.907% 0.00582 285.855 / 0.65)" }, + "overlay": { "value": "rgba(12, 13, 18, 0.65)" }, "accent": { "50": { - "value": "oklch(0.962 0.018 280)" + "value": "oklch(0.962 0.018 245)" }, "100": { - "value": "oklch(0.937 0.035 280)" + "value": "oklch(0.937 0.035 245)" }, "150": { - "value": "oklch(0.910 0.052 280)" + "value": "oklch(0.910 0.052 245)" }, "200": { - "value": "oklch(0.882 0.068 280)" + "value": "oklch(0.882 0.068 245)" }, "250": { - "value": "oklch(0.842 0.093 280)" + "value": "oklch(0.842 0.093 245)" }, "300": { - "value": "oklch(0.802 0.118 280)" + "value": "oklch(0.802 0.118 245)" }, "350": { - "value": "oklch(0.752 0.148 280)" + "value": "oklch(0.752 0.148 245)" }, "400": { - "value": "oklch(0.702 0.178 280)" + "value": "oklch(0.702 0.178 245)" }, "450": { - "value": "oklch(0.650 0.204 280)" + "value": "oklch(0.650 0.204 245)" }, "500": { - "value": "oklch(0.597 0.230 280)" + "value": "oklch(0.597 0.230 245)" }, "550": { - "value": "oklch(0.545 0.244 280)" + "value": "oklch(0.545 0.244 245)" }, "600": { - "value": "oklch(0.492 0.258 280)" + "value": "oklch(0.492 0.258 245)" }, "650": { - "value": "oklch(0.445 0.248 280)" + "value": "oklch(0.445 0.248 245)" }, "700": { - "value": "oklch(0.397 0.238 280)" + "value": "oklch(0.397 0.238 245)" }, "750": { - "value": "oklch(0.357 0.218 280)" + "value": "oklch(0.357 0.218 245)" }, "800": { - "value": "oklch(0.317 0.198 280)" + "value": "oklch(0.317 0.198 245)" }, "850": { - "value": "oklch(0.285 0.173 280)" + "value": "oklch(0.285 0.173 245)" }, "900": { - "value": "oklch(0.252 0.148 280)" + "value": "oklch(0.252 0.148 245)" }, "950": { - "value": "oklch(0.219 0.108 280)" + "value": "oklch(0.219 0.108 245)" }, "1000": { - "value": "oklch(0.193 0.081 280)" + "value": "oklch(0.193 0.081 245)" } }, "base": { "50": { - "value": "oklch(0.99 0.0014 280)" + "value": "oklch(0.985 0.001 245)" }, "100": { - "value": "oklch(0.950 0.003 280)" + "value": "oklch(0.950 0.003 245)" }, "150": { - "value": "oklch(0.925 0.0045 280)" + "value": "oklch(0.925 0.0045 245)" }, "200": { - "value": "oklch(0.900 0.006 280)" + "value": "oklch(0.900 0.006 245)" }, "250": { - "value": "oklch(0.865 0.009 280)" + "value": "oklch(0.865 0.009 245)" }, "300": { - "value": "oklch(0.830 0.012 280)" + "value": "oklch(0.830 0.012 245)" }, "350": { - "value": "oklch(0.785 0.015 280)" + "value": "oklch(0.785 0.015 245)" }, "400": { - "value": "oklch(0.740 0.018 280)" + "value": "oklch(0.740 0.018 245)" }, "450": { - "value": "oklch(0.688 0.019 280)" + "value": "oklch(0.688 0.019 245)" }, "500": { - "value": "oklch(0.635 0.020 280)" + "value": "oklch(0.635 0.020 245)" }, "550": { - "value": "oklch(0.580 0.0195 280)" + "value": "oklch(0.580 0.0195 245)" }, "600": { - "value": "oklch(0.525 0.019 280)" + "value": "oklch(0.525 0.019 245)" }, "650": { - "value": "oklch(0.470 0.0185 280)" + "value": "oklch(0.470 0.0185 245)" }, "700": { - "value": "oklch(0.415 0.018 280)" + "value": "oklch(0.415 0.018 245)" }, "750": { - "value": "oklch(0.368 0.0175 280)" + "value": "oklch(0.368 0.0175 245)" }, "800": { - "value": "oklch(0.320 0.017 280)" + "value": "oklch(0.320 0.017 245)" }, "850": { - "value": "oklch(0.283 0.017 280)" + "value": "oklch(0.283 0.017 245)" }, "900": { - "value": "oklch(0.245 0.017 280)" + "value": "oklch(0.245 0.017 245)" }, "950": { - "value": "oklch(0.208 0.017 280)" + "value": "oklch(0.208 0.017 245)" }, "1000": { - "value": "oklch(0.19 0.017 280)" + "value": "oklch(0.19 0.017 245)" } }, diff --git a/packages/design/tokens/theme/light.json b/packages/design/tokens/theme/light.json index 96a3aa58..18788208 100644 --- a/packages/design/tokens/theme/light.json +++ b/packages/design/tokens/theme/light.json @@ -1,7 +1,7 @@ { "light": { "radius": { "value": "{radius.default}" }, - "focus": { "value": "2px solid {color.accent.150}" }, + "focus": { "value": "2px solid {color.accent.500}" }, "color": { "background": { "value": "{color.base.50}" }, "accent": { @@ -56,15 +56,15 @@ }, "surface": { " ": { "value": "{color.white}" }, - "strong": { "value": "{color.base.100}" }, - "stronger": { "value": "{color.base.200}" }, - "strongest": { "value": "{color.base.300}" }, + "strong": { "value": "{color.base.50}" }, + "stronger": { "value": "{color.base.100}" }, + "strongest": { "value": "{color.base.150}" }, "highlight": { "value": "{color.accent.50}" }, "inverse": { "value": "{color.base.800}" } }, "border": { - " ": { "value": "{color.base.200}" }, - "strong": { "value": "{color.base.300}" } + " ": { "value": "{color.base.150}" }, + "strong": { "value": "{color.base.250}" } } } }