diff --git a/.demo/app.vue b/.demo/app.vue index 7c7c43c..f5951f6 100644 --- a/.demo/app.vue +++ b/.demo/app.vue @@ -41,14 +41,14 @@ css({ padding: '{space.2}', alignItems: 'center', cursor: 'pointer', - color: '{color.gray.600}', + color: '{typography.color.secondary.600}', '@dark': { - color: '{color.gray.400}' + color: '{typography.color.secondary.400}' }, '&:hover': { - color: '{color.gray.900}', + color: '{typography.color.secondary.900}', '@dark': { - color: '{color.gray.100}' + color: '{typography.color.secondary.100}' } } } diff --git a/components/ProseCodeCopyButton.vue b/components/ProseCodeCopyButton.vue index 4dfedd2..2ac3086 100644 --- a/components/ProseCodeCopyButton.vue +++ b/components/ProseCodeCopyButton.vue @@ -60,14 +60,15 @@ css({ transform: "scale(0.75)", opacity: 0, - '&:hover': { - backgroundColor: '{elements.surface.secondary.backgroundColor}', - }, + // TODO: handle surface tokens + // '&:hover': { + // backgroundColor: '{elements.surface.secondary.backgroundColor}', + // }, '&:focus': { opacity: 1, outline: 'none', - boxShadow: '0 0 0 2px {color.blue.500}', + boxShadow: '0 0 0 2px {typography.color.primary.500}', }, '&.show': { diff --git a/components/global/ProseA.vue b/components/global/ProseA.vue index 58b3646..8154390 100644 --- a/components/global/ProseA.vue +++ b/components/global/ProseA.vue @@ -13,7 +13,7 @@ defineProps({ @@ -39,19 +39,8 @@ css({ }, '&:has(code)': { borderBottom: '{prose.a.hasCode.borderBottom}', - ':deep(code)': { - color: '{prose.a.code.color.static}', - borderWidth: '{prose.a.code.border.width}', - borderStyle: '{prose.a.code.border.style}', - borderColor: '{prose.a.code.border.color.static}', - }, '&:hover': { borderBottom: '{prose.a.hasCode.borderBottom}', - ':deep(code)': { - color: '{prose.a.code.color.hover}', - borderColor: '{prose.a.code.border.color.hover}', - backgroundColor: '{prose.a.code.background.hover}', - }, }, }, }, diff --git a/components/global/ProseBlockquote.vue b/components/global/ProseBlockquote.vue index 2d7231f..edbec53 100644 --- a/components/global/ProseBlockquote.vue +++ b/components/global/ProseBlockquote.vue @@ -1,5 +1,5 @@ diff --git a/components/global/ProseCode.vue b/components/global/ProseCode.vue index 55ed7ac..81b4c10 100644 --- a/components/global/ProseCode.vue +++ b/components/global/ProseCode.vue @@ -45,10 +45,10 @@ css({ width: "100%", fontSize: '{prose.code.block.fontSize}', margin: '{prose.code.block.margin}', - borderRadius: '{radii.md}', - borderWidth: '{prose.code.block.border.width}', - borderStyle: '{prose.code.block.border.style}', - borderColor: '{prose.code.block.border.color}', + borderRadius: '{prose.code.block.borderRadius}', + borderWidth: '{prose.code.block.borderWidth}', + borderStyle: '{prose.code.block.borderStyle}', + borderColor: '{prose.code.block.borderColor}', color: '{prose.code.block.color}', backgroundColor: '{prose.code.block.backgroundColor}', backdropFilter: '{prose.code.block.backdropFilter}', @@ -71,7 +71,7 @@ css({ userSelect: "none", fontWeight: 700, color: '{typography.color.primary.500}', - fontFamily: '{font.mono}' + fontFamily: '{typography.font.mono}' } } } @@ -94,9 +94,9 @@ css({ padding: '0.5rem 0.75rem', fontFamily: '{typography.font.code}', color: '{prose.code.block.color}', - borderRadius: '{radii.lg}', - fontSize: '{fontSize.xs}', - lineHeight: '{lead.normal}', + borderRadius: '{typography.radii.lg}', + fontSize: '{typography.fontSize.xs}', + lineHeight: '{typography.lead.normal}', transition: 'opacity 200ms', backdropFilter: 'blur(4px)', }, @@ -113,7 +113,7 @@ css({ overflowX: "auto", margin: "0", padding: '{prose.code.block.pre.padding}', - lineHeight: '{lead.relaxed}', + lineHeight: '{typography.lead.relaxed}', }, ":deep(pre code)": { paddingInlineEnd: '30px', diff --git a/components/global/ProseCodeInline.vue b/components/global/ProseCodeInline.vue index 7cc906b..e9a9510 100644 --- a/components/global/ProseCodeInline.vue +++ b/components/global/ProseCodeInline.vue @@ -1,5 +1,5 @@ @@ -21,11 +21,22 @@ css({ }, 'h1, h2, h3, h4, h5, h6': { 'a code': { - color: "inherit", + color: '{prose.code.inline.color}', fontSize: "0.777777em", borderRadius: "{prose.code.inline.borderRadius}", padding: "0.15em 0.5em", } - } + }, + 'a code': { + color: '{prose.a.code.color.static}', + borderWidth: '{prose.a.code.border.width}', + borderStyle: '{prose.a.code.border.style}', + borderColor: '{prose.a.code.border.color.static}', + }, + 'a:hover code': { + color: '{prose.a.code.color.hover}', + borderColor: '{prose.a.code.border.color.hover}', + backgroundColor: '{prose.a.code.background.hover}', + }, }) diff --git a/components/global/ProseEm.vue b/components/global/ProseEm.vue index 75edaff..a9b6bf9 100644 --- a/components/global/ProseEm.vue +++ b/components/global/ProseEm.vue @@ -1,5 +1,5 @@ diff --git a/components/global/ProseH1.vue b/components/global/ProseH1.vue index 2cba942..e85fe65 100644 --- a/components/global/ProseH1.vue +++ b/components/global/ProseH1.vue @@ -10,7 +10,7 @@ const icon = computed(() => prose?.h1?.icon || prose?.headings?.icon)