@24vlh/vds 0.1.9 → 0.2.0

package/dist/components/avatar.css

@@ -0,0 +1,229 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Avatars
+ *
+ *  Responsibilities:
+ *    - Provide avatar primitives, sizes, and shape variants
+ *    - Support initials, images, presence indicators, and groups
+ *    - Keep avatar stacks and overflow counts consistent
+ *
+ *  System Notes:
+ *    - Pure CSS; use <img> for photos and <span> for initials
+ *    - Token-driven spacing, borders, and status colours
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. AVATAR TOKENS
+--------------------------------------------------------- */
+
+[data-vds-avatar],
+.vds-avatar {
+    --avatar-size-xs: 1.5rem;
+    --avatar-size-sm: 2rem;
+    --avatar-size-md: 2.5rem;
+    --avatar-size-lg: 3rem;
+    --avatar-size-xl: 3.75rem;
+    --avatar-bg: var(--color-surface-subtle);
+    --avatar-border: var(--color-border-subtle);
+    --avatar-text: var(--color-text);
+    --avatar-border-width: var(--border-width);
+    --avatar-ring: var(--color-surface);
+    --avatar-ring-width: 2px;
+    --avatar-status-size: 0.6rem;
+    --avatar-status-ring: var(--color-surface);
+    --avatar-status-offset: 0.15rem;
+    --avatar-stack-offset: var(--space-1_5);
+}
+
+/* ---------------------------------------------------------
+   2. BASE AVATAR
+--------------------------------------------------------- */
+
+.avatar {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--avatar-size-md);
+    height: var(--avatar-size-md);
+    border-radius: var(--radius-full);
+    background: var(--avatar-bg);
+    border: var(--avatar-border-width) solid var(--avatar-border);
+    color: var(--avatar-text);
+    font-size: var(--text-xs);
+    font-weight: 600;
+    line-height: 1;
+    overflow: visible;
+}
+
+.avatar__media {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.avatar__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    -o-object-fit: cover;
+       object-fit: cover;
+    border-radius: inherit;
+}
+
+.avatar__initials {
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.avatar--square {
+    border-radius: var(--radius-md);
+}
+
+.avatar--sharp {
+    border-radius: var(--radius-none);
+}
+
+.avatar--ring {
+    box-shadow: 0 0 0 var(--avatar-ring-width) var(--avatar-ring);
+}
+
+/* ---------------------------------------------------------
+   3. SIZE MODIFIERS
+--------------------------------------------------------- */
+
+.avatar--xs {
+    width: var(--avatar-size-xs);
+    height: var(--avatar-size-xs);
+    font-size: var(--text-xxs);
+}
+
+.avatar--sm {
+    width: var(--avatar-size-sm);
+    height: var(--avatar-size-sm);
+    font-size: var(--text-xs);
+}
+
+.avatar--lg {
+    width: var(--avatar-size-lg);
+    height: var(--avatar-size-lg);
+    font-size: var(--text-sm);
+}
+
+.avatar--xl {
+    width: var(--avatar-size-xl);
+    height: var(--avatar-size-xl);
+    font-size: var(--text-md);
+}
+
+/* ---------------------------------------------------------
+   4. STATUS INDICATORS
+--------------------------------------------------------- */
+
+.avatar__status {
+    position: absolute;
+    bottom: calc(-1 * var(--avatar-status-offset));
+    right: calc(-1 * var(--avatar-status-offset));
+    width: var(--avatar-status-size);
+    height: var(--avatar-status-size);
+    border-radius: 999px;
+    border: 2px solid var(--avatar-status-ring);
+    background: var(--color-text-muted);
+    box-shadow: 0 0 0 1px var(--avatar-border);
+}
+
+.avatar__status--online {
+    background: var(--color-success);
+}
+
+.avatar__status--away {
+    background: var(--color-warning);
+}
+
+.avatar__status--busy {
+    background: var(--color-danger);
+}
+
+/* ---------------------------------------------------------
+   5. AVATAR GROUPS
+--------------------------------------------------------- */
+
+.avatar-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.avatar-group .avatar {
+    position: relative;
+    margin-left: calc(-1 * var(--avatar-stack-offset));
+    box-shadow: 0 0 0 var(--avatar-ring-width) var(--avatar-ring);
+}
+
+.avatar-group .avatar:first-child {
+    margin-left: 0;
+}
+
+.avatar-group--spread .avatar {
+    margin-left: 0;
+}
+
+.avatar-group__more {
+    background: var(--color-surface);
+    border: var(--border-width) dashed var(--color-border-subtle);
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   6. COLOUR VARIANTS
+--------------------------------------------------------- */
+
+.avatar--accent {
+    --avatar-bg: var(--color-accent-soft);
+    --avatar-border: var(--color-accent);
+    --avatar-text: var(--color-text);
+}
+
+.avatar--success {
+    --avatar-bg: var(--color-success-soft);
+    --avatar-border: var(--color-success);
+    --avatar-text: var(--color-success-strong);
+}
+
+.avatar--info {
+    --avatar-bg: var(--color-info-soft);
+    --avatar-border: var(--color-info);
+    --avatar-text: var(--color-info-strong);
+}
+
+.avatar--warning {
+    --avatar-bg: var(--color-warning-soft);
+    --avatar-border: var(--color-warning);
+    --avatar-text: var(--color-warning-strong);
+}
+
+.avatar--danger {
+    --avatar-bg: var(--color-danger-soft);
+    --avatar-border: var(--color-danger);
+    --avatar-text: var(--color-danger-strong);
+}
+
+.avatar--mono {
+    --avatar-bg: var(--color-mono-soft);
+    --avatar-border: var(--color-mono);
+    --avatar-text: var(--color-mono-strong);
+}
+
+.avatar--neutral {
+    --avatar-bg: var(--color-surface-subtle);
+    --avatar-border: var(--color-border-strong);
+    --avatar-text: var(--color-text-muted);
+}
+
+.avatar--bordered {
+    --avatar-border-width: 2px;
+    --avatar-border: var(--color-border-strong);
+}

package/dist/components/avatar.min.css

@@ -0,0 +1 @@
+.vds-avatar,[data-vds-avatar]{--avatar-size-xs:1.5rem;--avatar-size-sm:2rem;--avatar-size-md:2.5rem;--avatar-size-lg:3rem;--avatar-size-xl:3.75rem;--avatar-bg:var(--color-surface-subtle);--avatar-border:var(--color-border-subtle);--avatar-text:var(--color-text);--avatar-border-width:var(--border-width);--avatar-ring:var(--color-surface);--avatar-ring-width:2px;--avatar-status-size:0.6rem;--avatar-status-ring:var(--color-surface);--avatar-status-offset:0.15rem;--avatar-stack-offset:var(--space-1_5)}.avatar{align-items:center;background:var(--avatar-bg);border:var(--avatar-border-width) solid var(--avatar-border);border-radius:var(--radius-full);color:var(--avatar-text);display:inline-flex;font-size:var(--text-xs);font-weight:600;height:var(--avatar-size-md);justify-content:center;line-height:1;overflow:visible;position:relative;width:var(--avatar-size-md)}.avatar__media{align-items:center;display:flex;justify-content:center;overflow:hidden}.avatar__image,.avatar__media{border-radius:inherit;height:100%;width:100%}.avatar__image{display:block;-o-object-fit:cover;object-fit:cover}.avatar__initials{letter-spacing:.04em;text-transform:uppercase}.avatar--square{border-radius:var(--radius-md)}.avatar--sharp{border-radius:var(--radius-none)}.avatar--ring{box-shadow:0 0 0 var(--avatar-ring-width) var(--avatar-ring)}.avatar--xs{font-size:var(--text-xxs);height:var(--avatar-size-xs);width:var(--avatar-size-xs)}.avatar--sm{font-size:var(--text-xs);height:var(--avatar-size-sm);width:var(--avatar-size-sm)}.avatar--lg{font-size:var(--text-sm);height:var(--avatar-size-lg);width:var(--avatar-size-lg)}.avatar--xl{font-size:var(--text-md);height:var(--avatar-size-xl);width:var(--avatar-size-xl)}.avatar__status{background:var(--color-text-muted);border:2px solid var(--avatar-status-ring);border-radius:999px;bottom:calc(var(--avatar-status-offset)*-1);box-shadow:0 0 0 1px var(--avatar-border);height:var(--avatar-status-size);position:absolute;right:calc(var(--avatar-status-offset)*-1);width:var(--avatar-status-size)}.avatar__status--online{background:var(--color-success)}.avatar__status--away{background:var(--color-warning)}.avatar__status--busy{background:var(--color-danger)}.avatar-group{align-items:center;display:flex;flex-wrap:wrap}.avatar-group .avatar{box-shadow:0 0 0 var(--avatar-ring-width) var(--avatar-ring);margin-left:calc(var(--avatar-stack-offset)*-1);position:relative}.avatar-group .avatar:first-child,.avatar-group--spread .avatar{margin-left:0}.avatar-group__more{background:var(--color-surface);border:var(--border-width) dashed var(--color-border-subtle);color:var(--color-text-muted)}.avatar--accent{--avatar-bg:var(--color-accent-soft);--avatar-border:var(--color-accent);--avatar-text:var(--color-text)}.avatar--success{--avatar-bg:var(--color-success-soft);--avatar-border:var(--color-success);--avatar-text:var(--color-success-strong)}.avatar--info{--avatar-bg:var(--color-info-soft);--avatar-border:var(--color-info);--avatar-text:var(--color-info-strong)}.avatar--warning{--avatar-bg:var(--color-warning-soft);--avatar-border:var(--color-warning);--avatar-text:var(--color-warning-strong)}.avatar--danger{--avatar-bg:var(--color-danger-soft);--avatar-border:var(--color-danger);--avatar-text:var(--color-danger-strong)}.avatar--mono{--avatar-bg:var(--color-mono-soft);--avatar-border:var(--color-mono);--avatar-text:var(--color-mono-strong)}.avatar--neutral{--avatar-bg:var(--color-surface-subtle);--avatar-border:var(--color-border-strong);--avatar-text:var(--color-text-muted)}.avatar--bordered{--avatar-border-width:2px;--avatar-border:var(--color-border-strong)}

package/dist/components/badge-tag.css

@@ -0,0 +1,235 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Badges / Tags / Status Pills
+ *
+ *  Responsibilities:
+ *    - Provide compact, inline status labels and tags
+ *    - Support soft, solid, and outline treatments
+ *    - Expose semantic variants (success, info, warning, danger)
+ *    - Handle icon/dot affordances and removable tags
+ *
+ *  System Notes:
+ *    - Pure CSS; tags can be rendered as <button>, <a>, or <span>
+ *    - Fully token-driven for sizing, colour, and spacing
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. BADGE-TAG TOKENS
+--------------------------------------------------------- */
+
+[data-vds-badge-tag],
+.vds-badge-tag {
+    --badge-tag-radius: var(--radius-pill);
+    --badge-tag-font-size: var(--text-xs);
+    --badge-tag-font-weight: 600;
+    --badge-tag-padding-y: var(--space-1);
+    --badge-tag-padding-x: var(--space-2_5);
+    --badge-tag-gap: var(--space-1_5);
+    --badge-tag-dot-size: 0.4rem;
+    --badge-tag-icon-size: 0.85rem;
+    --badge-tag-border-width: var(--border-width);
+    --badge-tag-circle-size: var(--space-6);
+
+    --badge-tag-bg: var(--color-surface-subtle);
+    --badge-tag-border: var(--color-border-subtle);
+    --badge-tag-text: var(--color-text);
+
+    --badge-tag-solid-bg: var(--color-accent);
+    --badge-tag-solid-border: var(--color-accent-strong);
+    --badge-tag-solid-text: var(--color-on-accent);
+}
+
+/* ---------------------------------------------------------
+   2. BASE BADGE-TAG
+--------------------------------------------------------- */
+
+.badge-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--badge-tag-gap);
+    padding: var(--badge-tag-padding-y) var(--badge-tag-padding-x);
+    border-radius: var(--badge-tag-radius);
+    border: var(--badge-tag-border-width) solid var(--badge-tag-border);
+    background: var(--badge-tag-bg);
+    color: var(--badge-tag-text);
+    font-size: var(--badge-tag-font-size);
+    font-weight: var(--badge-tag-font-weight);
+    line-height: 1;
+    white-space: nowrap;
+    -webkit-text-decoration: none;
+    text-decoration: none;
+}
+
+.badge__dot {
+    width: var(--badge-tag-dot-size);
+    height: var(--badge-tag-dot-size);
+    border-radius: 999px;
+    background: currentColor;
+}
+
+.badge__icon {
+    width: var(--badge-tag-icon-size);
+    height: var(--badge-tag-icon-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.badge__remove {
+    display: inline-flex;
+    align-items: center;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+    margin-left: var(--space-1);
+}
+
+/* ---------------------------------------------------------
+   3. SIZE MODIFIERS
+--------------------------------------------------------- */
+
+.badge-tag--xs {
+    --badge-tag-padding-y: var(--space-0_5);
+    --badge-tag-padding-x: var(--space-2);
+    --badge-tag-font-size: var(--text-xxs);
+    --badge-tag-circle-size: var(--space-4);
+}
+
+.badge-tag--sm {
+    --badge-tag-padding-y: var(--space-1);
+    --badge-tag-padding-x: var(--space-2_5);
+    --badge-tag-circle-size: var(--space-5);
+}
+
+.badge-tag--lg {
+    --badge-tag-padding-y: var(--space-1_5);
+    --badge-tag-padding-x: var(--space-3_5);
+    --badge-tag-font-size: var(--text-sm);
+    --badge-tag-circle-size: var(--space-7);
+}
+
+/* ---------------------------------------------------------
+   4. SHAPE & INTERACTION
+--------------------------------------------------------- */
+
+.badge-tag--square {
+    --badge-tag-radius: var(--radius-sm);
+}
+
+.badge-tag--sharp {
+    --badge-tag-radius: var(--radius-none);
+}
+
+.badge-tag--circle,
+.badge-tag--count {
+    padding: 0;
+    min-width: var(--badge-tag-circle-size);
+    height: var(--badge-tag-circle-size);
+    border-radius: 999px;
+    font-feature-settings: "tnum";
+    font-variant-numeric: tabular-nums;
+}
+
+.badge-tag--circle {
+    width: var(--badge-tag-circle-size);
+}
+
+.badge-tag--tag {
+    cursor: pointer;
+    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.badge-tag--tag:hover {
+    background: var(--color-surface-hover);
+}
+
+.badge-tag--tag:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--color-surface),
+    0 0 0 3px var(--focus-ring-color);
+}
+
+/* ---------------------------------------------------------
+   5. STYLE MODES
+--------------------------------------------------------- */
+
+.badge-tag--outline {
+    background: transparent;
+    border-color: currentColor;
+}
+
+.badge-tag--solid {
+    background: var(--badge-tag-solid-bg);
+    border-color: var(--badge-tag-solid-border);
+    color: var(--badge-tag-solid-text);
+}
+
+/* ---------------------------------------------------------
+   6. SEMANTIC VARIANTS
+--------------------------------------------------------- */
+
+.badge-tag--accent {
+    --badge-tag-bg: var(--color-accent-soft);
+    --badge-tag-border: var(--color-accent);
+    --badge-tag-text: var(--color-text);
+    --badge-tag-solid-bg: var(--color-accent);
+    --badge-tag-solid-border: var(--color-accent-strong);
+    --badge-tag-solid-text: var(--color-on-accent);
+}
+
+.badge-tag--success {
+    --badge-tag-bg: var(--success-soft-surface, var(--color-success-soft));
+    --badge-tag-border: var(--success-soft-border, var(--color-success));
+    --badge-tag-text: var(--success-soft-on, var(--color-success-strong));
+    --badge-tag-solid-bg: var(--color-success);
+    --badge-tag-solid-border: var(--color-success-strong);
+    --badge-tag-solid-text: var(--color-on-success);
+}
+
+.badge-tag--info {
+    --badge-tag-bg: var(--info-soft-surface, var(--color-info-soft));
+    --badge-tag-border: var(--info-soft-border, var(--color-info));
+    --badge-tag-text: var(--info-soft-on, var(--color-info-strong));
+    --badge-tag-solid-bg: var(--color-info);
+    --badge-tag-solid-border: var(--color-info-strong);
+    --badge-tag-solid-text: var(--color-on-info);
+}
+
+.badge-tag--warning {
+    --badge-tag-bg: var(--warning-soft-surface, var(--color-warning-soft));
+    --badge-tag-border: var(--warning-soft-border, var(--color-warning));
+    --badge-tag-text: var(--warning-soft-on, var(--color-warning-strong));
+    --badge-tag-solid-bg: var(--color-warning);
+    --badge-tag-solid-border: var(--color-warning-strong);
+    --badge-tag-solid-text: var(--color-on-warning);
+}
+
+.badge-tag--danger {
+    --badge-tag-bg: var(--danger-soft-surface, var(--color-danger-soft));
+    --badge-tag-border: var(--danger-soft-border, var(--color-danger));
+    --badge-tag-text: var(--danger-soft-on, var(--color-danger-strong));
+    --badge-tag-solid-bg: var(--color-danger);
+    --badge-tag-solid-border: var(--color-danger-strong);
+    --badge-tag-solid-text: var(--color-on-danger);
+}
+
+.badge-tag--neutral {
+    --badge-tag-bg: var(--color-surface-subtle);
+    --badge-tag-border: var(--color-border-subtle);
+    --badge-tag-text: var(--color-text-muted);
+    --badge-tag-solid-bg: var(--color-mono);
+    --badge-tag-solid-border: var(--color-mono-strong);
+    --badge-tag-solid-text: var(--color-on-mono);
+}
+
+.badge-tag--mono {
+    --badge-tag-bg: var(--color-mono-soft);
+    --badge-tag-border: var(--color-mono);
+    --badge-tag-text: var(--color-on-mono);
+    --badge-tag-solid-bg: var(--color-mono);
+    --badge-tag-solid-border: var(--color-mono-strong);
+    --badge-tag-solid-text: var(--color-on-mono);
+}

package/dist/components/badge-tag.min.css

@@ -0,0 +1 @@
+.vds-badge-tag,[data-vds-badge-tag]{--badge-tag-radius:var(--radius-pill);--badge-tag-font-size:var(--text-xs);--badge-tag-font-weight:600;--badge-tag-padding-y:var(--space-1);--badge-tag-padding-x:var(--space-2_5);--badge-tag-gap:var(--space-1_5);--badge-tag-dot-size:0.4rem;--badge-tag-icon-size:0.85rem;--badge-tag-border-width:var(--border-width);--badge-tag-circle-size:var(--space-6);--badge-tag-bg:var(--color-surface-subtle);--badge-tag-border:var(--color-border-subtle);--badge-tag-text:var(--color-text);--badge-tag-solid-bg:var(--color-accent);--badge-tag-solid-border:var(--color-accent-strong);--badge-tag-solid-text:var(--color-on-accent)}.badge-tag{align-items:center;background:var(--badge-tag-bg);border:var(--badge-tag-border-width) solid var(--badge-tag-border);border-radius:var(--badge-tag-radius);color:var(--badge-tag-text);display:inline-flex;font-size:var(--badge-tag-font-size);font-weight:var(--badge-tag-font-weight);gap:var(--badge-tag-gap);justify-content:center;line-height:1;padding:var(--badge-tag-padding-y) var(--badge-tag-padding-x);-webkit-text-decoration:none;text-decoration:none;white-space:nowrap}.badge__dot{background:currentColor;border-radius:999px;height:var(--badge-tag-dot-size);width:var(--badge-tag-dot-size)}.badge__icon{height:var(--badge-tag-icon-size);justify-content:center;width:var(--badge-tag-icon-size)}.badge__icon,.badge__remove{align-items:center;display:inline-flex}.badge__remove{background:transparent;border:0;color:inherit;cursor:pointer;line-height:1;margin-left:var(--space-1);padding:0}.badge-tag--xs{--badge-tag-padding-y:var(--space-0_5);--badge-tag-padding-x:var(--space-2);--badge-tag-font-size:var(--text-xxs);--badge-tag-circle-size:var(--space-4)}.badge-tag--sm{--badge-tag-padding-y:var(--space-1);--badge-tag-padding-x:var(--space-2_5);--badge-tag-circle-size:var(--space-5)}.badge-tag--lg{--badge-tag-padding-y:var(--space-1_5);--badge-tag-padding-x:var(--space-3_5);--badge-tag-font-size:var(--text-sm);--badge-tag-circle-size:var(--space-7)}.badge-tag--square{--badge-tag-radius:var(--radius-sm)}.badge-tag--sharp{--badge-tag-radius:var(--radius-none)}.badge-tag--circle,.badge-tag--count{font-feature-settings:"tnum";border-radius:999px;font-variant-numeric:tabular-nums;height:var(--badge-tag-circle-size);min-width:var(--badge-tag-circle-size);padding:0}.badge-tag--circle{width:var(--badge-tag-circle-size)}.badge-tag--tag{cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.badge-tag--tag:hover{background:var(--color-surface-hover)}.badge-tag--tag:focus-visible{box-shadow:0 0 0 1px var(--color-surface),0 0 0 3px var(--focus-ring-color);outline:none}.badge-tag--outline{background:transparent;border-color:currentColor}.badge-tag--solid{background:var(--badge-tag-solid-bg);border-color:var(--badge-tag-solid-border);color:var(--badge-tag-solid-text)}.badge-tag--accent{--badge-tag-bg:var(--color-accent-soft);--badge-tag-border:var(--color-accent);--badge-tag-text:var(--color-text);--badge-tag-solid-bg:var(--color-accent);--badge-tag-solid-border:var(--color-accent-strong);--badge-tag-solid-text:var(--color-on-accent)}.badge-tag--success{--badge-tag-bg:var(--success-soft-surface,var(--color-success-soft));--badge-tag-border:var(--success-soft-border,var(--color-success));--badge-tag-text:var(--success-soft-on,var(--color-success-strong));--badge-tag-solid-bg:var(--color-success);--badge-tag-solid-border:var(--color-success-strong);--badge-tag-solid-text:var(--color-on-success)}.badge-tag--info{--badge-tag-bg:var(--info-soft-surface,var(--color-info-soft));--badge-tag-border:var(--info-soft-border,var(--color-info));--badge-tag-text:var(--info-soft-on,var(--color-info-strong));--badge-tag-solid-bg:var(--color-info);--badge-tag-solid-border:var(--color-info-strong);--badge-tag-solid-text:var(--color-on-info)}.badge-tag--warning{--badge-tag-bg:var(--warning-soft-surface,var(--color-warning-soft));--badge-tag-border:var(--warning-soft-border,var(--color-warning));--badge-tag-text:var(--warning-soft-on,var(--color-warning-strong));--badge-tag-solid-bg:var(--color-warning);--badge-tag-solid-border:var(--color-warning-strong);--badge-tag-solid-text:var(--color-on-warning)}.badge-tag--danger{--badge-tag-bg:var(--danger-soft-surface,var(--color-danger-soft));--badge-tag-border:var(--danger-soft-border,var(--color-danger));--badge-tag-text:var(--danger-soft-on,var(--color-danger-strong));--badge-tag-solid-bg:var(--color-danger);--badge-tag-solid-border:var(--color-danger-strong);--badge-tag-solid-text:var(--color-on-danger)}.badge-tag--neutral{--badge-tag-bg:var(--color-surface-subtle);--badge-tag-border:var(--color-border-subtle);--badge-tag-text:var(--color-text-muted);--badge-tag-solid-bg:var(--color-mono);--badge-tag-solid-border:var(--color-mono-strong);--badge-tag-solid-text:var(--color-on-mono)}.badge-tag--mono{--badge-tag-bg:var(--color-mono-soft);--badge-tag-border:var(--color-mono);--badge-tag-text:var(--color-on-mono);--badge-tag-solid-bg:var(--color-mono);--badge-tag-solid-border:var(--color-mono-strong);--badge-tag-solid-text:var(--color-on-mono)}