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)
-
+
diff --git a/components/global/ProseH2.vue b/components/global/ProseH2.vue
index d9ace26..0475e40 100644
--- a/components/global/ProseH2.vue
+++ b/components/global/ProseH2.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h2?.icon || prose?.headings?.icon)
-
+
diff --git a/components/global/ProseH3.vue b/components/global/ProseH3.vue
index ee1baf6..7586380 100644
--- a/components/global/ProseH3.vue
+++ b/components/global/ProseH3.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h3?.icon || prose?.headings?.icon)
-
+
diff --git a/components/global/ProseH4.vue b/components/global/ProseH4.vue
index cacb626..28a8784 100644
--- a/components/global/ProseH4.vue
+++ b/components/global/ProseH4.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h4?.icon || prose?.headings?.icon)
-
+
diff --git a/components/global/ProseH5.vue b/components/global/ProseH5.vue
index 61cc392..a2c63a5 100644
--- a/components/global/ProseH5.vue
+++ b/components/global/ProseH5.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h5?.icon || prose?.headings?.icon)
-
+
diff --git a/components/global/ProseH6.vue b/components/global/ProseH6.vue
index 77d5a7c..50f3aaf 100644
--- a/components/global/ProseH6.vue
+++ b/components/global/ProseH6.vue
@@ -10,7 +10,7 @@ const icon = computed(() => prose?.h6?.icon || prose?.headings?.icon)
-
+
diff --git a/components/global/ProseHr.vue b/components/global/ProseHr.vue
index d6b0d99..ec885f2 100644
--- a/components/global/ProseHr.vue
+++ b/components/global/ProseHr.vue
@@ -1,5 +1,5 @@
-
+