comark-cards 0.8.0 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{client-DsO8I6Oo.mjs → client-DYbyWIxF.mjs} +32 -8
- package/dist/client.d.mts +2 -3
- package/dist/client.mjs +1 -1
- package/dist/html.mjs +2 -2
- package/dist/index.mjs +1 -1
- package/dist/react.mjs +2 -2
- package/dist/{src-BsKBRfFx.mjs → src-DQCI1bYc.mjs} +1 -1
- package/dist/style.css +1 -1
- package/dist/vue.mjs +2 -2
- package/package.json +3 -3
|
@@ -74,6 +74,29 @@ const groups = {
|
|
|
74
74
|
"#60a5fa"
|
|
75
75
|
]
|
|
76
76
|
}),
|
|
77
|
+
primary: [
|
|
78
|
+
[
|
|
79
|
+
"primary",
|
|
80
|
+
"ui-primary",
|
|
81
|
+
"primary",
|
|
82
|
+
"var(--_comark-foreground)",
|
|
83
|
+
"var(--_comark-foreground)"
|
|
84
|
+
],
|
|
85
|
+
[
|
|
86
|
+
"primary-foreground",
|
|
87
|
+
"ui-text-inverted",
|
|
88
|
+
"primary-foreground",
|
|
89
|
+
"var(--_comark-background)",
|
|
90
|
+
"var(--_comark-background)"
|
|
91
|
+
],
|
|
92
|
+
[
|
|
93
|
+
"secondary",
|
|
94
|
+
"ui-secondary",
|
|
95
|
+
"",
|
|
96
|
+
"var(--_comark-muted)",
|
|
97
|
+
"var(--_comark-muted)"
|
|
98
|
+
]
|
|
99
|
+
],
|
|
77
100
|
shadow: [[
|
|
78
101
|
"shadow",
|
|
79
102
|
"",
|
|
@@ -94,14 +117,16 @@ const resolve = (list, scheme) => list.map((token) => `--_comark-${token[0]}:${c
|
|
|
94
117
|
* They resolve on the component rather than `:root`, so a `.dark` class anywhere above it switches the theme, and a
|
|
95
118
|
* `--comark-*` set on any ancestor still inherits down. `:where()` keeps them at zero specificity.
|
|
96
119
|
*
|
|
97
|
-
* Every block gets the core tokens. Name `"status"` for `--comark-success`, `-danger`, `-warning`, and `-info`,
|
|
98
|
-
* `"
|
|
120
|
+
* Every block gets the core tokens. Name `"status"` for `--comark-success`, `-danger`, `-warning`, and `-info`,
|
|
121
|
+
* `"primary"` for `--comark-primary`, `-primary-foreground`, and `-secondary`, and `"shadow"` for `--comark-shadow`, so
|
|
122
|
+
* a block that never draws them doesn't carry them.
|
|
99
123
|
*/
|
|
100
124
|
function theme(selector, ...extras) {
|
|
101
125
|
const where = `:where(${selector})`;
|
|
102
126
|
const added = extras.flatMap((name) => groups[name]);
|
|
103
127
|
const list = [...tokens, ...added];
|
|
104
|
-
const
|
|
128
|
+
const schemed = added.filter((token) => token[3] !== token[4]);
|
|
129
|
+
const classes = schemed.length ? `:where(.light,.light *)${where}{${resolve(schemed, 3)}}:where(.dark,.dark *)${where}{${resolve(schemed, 4)}}` : "";
|
|
105
130
|
return `${where}{${resolve(list, 3)};--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){${where}{${resolve(list, 4)}}}` + classes;
|
|
106
131
|
}
|
|
107
132
|
//#endregion
|
|
@@ -110,13 +135,12 @@ function theme(selector, ...extras) {
|
|
|
110
135
|
* Cards in the style of shadcn/ui's Card, two to a row in a group and one when the group is narrower than 36rem, and
|
|
111
136
|
* columns from `::columns`, on the shared `--comark-*` tokens. The group is a size container, so a group in a narrow
|
|
112
137
|
* column stacks whatever the screen's width. A card's color tints its icon and, on a link card, its hovered border; the
|
|
113
|
-
* `soft` variant washes the card in it, and `subtle` its border too. Each color reads
|
|
114
|
-
*
|
|
115
|
-
* primary then to the foreground, so a card is neutral like the other plugins until the page has a brand color. The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
|
|
138
|
+
* `soft` variant washes the card in it, and `subtle` its border too. Each color reads a shared token, which follows
|
|
139
|
+
* Nuxt UI's `--ui-*` variables, then shadcn/ui's; set `--ccr-*` to change one for cards alone. The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
|
|
116
140
|
*/
|
|
117
141
|
const css = `@layer comark{${[
|
|
118
|
-
theme(".ccr,.ccr-group,.ccr-columns", "status"),
|
|
119
|
-
":where(.ccr){--ccr-primary:var(--
|
|
142
|
+
theme(".ccr,.ccr-group,.ccr-columns", "status", "primary"),
|
|
143
|
+
":where(.ccr){--ccr-primary:var(--_comark-primary);--ccr-secondary:var(--_comark-secondary);--ccr-success:var(--_comark-success);--ccr-info:var(--_comark-info);--ccr-warning:var(--_comark-warning);--ccr-error:var(--_comark-danger);--ccr-neutral:var(--_comark-foreground)}",
|
|
120
144
|
".ccr-group,.ccr-columns{display:grid;gap:1rem;margin:1.5rem 0;container-type:inline-size}",
|
|
121
145
|
".ccr-group{grid-template-columns:repeat(2,minmax(0,1fr))}",
|
|
122
146
|
...[
|
package/dist/client.d.mts
CHANGED
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
* Cards in the style of shadcn/ui's Card, two to a row in a group and one when the group is narrower than 36rem, and
|
|
4
4
|
* columns from `::columns`, on the shared `--comark-*` tokens. The group is a size container, so a group in a narrow
|
|
5
5
|
* column stacks whatever the screen's width. A card's color tints its icon and, on a link card, its hovered border; the
|
|
6
|
-
* `soft` variant washes the card in it, and `subtle` its border too. Each color reads
|
|
7
|
-
*
|
|
8
|
-
* primary then to the foreground, so a card is neutral like the other plugins until the page has a brand color. The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
|
|
6
|
+
* `soft` variant washes the card in it, and `subtle` its border too. Each color reads a shared token, which follows
|
|
7
|
+
* Nuxt UI's `--ui-*` variables, then shadcn/ui's; set `--ccr-*` to change one for cards alone. The rules sit in the `comark` layer, so any unlayered rule of the host's wins.
|
|
9
8
|
*/
|
|
10
9
|
export declare const css: string;
|
|
11
10
|
//#endregion
|
package/dist/client.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { t as addStyles, o as css, n as external, r as isExternalHref, i as isSafeHref, a as rel } from "./client-
|
|
1
|
+
export { t as addStyles, o as css, n as external, r as isExternalHref, i as isSafeHref, a as rel } from "./client-DYbyWIxF.mjs";
|
package/dist/html.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as rel, n as external, o as css } from "./client-
|
|
2
|
-
import { i as rawText, n as src_default, r as variants, t as colors } from "./src-
|
|
1
|
+
import { a as rel, n as external, o as css } from "./client-DYbyWIxF.mjs";
|
|
2
|
+
import { i as rawText, n as src_default, r as variants, t as colors } from "./src-DQCI1bYc.mjs";
|
|
3
3
|
import { escapeHtml } from "comark/utils";
|
|
4
4
|
import { iconHtml, iconStyles } from "comark-icon/html";
|
|
5
5
|
//#region ../../shared/html.ts
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { t as colors, n as default, r as variants } from "./src-
|
|
1
|
+
export { t as colors, n as default, r as variants } from "./src-DQCI1bYc.mjs";
|
package/dist/react.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-
|
|
2
|
-
import { n as src_default, r as variants, t as colors } from "./src-
|
|
1
|
+
import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-DYbyWIxF.mjs";
|
|
2
|
+
import { n as src_default, r as variants, t as colors } from "./src-DQCI1bYc.mjs";
|
|
3
3
|
import { Icon } from "comark-icon/react";
|
|
4
4
|
import { createElement, useEffect } from "react";
|
|
5
5
|
//#region src/react.ts
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { i as isSafeHref, r as isExternalHref } from "./client-
|
|
1
|
+
import { i as isSafeHref, r as isExternalHref } from "./client-DYbyWIxF.mjs";
|
|
2
2
|
import { defineComarkPlugin } from "comark";
|
|
3
3
|
import { resolveAttributes } from "comark/render";
|
|
4
4
|
import { textContent } from "comark/utils";
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer comark{:where(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#259f56)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#ee3533)));--_comark-warning:var(--comark-warning,var(--ui-warning,#d97706));--_comark-info:var(--comark-info,var(--ui-info,#2563eb));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa))}}:where(.light,.light *):where(.ccr,.ccr-group,.ccr-columns){--_comark-success:var(--comark-success,var(--ui-success,var(--success,#259f56)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#ee3533)));--_comark-warning:var(--comark-warning,var(--ui-warning,#d97706));--_comark-info:var(--comark-info,var(--ui-info,#2563eb))}:where(.dark,.dark *):where(.ccr,.ccr-group,.ccr-columns){--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa))}:where(.ccr){--ccr-primary:var(--
|
|
1
|
+
@layer comark{:where(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#fff)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#0a0a0a)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#737373)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,#e5e5e5)));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#f5f5f5)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#a1a1a1)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#259f56)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#ee3533)));--_comark-warning:var(--comark-warning,var(--ui-warning,#d97706));--_comark-info:var(--comark-info,var(--ui-info,#2563eb));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)));--_comark-radius:var(--comark-radius,calc(var(--ui-radius,calc(var(--radius,.625rem)/2))*2));--_comark-font:var(--comark-font,var(--font-sans,ui-sans-serif,system-ui,sans-serif))}@media (prefers-color-scheme:dark){:where(.ccr,.ccr-group,.ccr-columns){--_comark-background:var(--comark-background,var(--ui-bg,var(--background,#0a0a0a)));--_comark-foreground:var(--comark-foreground,var(--ui-text-highlighted,var(--foreground,#fafafa)));--_comark-muted:var(--comark-muted,var(--ui-text-muted,var(--muted-foreground,#a1a1a1)));--_comark-border:var(--comark-border,var(--ui-border,var(--border,rgb(255 255 255/.1))));--_comark-accent:var(--comark-accent,var(--ui-bg-elevated,var(--accent,#262626)));--_comark-ring:var(--comark-ring,var(--ui-primary,var(--ring,#737373)));--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa));--_comark-primary:var(--comark-primary,var(--ui-primary,var(--primary,var(--_comark-foreground))));--_comark-primary-foreground:var(--comark-primary-foreground,var(--ui-text-inverted,var(--primary-foreground,var(--_comark-background))));--_comark-secondary:var(--comark-secondary,var(--ui-secondary,var(--_comark-muted)))}}:where(.light,.light *):where(.ccr,.ccr-group,.ccr-columns){--_comark-success:var(--comark-success,var(--ui-success,var(--success,#259f56)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#ee3533)));--_comark-warning:var(--comark-warning,var(--ui-warning,#d97706));--_comark-info:var(--comark-info,var(--ui-info,#2563eb))}:where(.dark,.dark *):where(.ccr,.ccr-group,.ccr-columns){--_comark-success:var(--comark-success,var(--ui-success,var(--success,#59d38c)));--_comark-danger:var(--comark-danger,var(--ui-error,var(--destructive,#fd736d)));--_comark-warning:var(--comark-warning,var(--ui-warning,#fbbf24));--_comark-info:var(--comark-info,var(--ui-info,#60a5fa))}:where(.ccr){--ccr-primary:var(--_comark-primary);--ccr-secondary:var(--_comark-secondary);--ccr-success:var(--_comark-success);--ccr-info:var(--_comark-info);--ccr-warning:var(--_comark-warning);--ccr-error:var(--_comark-danger);--ccr-neutral:var(--_comark-foreground)}.ccr-group,.ccr-columns{display:grid;gap:1rem;margin:1.5rem 0;container-type:inline-size}.ccr-group{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='2']{grid-template-columns:repeat(2,minmax(0,1fr))}.ccr-columns[data-cols='3']{grid-template-columns:repeat(3,minmax(0,1fr))}.ccr-columns[data-cols='4']{grid-template-columns:repeat(4,minmax(0,1fr))}.ccr-columns[data-cols='5']{grid-template-columns:repeat(5,minmax(0,1fr))}.ccr-columns[data-cols='6']{grid-template-columns:repeat(6,minmax(0,1fr))}@container (width<36rem){.ccr-group>*,.ccr-columns>*{grid-column:1/-1}}.ccr-group>.ccr{margin:0}.ccr-column>:first-child{margin-top:0}.ccr-column>:last-child{margin-bottom:0}.ccr{--ccr:var(--ccr-primary);position:relative;margin:1.5rem 0;padding:1.25rem;border:1px solid var(--_comark-border);border-radius:calc(var(--_comark-radius) + 2px);background:var(--_comark-background);color:var(--_comark-muted);font:400 .875rem/1.375rem var(--_comark-font);transition:background-color .15s,border-color .15s}.ccr[data-color='secondary']{--ccr:var(--ccr-secondary)}.ccr[data-color='success']{--ccr:var(--ccr-success)}.ccr[data-color='info']{--ccr:var(--ccr-info)}.ccr[data-color='warning']{--ccr:var(--ccr-warning)}.ccr[data-color='error']{--ccr:var(--ccr-error)}.ccr[data-color='neutral']{--ccr:var(--ccr-neutral)}.ccr[data-variant='soft'],.ccr[data-variant='subtle']{background:color-mix(in srgb,var(--ccr) 10%,var(--_comark-background))}.ccr[data-variant='soft']{border-color:transparent}.ccr[data-variant='subtle']{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr>:last-child{margin-bottom:0}.ccr>.ci{--comark-icon-size:1.25rem;display:block;margin-bottom:.75rem;color:var(--ccr)}.ccr-title{margin:0 0 .25rem;color:var(--_comark-foreground);font-size:.9375rem;font-weight:600;line-height:1.375rem;text-wrap:balance}.ccr-title+*{margin-top:0}.ccr-link{position:absolute;inset:0;z-index:0;border-radius:inherit}.ccr-link:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}.ccr :is(a,button):not(.ccr-link){position:relative;z-index:1}.ccr:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 50%,var(--_comark-border));background:color-mix(in srgb,var(--_comark-accent) 50%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover{border-color:transparent}.ccr[data-variant='subtle']:has(>.ccr-link):hover{border-color:color-mix(in srgb,var(--ccr) 30%,var(--_comark-background))}.ccr[data-variant='soft']:has(>.ccr-link):hover,.ccr[data-variant='subtle']:has(>.ccr-link):hover{background:color-mix(in srgb,var(--ccr) 16%,var(--_comark-background))}.ccr-external{position:absolute;top:1rem;inset-inline-end:1rem;width:1rem;height:1rem;color:var(--_comark-muted)}.ccr:dir(rtl) .ccr-external{scale:-1 1}@media print{.ccr{break-inside:avoid}.ccr-external{display:none}}}
|
package/dist/vue.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-
|
|
2
|
-
import { n as src_default, r as variants, t as colors } from "./src-
|
|
1
|
+
import { a as rel, i as isSafeHref, n as external, r as isExternalHref, t as addStyles } from "./client-DYbyWIxF.mjs";
|
|
2
|
+
import { n as src_default, r as variants, t as colors } from "./src-DQCI1bYc.mjs";
|
|
3
3
|
import { defineComponent, h, onMounted } from "vue";
|
|
4
4
|
import { Icon } from "comark-icon/vue";
|
|
5
5
|
//#region src/vue.ts
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "comark-cards",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"description": "Cards, link cards, and columns in Nuxt UI's syntax, with no script. A Comark plugin.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"card",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"provenance": true
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"comark-icon": "^0.8.
|
|
49
|
+
"comark-icon": "^0.8.2"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@comark/html": "^0.8.1",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"react-dom": "^19.3.1",
|
|
60
60
|
"svelte": "^5.57.2",
|
|
61
61
|
"vue": "^3.5.44",
|
|
62
|
-
"comark-zoom": "0.8.
|
|
62
|
+
"comark-zoom": "0.8.2"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"@comark/html": "^0.8.0",
|