Themescura
An Obscura of Variables, Modes and Themes
Installation
pnpm add @xypnox/themescura Usage
Demo
Note that the palette and components are from xip-ui. Themescura itself is indepndent of the schema of your tokens.
Editor [IN ACTIVE DEVELOPMENT]
Theme Preview
light
Card
Notice how the borders round
Card in card
Card
This is a card element. It has a background.
Card
This has been implemented to only a depth of 3.
Card
You have bigger problems if you need 4.
dark
Card
Notice how the borders round
Card in card
Card
This is a card element. It has a background.
Card
This has been implemented to only a depth of 3.
Card
You have bigger problems if you need 4.
Theme Debug
Palette
id
xipProto
name
xip Proto
base
layout
width
1400px
font
family
"Inter", sans-serif
heading
"Source Serif 4", serif
mono
"Fira Mono", monospace
scale
minWidth
320
maxWidth
1400
minFontSize
16
maxFontSize
21
minTypeScale
1.2
maxTypeScale
1.3
negativeSteps
2
positiveSteps
5
vars
light
primary
background
text
dark
primary
background
text
Base
layout
width
1400px
font
family
"Inter", sans-serif
heading
"Source Serif 4", serif
mono
"Fira Mono", monospace
scale
minWidth
320
maxWidth
1400
minFontSize
16
maxFontSize
21
minTypeScale
1.2
maxTypeScale
1.3
negativeSteps
2
positiveSteps
5
size
0
clamp(1rem, 0.9074rem + 0.463vi, 1.3125rem)
1
clamp(1.2rem, 1.05rem + 0.75vi, 1.7063rem)
2
clamp(1.44rem, 1.2094rem + 1.1528vi, 2.2181rem)
3
clamp(1.728rem, 1.3856rem + 1.7119vi, 2.8836rem)
4
clamp(2.0736rem, 1.5773rem + 2.4815vi, 3.7486rem)
5
clamp(2.4883rem, 1.7817rem + 3.5332vi, 4.8732rem)
-1
clamp(0.8333rem, 0.7811rem + 0.2612vi, 1.0096rem)
-2
clamp(0.6944rem, 0.6701rem + 0.1218vi, 0.7766rem)
Mode
Light
primary
b
s
o
background
text
secondary
b
s
o
tertiary
b
s
o
textS
border
primaryLight
surface
Dark
primary
b
s
o
background
text
secondary
b
s
o
tertiary
b
s
o
textS
border
primaryLight
surface
Base Palette
{
"id": "xipProto",
"name": "xip Proto",
"base": {
"layout": {
"width": "1400px"
},
"font": {
"family": "\"Inter\", sans-serif",
"heading": "\"Source Serif 4\", serif",
"mono": "\"Fira Mono\", monospace",
"scale": {
"minWidth": 320,
"maxWidth": 1400,
"minFontSize": 16,
"maxFontSize": 21,
"minTypeScale": 1.2,
"maxTypeScale": 1.3,
"negativeSteps": 2,
"positiveSteps": 5
}
}
},
"vars": {
"light": {
"primary": "oklch(50% 0.15 250)",
"background": "oklch(88.5% 0.015 220)",
"text": "oklch(25% 0.05 250)"
},
"dark": {
"primary": "oklch(65% 0.15 250)",
"background": "oklch(13% 0.04 220)",
"text": "oklch(75% 0.05 240)"
}
}
}Generated Theme
{
"id": "xipProto",
"name": "xip Proto",
"base": {
"layout": {
"width": "1400px"
},
"font": {
"family": "\"Inter\", sans-serif",
"heading": "\"Source Serif 4\", serif",
"mono": "\"Fira Mono\", monospace",
"scale": {
"minWidth": 320,
"maxWidth": 1400,
"minFontSize": 16,
"maxFontSize": 21,
"minTypeScale": 1.2,
"maxTypeScale": 1.3,
"negativeSteps": 2,
"positiveSteps": 5
},
"size": {
"0": "clamp(1rem, 0.9074rem + 0.463vi, 1.3125rem)",
"1": "clamp(1.2rem, 1.05rem + 0.75vi, 1.7063rem)",
"2": "clamp(1.44rem, 1.2094rem + 1.1528vi, 2.2181rem)",
"3": "clamp(1.728rem, 1.3856rem + 1.7119vi, 2.8836rem)",
"4": "clamp(2.0736rem, 1.5773rem + 2.4815vi, 3.7486rem)",
"5": "clamp(2.4883rem, 1.7817rem + 3.5332vi, 4.8732rem)",
"-1": "clamp(0.8333rem, 0.7811rem + 0.2612vi, 1.0096rem)",
"-2": "clamp(0.6944rem, 0.6701rem + 0.1218vi, 0.7766rem)"
}
}
},
"vars": {
"light": {
"primary": {
"b": "oklch(50% 0.15 250)",
"s": [
"oklch(20.00% 0.15 250)",
"oklch(26.00% 0.15 250)",
"oklch(32.00% 0.15 250)",
"oklch(38.00% 0.15 250)",
"oklch(44.00% 0.15 250)",
"oklch(50% 0.15 250)",
"oklch(56.00% 0.15 250)",
"oklch(62.00% 0.15 250)",
"oklch(68.00% 0.15 250)",
"oklch(74.00% 0.15 250)",
"oklch(80.00% 0.15 250)"
],
"o": "oklch(100.00% 0.05 250)"
},
"background": "oklch(88.5% 0.015 220)",
"text": "oklch(25% 0.05 250)",
"secondary": {
"b": "oklch(50% 0.15 310.00)",
"s": [
"oklch(20.00% 0.15 310)",
"oklch(26.00% 0.15 310)",
"oklch(32.00% 0.15 310)",
"oklch(38.00% 0.15 310)",
"oklch(44.00% 0.15 310)",
"oklch(50% 0.15 310.00)",
"oklch(56.00% 0.15 310)",
"oklch(62.00% 0.15 310)",
"oklch(68.00% 0.15 310)",
"oklch(74.00% 0.15 310)",
"oklch(80.00% 0.15 310)"
],
"o": "oklch(100.00% 0.05 310)"
},
"tertiary": {
"b": "oklch(50% 0.15 190.00)",
"s": [
"oklch(20.00% 0.15 190)",
"oklch(26.00% 0.15 190)",
"oklch(32.00% 0.15 190)",
"oklch(38.00% 0.15 190)",
"oklch(44.00% 0.15 190)",
"oklch(50% 0.15 190.00)",
"oklch(56.00% 0.15 190)",
"oklch(62.00% 0.15 190)",
"oklch(68.00% 0.15 190)",
"oklch(74.00% 0.15 190)",
"oklch(80.00% 0.15 190)"
],
"o": "oklch(100.00% 0.05 190)"
},
"textS": [
"oklch(37.00% 0.05 250)",
"oklch(31.00% 0.05 250)",
"oklch(25% 0.05 250)",
"oklch(19.00% 0.05 250)",
"oklch(13.00% 0.05 250)"
],
"border": "oklch(83.00% 0.03 250)",
"primaryLight": "oklch(60.00% 0.07 250)",
"surface": [
"oklch(92.50% 0.015 220)",
"oklch(96.50% 0.015 220)",
"oklch(100.50% 0.015 220)"
]
},
"dark": {
"primary": {
"b": "oklch(65% 0.15 250)",
"s": [
"oklch(95.00% 0.15 250)",
"oklch(89.00% 0.15 250)",
"oklch(83.00% 0.15 250)",
"oklch(77.00% 0.15 250)",
"oklch(71.00% 0.15 250)",
"oklch(65% 0.15 250)",
"oklch(59.00% 0.15 250)",
"oklch(53.00% 0.15 250)",
"oklch(47.00% 0.15 250)",
"oklch(41.00% 0.15 250)",
"oklch(35.00% 0.15 250)"
],
"o": "oklch(20.00% 0.05 250)"
},
"background": "oklch(13% 0.04 220)",
"text": "oklch(75% 0.05 240)",
"secondary": {
"b": "oklch(65% 0.15 310.00)",
"s": [
"oklch(95.00% 0.15 310)",
"oklch(89.00% 0.15 310)",
"oklch(83.00% 0.15 310)",
"oklch(77.00% 0.15 310)",
"oklch(71.00% 0.15 310)",
"oklch(65% 0.15 310.00)",
"oklch(59.00% 0.15 310)",
"oklch(53.00% 0.15 310)",
"oklch(47.00% 0.15 310)",
"oklch(41.00% 0.15 310)",
"oklch(35.00% 0.15 310)"
],
"o": "oklch(20.00% 0.05 310)"
},
"tertiary": {
"b": "oklch(65% 0.15 190.00)",
"s": [
"oklch(95.00% 0.15 190)",
"oklch(89.00% 0.15 190)",
"oklch(83.00% 0.15 190)",
"oklch(77.00% 0.15 190)",
"oklch(71.00% 0.15 190)",
"oklch(65% 0.15 190.00)",
"oklch(59.00% 0.15 190)",
"oklch(53.00% 0.15 190)",
"oklch(47.00% 0.15 190)",
"oklch(41.00% 0.15 190)",
"oklch(35.00% 0.15 190)"
],
"o": "oklch(20.00% 0.05 190)"
},
"textS": [
"oklch(63.00% 0.05 240)",
"oklch(69.00% 0.05 240)",
"oklch(75% 0.05 240)",
"oklch(81.00% 0.05 240)",
"oklch(87.00% 0.05 240)"
],
"border": "oklch(25.00% 0.03 240)",
"primaryLight": "oklch(55.00% 0.07 250)",
"surface": [
"oklch(21.00% 0.04 220)",
"oklch(29.00% 0.04 220)",
"oklch(37.00% 0.04 220)"
]
}
}
}Generated CSS
:root {
--layout-width: 1400px;
--font-family: "Inter", sans-serif;
--font-heading: "Source Serif 4", serif;
--font-mono: "Fira Mono", monospace;
--font-scale-minWidth: 320;
--font-scale-maxWidth: 1400;
--font-scale-minFontSize: 16;
--font-scale-maxFontSize: 21;
--font-scale-minTypeScale: 1.2;
--font-scale-maxTypeScale: 1.3;
--font-scale-negativeSteps: 2;
--font-scale-positiveSteps: 5;
--font-size-0: clamp(1rem, 0.9074rem + 0.463vi, 1.3125rem);
--font-size-1: clamp(1.2rem, 1.05rem + 0.75vi, 1.7063rem);
--font-size-2: clamp(1.44rem, 1.2094rem + 1.1528vi, 2.2181rem);
--font-size-3: clamp(1.728rem, 1.3856rem + 1.7119vi, 2.8836rem);
--font-size-4: clamp(2.0736rem, 1.5773rem + 2.4815vi, 3.7486rem);
--font-size-5: clamp(2.4883rem, 1.7817rem + 3.5332vi, 4.8732rem);
--font-size--1: clamp(0.8333rem, 0.7811rem + 0.2612vi, 1.0096rem);
--font-size--2: clamp(0.6944rem, 0.6701rem + 0.1218vi, 0.7766rem);
}
@media (prefers-color-scheme: dark) { :root {
--primary-b: oklch(65% 0.15 250);
--primary-s-0: oklch(95.00% 0.15 250);
--primary-s-1: oklch(89.00% 0.15 250);
--primary-s-2: oklch(83.00% 0.15 250);
--primary-s-3: oklch(77.00% 0.15 250);
--primary-s-4: oklch(71.00% 0.15 250);
--primary-s-5: oklch(65% 0.15 250);
--primary-s-6: oklch(59.00% 0.15 250);
--primary-s-7: oklch(53.00% 0.15 250);
--primary-s-8: oklch(47.00% 0.15 250);
--primary-s-9: oklch(41.00% 0.15 250);
--primary-s-10: oklch(35.00% 0.15 250);
--primary-o: oklch(20.00% 0.05 250);
--background: oklch(13% 0.04 220);
--text: oklch(75% 0.05 240);
--secondary-b: oklch(65% 0.15 310.00);
--secondary-s-0: oklch(95.00% 0.15 310);
--secondary-s-1: oklch(89.00% 0.15 310);
--secondary-s-2: oklch(83.00% 0.15 310);
--secondary-s-3: oklch(77.00% 0.15 310);
--secondary-s-4: oklch(71.00% 0.15 310);
--secondary-s-5: oklch(65% 0.15 310.00);
--secondary-s-6: oklch(59.00% 0.15 310);
--secondary-s-7: oklch(53.00% 0.15 310);
--secondary-s-8: oklch(47.00% 0.15 310);
--secondary-s-9: oklch(41.00% 0.15 310);
--secondary-s-10: oklch(35.00% 0.15 310);
--secondary-o: oklch(20.00% 0.05 310);
--tertiary-b: oklch(65% 0.15 190.00);
--tertiary-s-0: oklch(95.00% 0.15 190);
--tertiary-s-1: oklch(89.00% 0.15 190);
--tertiary-s-2: oklch(83.00% 0.15 190);
--tertiary-s-3: oklch(77.00% 0.15 190);
--tertiary-s-4: oklch(71.00% 0.15 190);
--tertiary-s-5: oklch(65% 0.15 190.00);
--tertiary-s-6: oklch(59.00% 0.15 190);
--tertiary-s-7: oklch(53.00% 0.15 190);
--tertiary-s-8: oklch(47.00% 0.15 190);
--tertiary-s-9: oklch(41.00% 0.15 190);
--tertiary-s-10: oklch(35.00% 0.15 190);
--tertiary-o: oklch(20.00% 0.05 190);
--textS-0: oklch(63.00% 0.05 240);
--textS-1: oklch(69.00% 0.05 240);
--textS-2: oklch(75% 0.05 240);
--textS-3: oklch(81.00% 0.05 240);
--textS-4: oklch(87.00% 0.05 240);
--border: oklch(25.00% 0.03 240);
--primaryLight: oklch(55.00% 0.07 250);
--surface-0: oklch(21.00% 0.04 220);
--surface-1: oklch(29.00% 0.04 220);
--surface-2: oklch(37.00% 0.04 220);
} }
@media (prefers-color-scheme: light) { :root {
--primary-b: oklch(50% 0.15 250);
--primary-s-0: oklch(20.00% 0.15 250);
--primary-s-1: oklch(26.00% 0.15 250);
--primary-s-2: oklch(32.00% 0.15 250);
--primary-s-3: oklch(38.00% 0.15 250);
--primary-s-4: oklch(44.00% 0.15 250);
--primary-s-5: oklch(50% 0.15 250);
--primary-s-6: oklch(56.00% 0.15 250);
--primary-s-7: oklch(62.00% 0.15 250);
--primary-s-8: oklch(68.00% 0.15 250);
--primary-s-9: oklch(74.00% 0.15 250);
--primary-s-10: oklch(80.00% 0.15 250);
--primary-o: oklch(100.00% 0.05 250);
--background: oklch(88.5% 0.015 220);
--text: oklch(25% 0.05 250);
--secondary-b: oklch(50% 0.15 310.00);
--secondary-s-0: oklch(20.00% 0.15 310);
--secondary-s-1: oklch(26.00% 0.15 310);
--secondary-s-2: oklch(32.00% 0.15 310);
--secondary-s-3: oklch(38.00% 0.15 310);
--secondary-s-4: oklch(44.00% 0.15 310);
--secondary-s-5: oklch(50% 0.15 310.00);
--secondary-s-6: oklch(56.00% 0.15 310);
--secondary-s-7: oklch(62.00% 0.15 310);
--secondary-s-8: oklch(68.00% 0.15 310);
--secondary-s-9: oklch(74.00% 0.15 310);
--secondary-s-10: oklch(80.00% 0.15 310);
--secondary-o: oklch(100.00% 0.05 310);
--tertiary-b: oklch(50% 0.15 190.00);
--tertiary-s-0: oklch(20.00% 0.15 190);
--tertiary-s-1: oklch(26.00% 0.15 190);
--tertiary-s-2: oklch(32.00% 0.15 190);
--tertiary-s-3: oklch(38.00% 0.15 190);
--tertiary-s-4: oklch(44.00% 0.15 190);
--tertiary-s-5: oklch(50% 0.15 190.00);
--tertiary-s-6: oklch(56.00% 0.15 190);
--tertiary-s-7: oklch(62.00% 0.15 190);
--tertiary-s-8: oklch(68.00% 0.15 190);
--tertiary-s-9: oklch(74.00% 0.15 190);
--tertiary-s-10: oklch(80.00% 0.15 190);
--tertiary-o: oklch(100.00% 0.05 190);
--textS-0: oklch(37.00% 0.05 250);
--textS-1: oklch(31.00% 0.05 250);
--textS-2: oklch(25% 0.05 250);
--textS-3: oklch(19.00% 0.05 250);
--textS-4: oklch(13.00% 0.05 250);
--border: oklch(83.00% 0.03 250);
--primaryLight: oklch(60.00% 0.07 250);
--surface-0: oklch(92.50% 0.015 220);
--surface-1: oklch(96.50% 0.015 220);
--surface-2: oklch(100.50% 0.015 220);
} }
.dark-mode {
--primary-b: oklch(65% 0.15 250);
--primary-s-0: oklch(95.00% 0.15 250);
--primary-s-1: oklch(89.00% 0.15 250);
--primary-s-2: oklch(83.00% 0.15 250);
--primary-s-3: oklch(77.00% 0.15 250);
--primary-s-4: oklch(71.00% 0.15 250);
--primary-s-5: oklch(65% 0.15 250);
--primary-s-6: oklch(59.00% 0.15 250);
--primary-s-7: oklch(53.00% 0.15 250);
--primary-s-8: oklch(47.00% 0.15 250);
--primary-s-9: oklch(41.00% 0.15 250);
--primary-s-10: oklch(35.00% 0.15 250);
--primary-o: oklch(20.00% 0.05 250);
--background: oklch(13% 0.04 220);
--text: oklch(75% 0.05 240);
--secondary-b: oklch(65% 0.15 310.00);
--secondary-s-0: oklch(95.00% 0.15 310);
--secondary-s-1: oklch(89.00% 0.15 310);
--secondary-s-2: oklch(83.00% 0.15 310);
--secondary-s-3: oklch(77.00% 0.15 310);
--secondary-s-4: oklch(71.00% 0.15 310);
--secondary-s-5: oklch(65% 0.15 310.00);
--secondary-s-6: oklch(59.00% 0.15 310);
--secondary-s-7: oklch(53.00% 0.15 310);
--secondary-s-8: oklch(47.00% 0.15 310);
--secondary-s-9: oklch(41.00% 0.15 310);
--secondary-s-10: oklch(35.00% 0.15 310);
--secondary-o: oklch(20.00% 0.05 310);
--tertiary-b: oklch(65% 0.15 190.00);
--tertiary-s-0: oklch(95.00% 0.15 190);
--tertiary-s-1: oklch(89.00% 0.15 190);
--tertiary-s-2: oklch(83.00% 0.15 190);
--tertiary-s-3: oklch(77.00% 0.15 190);
--tertiary-s-4: oklch(71.00% 0.15 190);
--tertiary-s-5: oklch(65% 0.15 190.00);
--tertiary-s-6: oklch(59.00% 0.15 190);
--tertiary-s-7: oklch(53.00% 0.15 190);
--tertiary-s-8: oklch(47.00% 0.15 190);
--tertiary-s-9: oklch(41.00% 0.15 190);
--tertiary-s-10: oklch(35.00% 0.15 190);
--tertiary-o: oklch(20.00% 0.05 190);
--textS-0: oklch(63.00% 0.05 240);
--textS-1: oklch(69.00% 0.05 240);
--textS-2: oklch(75% 0.05 240);
--textS-3: oklch(81.00% 0.05 240);
--textS-4: oklch(87.00% 0.05 240);
--border: oklch(25.00% 0.03 240);
--primaryLight: oklch(55.00% 0.07 250);
--surface-0: oklch(21.00% 0.04 220);
--surface-1: oklch(29.00% 0.04 220);
--surface-2: oklch(37.00% 0.04 220);
}
.light-mode {
--primary-b: oklch(50% 0.15 250);
--primary-s-0: oklch(20.00% 0.15 250);
--primary-s-1: oklch(26.00% 0.15 250);
--primary-s-2: oklch(32.00% 0.15 250);
--primary-s-3: oklch(38.00% 0.15 250);
--primary-s-4: oklch(44.00% 0.15 250);
--primary-s-5: oklch(50% 0.15 250);
--primary-s-6: oklch(56.00% 0.15 250);
--primary-s-7: oklch(62.00% 0.15 250);
--primary-s-8: oklch(68.00% 0.15 250);
--primary-s-9: oklch(74.00% 0.15 250);
--primary-s-10: oklch(80.00% 0.15 250);
--primary-o: oklch(100.00% 0.05 250);
--background: oklch(88.5% 0.015 220);
--text: oklch(25% 0.05 250);
--secondary-b: oklch(50% 0.15 310.00);
--secondary-s-0: oklch(20.00% 0.15 310);
--secondary-s-1: oklch(26.00% 0.15 310);
--secondary-s-2: oklch(32.00% 0.15 310);
--secondary-s-3: oklch(38.00% 0.15 310);
--secondary-s-4: oklch(44.00% 0.15 310);
--secondary-s-5: oklch(50% 0.15 310.00);
--secondary-s-6: oklch(56.00% 0.15 310);
--secondary-s-7: oklch(62.00% 0.15 310);
--secondary-s-8: oklch(68.00% 0.15 310);
--secondary-s-9: oklch(74.00% 0.15 310);
--secondary-s-10: oklch(80.00% 0.15 310);
--secondary-o: oklch(100.00% 0.05 310);
--tertiary-b: oklch(50% 0.15 190.00);
--tertiary-s-0: oklch(20.00% 0.15 190);
--tertiary-s-1: oklch(26.00% 0.15 190);
--tertiary-s-2: oklch(32.00% 0.15 190);
--tertiary-s-3: oklch(38.00% 0.15 190);
--tertiary-s-4: oklch(44.00% 0.15 190);
--tertiary-s-5: oklch(50% 0.15 190.00);
--tertiary-s-6: oklch(56.00% 0.15 190);
--tertiary-s-7: oklch(62.00% 0.15 190);
--tertiary-s-8: oklch(68.00% 0.15 190);
--tertiary-s-9: oklch(74.00% 0.15 190);
--tertiary-s-10: oklch(80.00% 0.15 190);
--tertiary-o: oklch(100.00% 0.05 190);
--textS-0: oklch(37.00% 0.05 250);
--textS-1: oklch(31.00% 0.05 250);
--textS-2: oklch(25% 0.05 250);
--textS-3: oklch(19.00% 0.05 250);
--textS-4: oklch(13.00% 0.05 250);
--border: oklch(83.00% 0.03 250);
--primaryLight: oklch(60.00% 0.07 250);
--surface-0: oklch(92.50% 0.015 220);
--surface-1: oklch(96.50% 0.015 220);
--surface-2: oklch(100.50% 0.015 220);
}
Typography
var(--font-size--2)
var(--font-size--1)
var(--font-size-0)
var(--font-size-1)
var(--font-size-2)
var(--font-size-3)
var(--font-size-4)
var(--font-size-5)