🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
@heroui/styles
Advanced tools
@heroui/styles - npm Package Compare versions
| .typography { | ||
| @apply text-foreground; | ||
| } | ||
| .typography-prose { | ||
| @apply text-foreground; | ||
| } | ||
| .typography-prose h1 { | ||
| @apply text-4xl font-semibold tracking-tight; | ||
| } | ||
| .typography-prose h2 { | ||
| @apply text-3xl font-semibold tracking-tight; | ||
| } | ||
| .typography-prose h3 { | ||
| @apply text-2xl font-semibold tracking-tight; | ||
| } | ||
| .typography-prose h4 { | ||
| @apply text-xl font-semibold tracking-tight; | ||
| } | ||
| .typography-prose h5 { | ||
| @apply text-lg font-semibold tracking-tight; | ||
| } | ||
| .typography-prose h6 { | ||
| @apply text-base font-semibold tracking-tight; | ||
| } | ||
| .typography-prose p { | ||
| @apply text-base leading-7; | ||
| } | ||
| .typography-prose code { | ||
| @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground; | ||
| } | ||
| .typography-prose a { | ||
| @apply font-medium text-link underline underline-offset-4; | ||
| } | ||
| .typography-prose blockquote { | ||
| @apply mt-4 border-l-4 border-border pl-4 text-muted italic; | ||
| } | ||
| .typography-prose ul { | ||
| @apply my-4 list-disc space-y-2 pl-6; | ||
| } | ||
| .typography-prose ol { | ||
| @apply my-4 list-decimal space-y-2 pl-6; | ||
| } | ||
| .typography-prose li { | ||
| @apply text-base leading-7; | ||
| } | ||
| .typography-prose hr { | ||
| @apply my-8 border-separator; | ||
| } | ||
| .typography-prose pre { | ||
| @apply my-4 overflow-x-auto rounded-xl bg-default p-4 font-mono text-sm leading-relaxed; | ||
| } | ||
| .typography-prose strong { | ||
| @apply font-semibold text-foreground; | ||
| } | ||
| .typography-prose em { | ||
| @apply italic; | ||
| } | ||
| .typography-prose img { | ||
| @apply my-4 rounded-xl; | ||
| } | ||
| .typography--h1 { | ||
| @apply text-4xl font-semibold tracking-tight; | ||
| } | ||
| .typography--h2 { | ||
| @apply text-3xl font-semibold tracking-tight; | ||
| } | ||
| .typography--h3 { | ||
| @apply text-2xl font-semibold tracking-tight; | ||
| } | ||
| .typography--h4 { | ||
| @apply text-xl font-semibold tracking-tight; | ||
| } | ||
| .typography--h5 { | ||
| @apply text-lg font-semibold tracking-tight; | ||
| } | ||
| .typography--h6 { | ||
| @apply text-base font-semibold tracking-tight; | ||
| } | ||
| .typography--body { | ||
| @apply text-base leading-7; | ||
| } | ||
| .typography--body-sm { | ||
| @apply text-sm leading-6; | ||
| } | ||
| .typography--body-xs { | ||
| @apply text-xs leading-5; | ||
| } | ||
| .typography--code { | ||
| @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground; | ||
| } | ||
| .typography--align-start { | ||
| @apply text-left rtl:text-right; | ||
| } | ||
| .typography--align-center { | ||
| @apply text-center; | ||
| } | ||
| .typography--align-end { | ||
| @apply text-right rtl:text-left; | ||
| } | ||
| .typography--align-justify { | ||
| @apply text-justify; | ||
| } | ||
| .typography--color-default { | ||
| @apply text-foreground; | ||
| } | ||
| .typography--color-muted { | ||
| @apply text-muted; | ||
| } | ||
| .typography--truncate { | ||
| @apply block truncate; | ||
| } | ||
| .typography--weight-normal { | ||
| @apply font-normal; | ||
| } | ||
| .typography--weight-medium { | ||
| @apply font-medium; | ||
| } | ||
| .typography--weight-semibold { | ||
| @apply font-semibold; | ||
| } | ||
| .typography--weight-bold { | ||
| @apply font-bold; | ||
| } |
| export * from "./typography.styles"; | ||
| //# sourceMappingURL=index.d.ts.map |
| {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/typography/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"} |
| export { typographyVariants } from './typography.styles.js'; |
| import type { VariantProps } from "tailwind-variants"; | ||
| export declare const typographyVariants: import("tailwind-variants").TVReturnType<{ | ||
| align: { | ||
| center: string; | ||
| end: string; | ||
| justify: string; | ||
| start: string; | ||
| }; | ||
| color: { | ||
| default: string; | ||
| muted: string; | ||
| }; | ||
| truncate: { | ||
| true: string; | ||
| }; | ||
| type: { | ||
| body: string; | ||
| "body-sm": string; | ||
| "body-xs": string; | ||
| code: string; | ||
| h1: string; | ||
| h2: string; | ||
| h3: string; | ||
| h4: string; | ||
| h5: string; | ||
| h6: string; | ||
| }; | ||
| weight: { | ||
| bold: string; | ||
| medium: string; | ||
| normal: string; | ||
| semibold: string; | ||
| }; | ||
| }, { | ||
| base: string; | ||
| prose: string; | ||
| }, undefined, { | ||
| align: { | ||
| center: string; | ||
| end: string; | ||
| justify: string; | ||
| start: string; | ||
| }; | ||
| color: { | ||
| default: string; | ||
| muted: string; | ||
| }; | ||
| truncate: { | ||
| true: string; | ||
| }; | ||
| type: { | ||
| body: string; | ||
| "body-sm": string; | ||
| "body-xs": string; | ||
| code: string; | ||
| h1: string; | ||
| h2: string; | ||
| h3: string; | ||
| h4: string; | ||
| h5: string; | ||
| h6: string; | ||
| }; | ||
| weight: { | ||
| bold: string; | ||
| medium: string; | ||
| normal: string; | ||
| semibold: string; | ||
| }; | ||
| }, { | ||
| base: string; | ||
| prose: string; | ||
| }, import("tailwind-variants").TVReturnType<{ | ||
| align: { | ||
| center: string; | ||
| end: string; | ||
| justify: string; | ||
| start: string; | ||
| }; | ||
| color: { | ||
| default: string; | ||
| muted: string; | ||
| }; | ||
| truncate: { | ||
| true: string; | ||
| }; | ||
| type: { | ||
| body: string; | ||
| "body-sm": string; | ||
| "body-xs": string; | ||
| code: string; | ||
| h1: string; | ||
| h2: string; | ||
| h3: string; | ||
| h4: string; | ||
| h5: string; | ||
| h6: string; | ||
| }; | ||
| weight: { | ||
| bold: string; | ||
| medium: string; | ||
| normal: string; | ||
| semibold: string; | ||
| }; | ||
| }, { | ||
| base: string; | ||
| prose: string; | ||
| }, undefined, unknown, unknown, undefined>>; | ||
| export type TypographyVariants = VariantProps<typeof typographyVariants>; | ||
| //# sourceMappingURL=typography.styles.d.ts.map |
| {"version":3,"file":"typography.styles.d.ts","sourceRoot":"","sources":["../../../src/components/typography/typography.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2C7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"} |
| import { tv } from 'tailwind-variants'; | ||
| const typographyVariants = tv({ | ||
| defaultVariants: { | ||
| align: "start", | ||
| color: "default", | ||
| type: "body", | ||
| }, | ||
| slots: { | ||
| base: "typography", | ||
| prose: "typography-prose", | ||
| }, | ||
| variants: { | ||
| align: { | ||
| center: "typography--align-center", | ||
| end: "typography--align-end", | ||
| justify: "typography--align-justify", | ||
| start: "typography--align-start", | ||
| }, | ||
| color: { | ||
| default: "typography--color-default", | ||
| muted: "typography--color-muted", | ||
| }, | ||
| truncate: { | ||
| true: "typography--truncate", | ||
| }, | ||
| type: { | ||
| body: "typography--body", | ||
| "body-sm": "typography--body-sm", | ||
| "body-xs": "typography--body-xs", | ||
| code: "typography--code", | ||
| h1: "typography--h1", | ||
| h2: "typography--h2", | ||
| h3: "typography--h3", | ||
| h4: "typography--h4", | ||
| h5: "typography--h5", | ||
| h6: "typography--h6", | ||
| }, | ||
| weight: { | ||
| bold: "typography--weight-bold", | ||
| medium: "typography--weight-medium", | ||
| normal: "typography--weight-normal", | ||
| semibold: "typography--weight-semibold", | ||
| }, | ||
| }, | ||
| }); | ||
| export { typographyVariants }; |
| export * from "./typography.styles"; |
| import type {VariantProps} from "tailwind-variants"; | ||
| import {tv} from "tailwind-variants"; | ||
| export const typographyVariants = tv({ | ||
| defaultVariants: { | ||
| align: "start", | ||
| color: "default", | ||
| type: "body", | ||
| }, | ||
| slots: { | ||
| base: "typography", | ||
| prose: "typography-prose", | ||
| }, | ||
| variants: { | ||
| align: { | ||
| center: "typography--align-center", | ||
| end: "typography--align-end", | ||
| justify: "typography--align-justify", | ||
| start: "typography--align-start", | ||
| }, | ||
| color: { | ||
| default: "typography--color-default", | ||
| muted: "typography--color-muted", | ||
| }, | ||
| truncate: { | ||
| true: "typography--truncate", | ||
| }, | ||
| type: { | ||
| body: "typography--body", | ||
| "body-sm": "typography--body-sm", | ||
| "body-xs": "typography--body-xs", | ||
| code: "typography--code", | ||
| h1: "typography--h1", | ||
| h2: "typography--h2", | ||
| h3: "typography--h3", | ||
| h4: "typography--h4", | ||
| h5: "typography--h5", | ||
| h6: "typography--h6", | ||
| }, | ||
| weight: { | ||
| bold: "typography--weight-bold", | ||
| medium: "typography--weight-medium", | ||
| normal: "typography--weight-normal", | ||
| semibold: "typography--weight-semibold", | ||
| }, | ||
| }, | ||
| }); | ||
| export type TypographyVariants = VariantProps<typeof typographyVariants>; |
@@ -75,3 +75,3 @@ /* Base accordion styles */ | ||
| &[data-hovered="true"]:not([aria-expanded="true"]) { | ||
| background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent 90%); | ||
| background-color: color-mix(in oklab, var(--foreground) 3%, transparent 90%); | ||
| } | ||
@@ -78,0 +78,0 @@ } |
@@ -23,3 +23,3 @@ /* Autocomplete styles */ | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -36,3 +36,3 @@ /* Add padding-right when indicator is present */ | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -45,4 +45,4 @@ } | ||
| @apply status-focused; | ||
| border-color: var(--color-field-border-focus); | ||
| background-color: var(--color-field-focus); | ||
| border-color: var(--field-border-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -59,3 +59,3 @@ | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -80,5 +80,5 @@ | ||
| --autocomplete-trigger-bg: var(--color-default); | ||
| --autocomplete-trigger-bg-hover: var(--color-default-hover); | ||
| --autocomplete-trigger-bg-focus: var(--color-default); | ||
| --autocomplete-trigger-bg: var(--default); | ||
| --autocomplete-trigger-bg-hover: var(--default-hover); | ||
| --autocomplete-trigger-bg-focus: var(--default); | ||
@@ -85,0 +85,0 @@ /* Exclude when clear button is hovered to prevent double hover effect */ |
@@ -13,5 +13,5 @@ /* ========================================================================== | ||
| /* Default tokens */ | ||
| --badge-bg: var(--color-default); | ||
| --badge-fg: var(--color-default-foreground); | ||
| --badge-border: var(--color-background); | ||
| --badge-bg: var(--default); | ||
| --badge-fg: var(--default-foreground); | ||
| --badge-border: var(--background); | ||
@@ -52,19 +52,19 @@ background-color: var(--badge-bg); | ||
| .badge--accent { | ||
| --badge-fg: var(--color-accent-soft-foreground); | ||
| --badge-fg: var(--accent-soft-foreground); | ||
| } | ||
| .badge--default { | ||
| --badge-fg: var(--color-default-foreground); | ||
| --badge-fg: var(--default-foreground); | ||
| } | ||
| .badge--success { | ||
| --badge-fg: var(--color-success); | ||
| --badge-fg: var(--success); | ||
| } | ||
| .badge--warning { | ||
| --badge-fg: var(--color-warning); | ||
| --badge-fg: var(--warning); | ||
| } | ||
| .badge--danger { | ||
| --badge-fg: var(--color-danger); | ||
| --badge-fg: var(--danger); | ||
| } | ||
@@ -117,24 +117,24 @@ | ||
| .badge--primary.badge--accent { | ||
| --badge-bg: var(--color-accent); | ||
| --badge-fg: var(--color-accent-foreground); | ||
| --badge-bg: var(--accent); | ||
| --badge-fg: var(--accent-foreground); | ||
| } | ||
| .badge--primary.badge--default { | ||
| --badge-bg: var(--color-default); | ||
| --badge-fg: var(--color-default-foreground); | ||
| --badge-bg: var(--default); | ||
| --badge-fg: var(--default-foreground); | ||
| } | ||
| .badge--primary.badge--success { | ||
| --badge-bg: var(--color-success); | ||
| --badge-fg: var(--color-success-foreground); | ||
| --badge-bg: var(--success); | ||
| --badge-fg: var(--success-foreground); | ||
| } | ||
| .badge--primary.badge--warning { | ||
| --badge-bg: var(--color-warning); | ||
| --badge-fg: var(--color-warning-foreground); | ||
| --badge-bg: var(--warning); | ||
| --badge-fg: var(--warning-foreground); | ||
| } | ||
| .badge--primary.badge--danger { | ||
| --badge-bg: var(--color-danger); | ||
| --badge-fg: var(--color-danger-foreground); | ||
| --badge-bg: var(--danger); | ||
| --badge-fg: var(--danger-foreground); | ||
| } | ||
@@ -147,24 +147,24 @@ | ||
| .badge--soft.badge--accent { | ||
| --badge-bg: var(--color-accent-soft); | ||
| --badge-fg: var(--color-accent-soft-foreground); | ||
| --badge-bg: var(--accent-soft); | ||
| --badge-fg: var(--accent-soft-foreground); | ||
| } | ||
| .badge--soft.badge--default { | ||
| --badge-bg: var(--color-default); | ||
| --badge-fg: var(--color-default-foreground); | ||
| --badge-bg: var(--default); | ||
| --badge-fg: var(--default-foreground); | ||
| } | ||
| .badge--soft.badge--success { | ||
| --badge-bg: var(--color-success-soft); | ||
| --badge-fg: var(--color-success-soft-foreground); | ||
| --badge-bg: var(--success-soft); | ||
| --badge-fg: var(--success-soft-foreground); | ||
| } | ||
| .badge--soft.badge--warning { | ||
| --badge-bg: var(--color-warning-soft); | ||
| --badge-fg: var(--color-warning-soft-foreground); | ||
| --badge-bg: var(--warning-soft); | ||
| --badge-fg: var(--warning-soft-foreground); | ||
| } | ||
| .badge--soft.badge--danger { | ||
| --badge-bg: var(--color-danger-soft); | ||
| --badge-fg: var(--color-danger-soft-foreground); | ||
| --badge-bg: var(--danger-soft); | ||
| --badge-fg: var(--danger-soft-foreground); | ||
| } |
@@ -96,19 +96,19 @@ /* Button component styles */ | ||
| .button--primary { | ||
| --button-bg: var(--color-accent); | ||
| --button-bg-hover: var(--color-accent-hover); | ||
| --button-bg-pressed: var(--color-accent-hover); | ||
| --button-fg: var(--color-accent-foreground); | ||
| --button-bg: var(--accent); | ||
| --button-bg-hover: var(--accent-hover); | ||
| --button-bg-pressed: var(--accent-hover); | ||
| --button-fg: var(--accent-foreground); | ||
| } | ||
| .button--secondary { | ||
| --button-bg: var(--color-default); | ||
| --button-bg-hover: var(--color-default-hover); | ||
| --button-bg-pressed: var(--color-default-hover); | ||
| --button-fg: var(--color-accent-soft-foreground); | ||
| --button-bg: var(--default); | ||
| --button-bg-hover: var(--default-hover); | ||
| --button-bg-pressed: var(--default-hover); | ||
| --button-fg: var(--accent-soft-foreground); | ||
| } | ||
| .button--tertiary { | ||
| --button-bg: var(--color-default); | ||
| --button-bg-hover: var(--color-default-hover); | ||
| --button-bg-pressed: var(--color-default-hover); | ||
| --button-bg: var(--default); | ||
| --button-bg-hover: var(--default-hover); | ||
| --button-bg-pressed: var(--default-hover); | ||
| } | ||
@@ -119,5 +119,5 @@ | ||
| --button-bg: transparent; | ||
| --button-bg-hover: var(--color-default); | ||
| --button-bg-pressed: var(--color-default); | ||
| --button-fg: var(--color-default-foreground); | ||
| --button-bg-hover: var(--default); | ||
| --button-bg-pressed: var(--default); | ||
| --button-fg: var(--default-foreground); | ||
| } | ||
@@ -127,17 +127,17 @@ | ||
| @apply border border-border; | ||
| --button-bg-hover: color-mix(in srgb, var(--color-default) 60%, transparent); | ||
| --button-bg-hover: color-mix(in srgb, var(--default) 60%, transparent); | ||
| } | ||
| .button--danger { | ||
| --button-bg: var(--color-danger); | ||
| --button-bg-hover: var(--color-danger-hover); | ||
| --button-bg-pressed: var(--color-danger-hover); | ||
| --button-fg: var(--color-danger-foreground); | ||
| --button-bg: var(--danger); | ||
| --button-bg-hover: var(--danger-hover); | ||
| --button-bg-pressed: var(--danger-hover); | ||
| --button-fg: var(--danger-foreground); | ||
| } | ||
| .button--danger-soft { | ||
| --button-bg: var(--color-danger-soft); | ||
| --button-bg-hover: var(--color-danger-soft-hover); | ||
| --button-bg-pressed: var(--color-danger-soft-hover); | ||
| --button-fg: var(--color-danger-soft-foreground); | ||
| --button-bg: var(--danger-soft); | ||
| --button-bg-hover: var(--danger-soft-hover); | ||
| --button-bg-pressed: var(--danger-soft-hover); | ||
| --button-fg: var(--danger-soft-foreground); | ||
| } | ||
@@ -144,0 +144,0 @@ |
@@ -78,3 +78,3 @@ /* ============================================================================= | ||
| .calendar-year-picker__trigger-indicator { | ||
| @apply text-xs text-accent; | ||
| @apply text-xs text-accent-soft-foreground; | ||
@@ -91,3 +91,3 @@ transition: transform 150ms var(--ease-out); | ||
| .calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading { | ||
| @apply text-accent; | ||
| @apply text-accent-soft-foreground; | ||
| } | ||
@@ -94,0 +94,0 @@ |
@@ -35,3 +35,3 @@ /* ============================================================================= | ||
| .calendar__nav-button { | ||
| @apply flex size-6 items-center justify-center rounded-2xl text-accent; | ||
| @apply flex size-6 items-center justify-center rounded-2xl text-accent-soft-foreground; | ||
@@ -57,3 +57,3 @@ will-change: scale; | ||
| &[data-hovered="true"] { | ||
| @apply bg-default text-accent; | ||
| @apply bg-default text-accent-soft-foreground; | ||
| } | ||
@@ -162,3 +162,3 @@ } | ||
| &[data-today="true"] { | ||
| @apply text-accent; | ||
| @apply text-accent-soft-foreground; | ||
| } | ||
@@ -165,0 +165,0 @@ |
@@ -86,3 +86,3 @@ /* ========================================================================== | ||
| .checkbox__control { | ||
| @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-md bg-field shadow-field outline-none no-highlight; | ||
| @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-md border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight; | ||
@@ -95,2 +95,3 @@ /** | ||
| background-color 200ms var(--ease-out), | ||
| border-color 200ms var(--ease-out), | ||
| transform 100ms var(--ease-out); | ||
@@ -237,3 +238,3 @@ @apply motion-reduce:transition-none; | ||
| --checkbox-control-bg: var(--color-default); | ||
| --checkbox-control-bg: var(--default); | ||
@@ -240,0 +241,0 @@ /* Hover state */ |
+22
-22
@@ -6,3 +6,3 @@ /* Base styles */ | ||
| /* Default tokens */ | ||
| --chip-bg: var(--color-default); | ||
| --chip-bg: var(--default); | ||
| --chip-fg: currentColor; | ||
@@ -20,19 +20,19 @@ | ||
| .chip--accent { | ||
| --chip-fg: var(--color-accent-soft-foreground); | ||
| --chip-fg: var(--accent-soft-foreground); | ||
| } | ||
| .chip--danger { | ||
| --chip-fg: var(--color-danger); | ||
| --chip-fg: var(--danger); | ||
| } | ||
| .chip--default { | ||
| --chip-fg: var(--color-default-foreground); | ||
| --chip-fg: var(--default-foreground); | ||
| } | ||
| .chip--success { | ||
| --chip-fg: var(--color-success); | ||
| --chip-fg: var(--success); | ||
| } | ||
| .chip--warning { | ||
| --chip-fg: var(--color-warning); | ||
| --chip-fg: var(--warning); | ||
| } | ||
@@ -71,19 +71,19 @@ | ||
| .chip--primary.chip--accent { | ||
| --chip-bg: var(--color-accent); | ||
| --chip-fg: var(--color-accent-foreground); | ||
| --chip-bg: var(--accent); | ||
| --chip-fg: var(--accent-foreground); | ||
| } | ||
| .chip--primary.chip--success { | ||
| --chip-bg: var(--color-success); | ||
| --chip-fg: var(--color-success-foreground); | ||
| --chip-bg: var(--success); | ||
| --chip-fg: var(--success-foreground); | ||
| } | ||
| .chip--primary.chip--warning { | ||
| --chip-bg: var(--color-warning); | ||
| --chip-fg: var(--color-warning-foreground); | ||
| --chip-bg: var(--warning); | ||
| --chip-fg: var(--warning-foreground); | ||
| } | ||
| .chip--primary.chip--danger { | ||
| --chip-bg: var(--color-danger); | ||
| --chip-fg: var(--color-danger-foreground); | ||
| --chip-bg: var(--danger); | ||
| --chip-fg: var(--danger-foreground); | ||
| } | ||
@@ -93,19 +93,19 @@ | ||
| .chip--accent.chip--soft { | ||
| --chip-bg: var(--color-accent-soft); | ||
| --chip-fg: var(--color-accent-soft-foreground); | ||
| --chip-bg: var(--accent-soft); | ||
| --chip-fg: var(--accent-soft-foreground); | ||
| } | ||
| .chip--success.chip--soft { | ||
| --chip-bg: var(--color-success-soft); | ||
| --chip-fg: var(--color-success-soft-foreground); | ||
| --chip-bg: var(--success-soft); | ||
| --chip-fg: var(--success-soft-foreground); | ||
| } | ||
| .chip--warning.chip--soft { | ||
| --chip-bg: var(--color-warning-soft); | ||
| --chip-fg: var(--color-warning-soft-foreground); | ||
| --chip-bg: var(--warning-soft); | ||
| --chip-fg: var(--warning-soft-foreground); | ||
| } | ||
| .chip--danger.chip--soft { | ||
| --chip-bg: var(--color-danger-soft); | ||
| --chip-fg: var(--color-danger-soft-foreground); | ||
| --chip-bg: var(--danger-soft); | ||
| --chip-fg: var(--danger-soft-foreground); | ||
| } |
@@ -9,3 +9,3 @@ /* ========================================================================== | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -27,3 +27,3 @@ /** | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -41,3 +41,3 @@ } | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| border-color: var(--color-field-border-invalid); | ||
@@ -104,5 +104,5 @@ } | ||
| --color-input-group-bg: var(--color-default); | ||
| --color-input-group-bg-hover: var(--color-default-hover); | ||
| --color-input-group-bg-focus: var(--color-default); | ||
| --color-input-group-bg: var(--default); | ||
| --color-input-group-bg-hover: var(--default-hover); | ||
| --color-input-group-bg-focus: var(--default); | ||
@@ -109,0 +109,0 @@ @media (hover: hover) { |
@@ -28,4 +28,4 @@ /* ComboBox styles */ | ||
| @apply status-focused-field; | ||
| border-color: var(--color-field-border-focus); | ||
| background-color: var(--color-field-focus); | ||
| border-color: var(--field-border-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -32,0 +32,0 @@ |
@@ -5,3 +5,3 @@ /* Date input group styles */ | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -23,3 +23,3 @@ /** | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -51,3 +51,3 @@ } | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| border-color: var(--color-field-border-invalid); | ||
@@ -159,5 +159,5 @@ } | ||
| --date-input-group-bg: var(--color-default); | ||
| --date-input-group-bg-hover: var(--color-default-hover); | ||
| --date-input-group-bg-focus: var(--color-default); | ||
| --date-input-group-bg: var(--default); | ||
| --date-input-group-bg-hover: var(--default-hover); | ||
| --date-input-group-bg-focus: var(--default); | ||
@@ -164,0 +164,0 @@ @media (hover: hover) { |
@@ -155,3 +155,3 @@ /* ------------------------------------------------------------------------------------------------ | ||
| @import "./kbd.css"; | ||
| @import "./text.css"; | ||
| @import "./typography.css"; | ||
@@ -158,0 +158,0 @@ /* ------------------------------------------------------------------------------------------------ |
@@ -75,3 +75,3 @@ export * from "./accordion"; | ||
| export * from "./tag-group"; | ||
| export * from "./text"; | ||
| export * from "./typography"; | ||
| export * from "./textfield"; | ||
@@ -78,0 +78,0 @@ export * from "./textarea"; |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"} | ||
| {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"} |
@@ -5,3 +5,3 @@ /* Input group styles */ | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -29,3 +29,3 @@ /* When textarea is present, align items to start and allow height to grow */ | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -38,4 +38,4 @@ } | ||
| @apply status-focused-field; | ||
| border-color: var(--color-field-border-focus); | ||
| background-color: var(--color-field-focus); | ||
| border-color: var(--field-border-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -46,3 +46,3 @@ | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| border-color: var(--color-field-border-invalid); | ||
@@ -87,5 +87,5 @@ } | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
| border-style: solid; | ||
| border-right-color: var(--color-field-border); | ||
| border-right-color: var(--field-border); | ||
| border-left: none; | ||
@@ -114,5 +114,5 @@ border-top: none; | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
| border-style: solid; | ||
| border-left-color: var(--color-field-border); | ||
| border-left-color: var(--field-border); | ||
| border-right: none; | ||
@@ -147,5 +147,5 @@ border-top: none; | ||
| --input-group-bg: var(--color-default); | ||
| --input-group-bg-hover: var(--color-default-hover); | ||
| --input-group-bg-focus: var(--color-default); | ||
| --input-group-bg: var(--default); | ||
| --input-group-bg-hover: var(--default-hover); | ||
| --input-group-bg-focus: var(--default); | ||
@@ -152,0 +152,0 @@ @media (hover: hover) { |
@@ -22,3 +22,3 @@ /* Base container */ | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -40,3 +40,3 @@ /** | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -63,3 +63,3 @@ } | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -100,5 +100,5 @@ } | ||
| --input-otp-slot-bg: var(--color-default); | ||
| --input-otp-slot-bg-hover: var(--color-default-hover); | ||
| --input-otp-slot-bg-focus: var(--color-default); | ||
| --input-otp-slot-bg: var(--default); | ||
| --input-otp-slot-bg-hover: var(--default-hover); | ||
| --input-otp-slot-bg-focus: var(--default); | ||
@@ -105,0 +105,0 @@ @media (hover: hover) { |
@@ -5,3 +5,3 @@ .input { | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -22,3 +22,3 @@ /** | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -31,4 +31,4 @@ } | ||
| @apply status-focused-field; | ||
| border-color: var(--color-field-border-focus); | ||
| background-color: var(--color-field-focus); | ||
| border-color: var(--field-border-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -44,3 +44,3 @@ | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -64,5 +64,5 @@ | ||
| --input-bg: var(--color-default); | ||
| --input-bg-hover: var(--color-default-hover); | ||
| --input-bg-focus: var(--color-default); | ||
| --input-bg: var(--default); | ||
| --input-bg-hover: var(--default-hover); | ||
| --input-bg-focus: var(--default); | ||
@@ -69,0 +69,0 @@ @media (hover: hover) { |
@@ -14,3 +14,3 @@ /* ========================================================================== | ||
| /* Default color tokens (accent) */ | ||
| --meter-fill: var(--color-accent); | ||
| --meter-fill: var(--accent); | ||
@@ -96,19 +96,19 @@ [data-slot="label"] { | ||
| .meter--default { | ||
| --meter-fill: var(--color-default-foreground); | ||
| --meter-fill: var(--default-foreground); | ||
| } | ||
| .meter--accent { | ||
| --meter-fill: var(--color-accent); | ||
| --meter-fill: var(--accent); | ||
| } | ||
| .meter--success { | ||
| --meter-fill: var(--color-success); | ||
| --meter-fill: var(--success); | ||
| } | ||
| .meter--warning { | ||
| --meter-fill: var(--color-warning); | ||
| --meter-fill: var(--warning); | ||
| } | ||
| .meter--danger { | ||
| --meter-fill: var(--color-danger); | ||
| --meter-fill: var(--danger); | ||
| } |
@@ -20,3 +20,3 @@ /* Number field styles */ | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
| grid-template-columns: 40px 1fr 40px; | ||
@@ -39,3 +39,3 @@ | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -48,4 +48,4 @@ } | ||
| @apply status-focused-field; | ||
| border-color: var(--color-field-border-focus); | ||
| background-color: var(--color-field-focus); | ||
| border-color: var(--field-border-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -56,3 +56,3 @@ | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| border-color: var(--color-field-border-invalid); | ||
@@ -92,3 +92,3 @@ } | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
| border-style: solid; | ||
@@ -156,5 +156,5 @@ | ||
| --number-field-group-bg: var(--color-default); | ||
| --number-field-group-bg-hover: var(--color-default-hover); | ||
| --number-field-group-bg-focus: var(--color-default); | ||
| --number-field-group-bg: var(--default); | ||
| --number-field-group-bg-hover: var(--default-hover); | ||
| --number-field-group-bg-focus: var(--default); | ||
@@ -161,0 +161,0 @@ @media (hover: hover) { |
@@ -43,5 +43,5 @@ /* ========================================================================== | ||
| --pagination-link-bg: transparent; | ||
| --pagination-link-bg-hover: var(--color-default-hover); | ||
| --pagination-link-bg-pressed: var(--color-default-hover); | ||
| --pagination-link-fg: var(--color-default-foreground); | ||
| --pagination-link-bg-hover: var(--default-hover); | ||
| --pagination-link-bg-pressed: var(--default-hover); | ||
| --pagination-link-fg: var(--default-foreground); | ||
@@ -80,5 +80,5 @@ background-color: var(--pagination-link-bg); | ||
| &[data-active="true"] { | ||
| --pagination-link-bg: var(--color-default); | ||
| --pagination-link-bg-hover: var(--color-default-hover); | ||
| --pagination-link-bg-pressed: var(--color-default-hover); | ||
| --pagination-link-bg: var(--default); | ||
| --pagination-link-bg-hover: var(--default-hover); | ||
| --pagination-link-bg-pressed: var(--default-hover); | ||
| } | ||
@@ -85,0 +85,0 @@ } |
@@ -14,3 +14,3 @@ /* ========================================================================== | ||
| /* Default color token (accent) */ | ||
| --progress-bar-fill: var(--color-accent); | ||
| --progress-bar-fill: var(--accent); | ||
@@ -120,19 +120,19 @@ [data-slot="label"] { | ||
| .progress-bar--default { | ||
| --progress-bar-fill: var(--color-default-foreground); | ||
| --progress-bar-fill: var(--default-foreground); | ||
| } | ||
| .progress-bar--accent { | ||
| --progress-bar-fill: var(--color-accent); | ||
| --progress-bar-fill: var(--accent); | ||
| } | ||
| .progress-bar--success { | ||
| --progress-bar-fill: var(--color-success); | ||
| --progress-bar-fill: var(--success); | ||
| } | ||
| .progress-bar--warning { | ||
| --progress-bar-fill: var(--color-warning); | ||
| --progress-bar-fill: var(--warning); | ||
| } | ||
| .progress-bar--danger { | ||
| --progress-bar-fill: var(--color-danger); | ||
| --progress-bar-fill: var(--danger); | ||
| } |
@@ -10,4 +10,4 @@ /* ========================================================================== | ||
| /* Default color token (accent) */ | ||
| --progress-circle-stroke: var(--color-accent); | ||
| --progress-circle-track-stroke: var(--color-default); | ||
| --progress-circle-stroke: var(--accent); | ||
| --progress-circle-track-stroke: var(--default); | ||
@@ -89,19 +89,19 @@ .progress-circle__track { | ||
| .progress-circle--default { | ||
| --progress-circle-stroke: var(--color-default-foreground); | ||
| --progress-circle-stroke: var(--default-foreground); | ||
| } | ||
| .progress-circle--accent { | ||
| --progress-circle-stroke: var(--color-accent); | ||
| --progress-circle-stroke: var(--accent); | ||
| } | ||
| .progress-circle--success { | ||
| --progress-circle-stroke: var(--color-success); | ||
| --progress-circle-stroke: var(--success); | ||
| } | ||
| .progress-circle--warning { | ||
| --progress-circle-stroke: var(--color-warning); | ||
| --progress-circle-stroke: var(--warning); | ||
| } | ||
| .progress-circle--danger { | ||
| --progress-circle-stroke: var(--color-danger); | ||
| --progress-circle-stroke: var(--danger); | ||
| } |
@@ -26,4 +26,4 @@ /* Radio Group base styles */ | ||
| --radio-control-bg: var(--color-default); | ||
| --radio-control-bg-hover: var(--color-default-hover); | ||
| --radio-control-bg: var(--default); | ||
| --radio-control-bg-hover: var(--default-hover); | ||
@@ -30,0 +30,0 @@ /* Hover state */ |
@@ -31,3 +31,3 @@ /* ========================================================================== | ||
| .radio__control { | ||
| @apply relative mt-[3px] inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] bg-field shadow-field outline-none no-highlight; | ||
| @apply relative mt-[3px] inline-flex size-4 shrink-0 items-center justify-center rounded-lg border [border-width:var(--border-width-field)] border-field-border bg-field shadow-field outline-none no-highlight; | ||
@@ -34,0 +34,0 @@ /** |
@@ -35,3 +35,3 @@ /* ============================================================================= | ||
| .range-calendar__nav-button { | ||
| @apply flex size-6 items-center justify-center rounded-xl text-accent; | ||
| @apply flex size-6 items-center justify-center rounded-xl text-accent-soft-foreground; | ||
@@ -57,3 +57,3 @@ will-change: scale; | ||
| &[data-hovered="true"] { | ||
| @apply bg-default text-accent; | ||
| @apply bg-default text-accent-soft-foreground; | ||
| } | ||
@@ -174,3 +174,3 @@ } | ||
| .range-calendar__cell-button { | ||
| @apply text-accent; | ||
| @apply text-accent-soft-foreground; | ||
| } | ||
@@ -177,0 +177,0 @@ } |
@@ -26,3 +26,3 @@ /* Search field styles */ | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -44,3 +44,3 @@ /** | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -58,3 +58,3 @@ } | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| border-color: var(--color-field-border-invalid); | ||
@@ -120,5 +120,5 @@ } | ||
| --search-field-group-bg: var(--color-default); | ||
| --search-field-group-bg-hover: var(--color-default-hover); | ||
| --search-field-group-bg-focus: var(--color-default); | ||
| --search-field-group-bg: var(--default); | ||
| --search-field-group-bg-hover: var(--default-hover); | ||
| --search-field-group-bg-focus: var(--default); | ||
@@ -125,0 +125,0 @@ @media (hover: hover) { |
@@ -34,3 +34,3 @@ /* Select styles */ | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -47,3 +47,3 @@ /* Add padding-right when indicator is present */ | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -56,4 +56,4 @@ } | ||
| @apply status-focused; | ||
| border-color: var(--color-field-border-focus); | ||
| background-color: var(--color-field-focus); | ||
| border-color: var(--field-border-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -70,3 +70,3 @@ | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -91,5 +91,5 @@ | ||
| --select-trigger-bg: var(--color-default); | ||
| --select-trigger-bg-hover: var(--color-default-hover); | ||
| --select-trigger-bg-focus: var(--color-default); | ||
| --select-trigger-bg: var(--default); | ||
| --select-trigger-bg-hover: var(--default-hover); | ||
| --select-trigger-bg-focus: var(--default); | ||
@@ -96,0 +96,0 @@ @media (hover: hover) { |
@@ -9,7 +9,7 @@ /* Switch base styles */ | ||
| /* Default tokens for switch control states */ | ||
| --switch-control-bg: var(--color-default); | ||
| --switch-control-bg: var(--default); | ||
| --switch-control-bg-hover: color-mix(in oklab, var(--switch-control-bg), transparent 20%); | ||
| --switch-control-bg-pressed: var(--switch-control-bg-hover); | ||
| --switch-control-bg-checked: var(--color-accent); | ||
| --switch-control-bg-checked-hover: var(--color-accent-hover); | ||
| --switch-control-bg-checked: var(--accent); | ||
| --switch-control-bg-checked-hover: var(--accent-hover); | ||
@@ -16,0 +16,0 @@ /* Disabled state */ |
@@ -169,3 +169,3 @@ /* ========================================================================== | ||
| @apply rounded-lg outline-none; | ||
| box-shadow: inset 0 0 0 2px var(--color-focus); | ||
| box-shadow: inset 0 0 0 2px var(--focus); | ||
| } | ||
@@ -264,3 +264,3 @@ } | ||
| @apply rounded-lg outline-none; | ||
| box-shadow: inset 0 0 0 2px var(--color-focus); | ||
| box-shadow: inset 0 0 0 2px var(--focus); | ||
| } | ||
@@ -284,3 +284,3 @@ } | ||
| :is(.table__cell, .table__column) { | ||
| @apply rounded-lg shadow-[inset_0_0_0_2px_var(--color-focus)] outline-none; | ||
| @apply rounded-lg shadow-[inset_0_0_0_2px_var(--focus)] outline-none; | ||
| } | ||
@@ -293,3 +293,3 @@ | ||
| :is(.table__cell, .table__column) { | ||
| @apply rounded-l-lg shadow-[inset_2px_0_0_0_var(--color-focus),inset_0_2px_0_0_var(--color-focus),inset_0_-2px_0_0_var(--color-focus)] outline-none; | ||
| @apply rounded-l-lg shadow-[inset_2px_0_0_0_var(--focus),inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none; | ||
| } | ||
@@ -302,3 +302,3 @@ | ||
| :is(.table__cell, .table__column) { | ||
| @apply rounded-r-lg shadow-[inset_-2px_0_0_0_var(--color-focus),inset_0_2px_0_0_var(--color-focus),inset_0_-2px_0_0_var(--color-focus)] outline-none; | ||
| @apply rounded-r-lg shadow-[inset_-2px_0_0_0_var(--focus),inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none; | ||
| } | ||
@@ -311,3 +311,3 @@ | ||
| :is(.table__cell, .table__column) { | ||
| @apply shadow-[inset_0_2px_0_0_var(--color-focus),inset_0_-2px_0_0_var(--color-focus)] outline-none; | ||
| @apply shadow-[inset_0_2px_0_0_var(--focus),inset_0_-2px_0_0_var(--focus)] outline-none; | ||
| } | ||
@@ -314,0 +314,0 @@ |
@@ -8,3 +8,3 @@ /* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */ | ||
| border-width: var(--border-width-field); | ||
| border-color: var(--color-field-border); | ||
| border-color: var(--field-border); | ||
@@ -25,3 +25,3 @@ /** | ||
| @apply bg-field-hover; | ||
| border-color: var(--color-field-border-hover); | ||
| border-color: var(--field-border-hover); | ||
| } | ||
@@ -34,4 +34,4 @@ } | ||
| @apply status-focused-field; | ||
| border-color: var(--color-field-border-focus); | ||
| background-color: var(--color-field-focus); | ||
| border-color: var(--field-border-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -46,3 +46,3 @@ | ||
| @apply status-invalid-field; | ||
| background-color: var(--color-field-focus); | ||
| background-color: var(--field-focus); | ||
| } | ||
@@ -66,5 +66,5 @@ | ||
| --textarea-bg: var(--color-default); | ||
| --textarea-bg-hover: var(--color-default-hover); | ||
| --textarea-bg-focus: var(--color-default); | ||
| --textarea-bg: var(--default); | ||
| --textarea-bg-hover: var(--default-hover); | ||
| --textarea-bg-focus: var(--default); | ||
@@ -71,0 +71,0 @@ @media (hover: hover) { |
@@ -23,12 +23,12 @@ /* ========================================================================== | ||
| /* Default tokens (unselected state) */ | ||
| --toggle-button-bg: var(--color-default); | ||
| --toggle-button-bg-hover: var(--color-default-hover); | ||
| --toggle-button-bg-pressed: var(--color-default-hover); | ||
| --toggle-button-bg: var(--default); | ||
| --toggle-button-bg-hover: var(--default-hover); | ||
| --toggle-button-bg-pressed: var(--default-hover); | ||
| --toggle-button-fg: currentColor; | ||
| /* Selected state tokens */ | ||
| --toggle-button-bg-selected: var(--color-accent-soft); | ||
| --toggle-button-bg-selected-hover: var(--color-accent-soft-hover); | ||
| --toggle-button-bg-selected-pressed: var(--color-accent-soft-hover); | ||
| --toggle-button-fg-selected: var(--color-accent-soft-foreground); | ||
| --toggle-button-bg-selected: var(--accent-soft); | ||
| --toggle-button-bg-selected-hover: var(--accent-soft-hover); | ||
| --toggle-button-bg-selected-pressed: var(--accent-soft-hover); | ||
| --toggle-button-fg-selected: var(--accent-soft-foreground); | ||
@@ -124,5 +124,5 @@ background-color: var(--toggle-button-bg); | ||
| .toggle-button--default { | ||
| --toggle-button-bg: var(--color-default); | ||
| --toggle-button-bg-hover: var(--color-default-hover); | ||
| --toggle-button-bg-pressed: var(--color-default-hover); | ||
| --toggle-button-bg: var(--default); | ||
| --toggle-button-bg-hover: var(--default-hover); | ||
| --toggle-button-bg-pressed: var(--default-hover); | ||
| } | ||
@@ -132,5 +132,5 @@ | ||
| --toggle-button-bg: transparent; | ||
| --toggle-button-bg-hover: var(--color-default); | ||
| --toggle-button-bg-pressed: var(--color-default); | ||
| --toggle-button-fg: var(--color-default-foreground); | ||
| --toggle-button-bg-hover: var(--default); | ||
| --toggle-button-bg-pressed: var(--default); | ||
| --toggle-button-fg: var(--default-foreground); | ||
| } | ||
@@ -137,0 +137,0 @@ |
+1
-1
@@ -77,3 +77,3 @@ export { cn, tv } from 'tailwind-variants'; | ||
| export { tagGroupVariants } from './components/tag-group/tag-group.styles.js'; | ||
| export { textVariants } from './components/text/text.styles.js'; | ||
| export { typographyVariants } from './components/typography/typography.styles.js'; | ||
| export { textFieldVariants } from './components/textfield/textfield.styles.js'; | ||
@@ -80,0 +80,0 @@ export { textAreaVariants } from './components/textarea/textarea.styles.js'; |
@@ -96,2 +96,54 @@ @layer base { | ||
| /* Calculated Colors */ | ||
| --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); | ||
| --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); | ||
| --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); | ||
| --background-inverse: var(--foreground); | ||
| --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); | ||
| --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); | ||
| --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); | ||
| --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); | ||
| --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); | ||
| --field-hover: color-mix( | ||
| in oklab, | ||
| var(--field-background, var(--default)) 90%, | ||
| var(--field-foreground, var(--foreground)) 2% | ||
| ); | ||
| --field-focus: var(--field-background, var(--default)); | ||
| --field-border-hover: color-mix( | ||
| in oklab, | ||
| var(--field-border, var(--border)) 88%, | ||
| var(--field-foreground, var(--foreground)) 10% | ||
| ); | ||
| --field-border-focus: color-mix( | ||
| in oklab, | ||
| var(--field-border, var(--border)) 74%, | ||
| var(--field-foreground, var(--foreground)) 22% | ||
| ); | ||
| --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent); | ||
| --accent-soft-foreground: var(--accent); | ||
| --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent); | ||
| --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); | ||
| --danger-soft-foreground: var(--danger); | ||
| --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); | ||
| --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); | ||
| --warning-soft-foreground: var(--warning); | ||
| --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent); | ||
| --success-soft: color-mix(in oklab, var(--success) 15%, transparent); | ||
| --success-soft-foreground: var(--success); | ||
| --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent); | ||
| --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); | ||
| --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); | ||
| --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); | ||
| --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); | ||
| /* Shadows */ | ||
@@ -98,0 +150,0 @@ /* --surface-shadow: 0 0px 0px 0 rgba(24, 24, 27, 0.03), 0 2px 10px 0 rgba(24, 24, 27, 0.08); */ |
@@ -7,3 +7,3 @@ @theme inline { | ||
| --color-surface-foreground: var(--surface-foreground); | ||
| --color-surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); | ||
| --color-surface-hover: var(--surface-hover); | ||
@@ -52,7 +52,3 @@ --color-surface-secondary: var(--surface-secondary); | ||
| --color-field: var(--field-background, var(--default)); | ||
| --color-field-hover: color-mix( | ||
| in oklab, | ||
| var(--field-background, var(--default)) 90%, | ||
| var(--field-foreground, var(--default-foreground)) 10% | ||
| ); | ||
| --color-field-hover: var(--field-hover); | ||
| --color-field-foreground: var(--field-foreground, var(--foreground)); | ||
@@ -64,81 +60,42 @@ --color-field-placeholder: var(--field-placeholder, var(--muted)); | ||
| /* Calculated Variables */ | ||
| /* Color Tokens */ | ||
| --color-background-secondary: var(--background-secondary); | ||
| --color-background-tertiary: var(--background-tertiary); | ||
| --color-background-inverse: var(--background-inverse); | ||
| /* Colors */ | ||
| --color-default-hover: var(--default-hover); | ||
| --color-accent-hover: var(--accent-hover); | ||
| --color-success-hover: var(--success-hover); | ||
| --color-warning-hover: var(--warning-hover); | ||
| --color-danger-hover: var(--danger-hover); | ||
| /* --- background shades --- */ | ||
| --color-background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); | ||
| --color-background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); | ||
| --color-background-inverse: var(--foreground); | ||
| /* ------------------------- */ | ||
| --color-default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); | ||
| --color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); | ||
| --color-success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); | ||
| --color-warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); | ||
| --color-danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); | ||
| /* Form Field Colors */ | ||
| --color-field-hover: color-mix( | ||
| in oklab, | ||
| var(--field-background, var(--default)) 90%, | ||
| var(--field-foreground, var(--foreground)) 2% | ||
| ); | ||
| --color-field-focus: var(--field-background, var(--default)); | ||
| --color-field-border-hover: color-mix( | ||
| in oklab, | ||
| var(--field-border, var(--border)) 88%, | ||
| var(--field-foreground, var(--foreground)) 10% | ||
| ); | ||
| --color-field-border-focus: color-mix( | ||
| in oklab, | ||
| var(--field-border, var(--border)) 74%, | ||
| var(--field-foreground, var(--foreground)) 22% | ||
| ); | ||
| --color-field-focus: var(--field-focus); | ||
| --color-field-border-hover: var(--field-border-hover); | ||
| --color-field-border-focus: var(--field-border-focus); | ||
| /* Soft Colors */ | ||
| --color-accent-soft: var(--accent-soft, color-mix(in oklab, var(--accent) 15%, transparent)); | ||
| --color-accent-soft-foreground: var(--accent-soft-foreground, var(--accent)); | ||
| --color-accent-soft-hover: var( | ||
| --accent-soft-hover, | ||
| color-mix(in oklab, var(--accent) 20%, transparent) | ||
| ); | ||
| --color-accent-soft: var(--accent-soft); | ||
| --color-accent-soft-foreground: var(--accent-soft-foreground); | ||
| --color-accent-soft-hover: var(--accent-soft-hover); | ||
| --color-danger-soft: var(--danger-soft, color-mix(in oklab, var(--danger) 15%, transparent)); | ||
| --color-danger-soft-foreground: var(--danger-soft-foreground, var(--danger)); | ||
| --color-danger-soft-hover: var( | ||
| --danger-soft-hover, | ||
| color-mix(in oklab, var(--danger) 20%, transparent) | ||
| ); | ||
| --color-danger-soft: var(--danger-soft); | ||
| --color-danger-soft-foreground: var(--danger-soft-foreground); | ||
| --color-danger-soft-hover: var(--danger-soft-hover); | ||
| --color-warning-soft: var(--warning-soft, color-mix(in oklab, var(--warning) 15%, transparent)); | ||
| --color-warning-soft-foreground: var(--warning-soft-foreground, var(--warning)); | ||
| --color-warning-soft-hover: var( | ||
| --warning-soft-hover, | ||
| color-mix(in oklab, var(--warning) 20%, transparent) | ||
| ); | ||
| --color-warning-soft: var(--warning-soft); | ||
| --color-warning-soft-foreground: var(--warning-soft-foreground); | ||
| --color-warning-soft-hover: var(--warning-soft-hover); | ||
| --color-success-soft: var(--success-soft, color-mix(in oklab, var(--success) 15%, transparent)); | ||
| --color-success-soft-foreground: var(--success-soft-foreground, var(--success)); | ||
| --color-success-soft-hover: var( | ||
| --success-soft-hover, | ||
| color-mix(in oklab, var(--success) 20%, transparent) | ||
| ); | ||
| --color-success-soft: var(--success-soft); | ||
| --color-success-soft-foreground: var(--success-soft-foreground); | ||
| --color-success-soft-hover: var(--success-soft-hover); | ||
| /* Separator Colors - Levels */ | ||
| --color-separator-secondary: color-mix( | ||
| in oklab, | ||
| var(--surface) 85%, | ||
| var(--surface-foreground) 15% | ||
| ); | ||
| --color-separator-tertiary: color-mix( | ||
| in oklab, | ||
| var(--surface) 81%, | ||
| var(--surface-foreground) 19% | ||
| ); | ||
| --color-separator-secondary: var(--separator-secondary); | ||
| --color-separator-tertiary: var(--separator-tertiary); | ||
| /* Border Colors - Levels (progressive contrast: default → secondary → tertiary) */ | ||
| /* Light mode: lighter → darker | Dark mode: darker → lighter */ | ||
| --color-border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); | ||
| --color-border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); | ||
| /* Border Colors - Levels */ | ||
| --color-border-secondary: var(--border-secondary); | ||
| --color-border-tertiary: var(--border-tertiary); | ||
@@ -145,0 +102,0 @@ /* Radius and default sizes - defaults can change by just changing the --radius */ |
+1
-1
| { | ||
| "name": "@heroui/styles", | ||
| "version": "3.0.4", | ||
| "version": "3.0.5", | ||
| "description": "HeroUI core styles and Tailwind plugin", | ||
@@ -5,0 +5,0 @@ "author": "HeroUI <support@heroui.com>", |
@@ -76,3 +76,3 @@ // Component variant exports | ||
| export * from "./tag-group"; | ||
| export * from "./text"; | ||
| export * from "./typography"; | ||
| export * from "./textfield"; | ||
@@ -79,0 +79,0 @@ export * from "./textarea"; |
| .text { | ||
| @apply text-foreground; | ||
| } | ||
| .text-prose { | ||
| @apply text-foreground; | ||
| } | ||
| .text-prose h1 { | ||
| @apply text-4xl font-semibold tracking-tight; | ||
| } | ||
| .text-prose h2 { | ||
| @apply text-3xl font-semibold tracking-tight; | ||
| } | ||
| .text-prose h3 { | ||
| @apply text-2xl font-semibold tracking-tight; | ||
| } | ||
| .text-prose h4 { | ||
| @apply text-xl font-semibold tracking-tight; | ||
| } | ||
| .text-prose h5 { | ||
| @apply text-lg font-semibold tracking-tight; | ||
| } | ||
| .text-prose h6 { | ||
| @apply text-base font-semibold tracking-tight; | ||
| } | ||
| .text-prose p { | ||
| @apply text-base leading-7; | ||
| } | ||
| .text-prose code { | ||
| @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground; | ||
| } | ||
| .text-prose a { | ||
| @apply font-medium text-link underline underline-offset-4; | ||
| } | ||
| .text-prose blockquote { | ||
| @apply mt-4 border-l-4 border-border pl-4 italic text-muted; | ||
| } | ||
| .text-prose ul { | ||
| @apply my-4 list-disc space-y-2 pl-6; | ||
| } | ||
| .text-prose ol { | ||
| @apply my-4 list-decimal space-y-2 pl-6; | ||
| } | ||
| .text-prose li { | ||
| @apply text-base leading-7; | ||
| } | ||
| .text-prose hr { | ||
| @apply my-8 border-separator; | ||
| } | ||
| .text-prose pre { | ||
| @apply my-4 overflow-x-auto rounded-xl bg-default p-4 font-mono text-sm leading-relaxed; | ||
| } | ||
| .text-prose strong { | ||
| @apply font-semibold text-foreground; | ||
| } | ||
| .text-prose em { | ||
| @apply italic; | ||
| } | ||
| .text-prose img { | ||
| @apply my-4 rounded-xl; | ||
| } | ||
| .text--h1 { | ||
| @apply text-4xl font-semibold tracking-tight; | ||
| } | ||
| .text--h2 { | ||
| @apply text-3xl font-semibold tracking-tight; | ||
| } | ||
| .text--h3 { | ||
| @apply text-2xl font-semibold tracking-tight; | ||
| } | ||
| .text--h4 { | ||
| @apply text-xl font-semibold tracking-tight; | ||
| } | ||
| .text--h5 { | ||
| @apply text-lg font-semibold tracking-tight; | ||
| } | ||
| .text--h6 { | ||
| @apply text-base font-semibold tracking-tight; | ||
| } | ||
| .text--body { | ||
| @apply text-base leading-7; | ||
| } | ||
| .text--body-sm { | ||
| @apply text-sm leading-6; | ||
| } | ||
| .text--body-xs { | ||
| @apply text-xs leading-5; | ||
| } | ||
| .text--code { | ||
| @apply rounded-md bg-default px-1.5 py-0.5 font-mono text-sm text-foreground; | ||
| } | ||
| .text--align-start { | ||
| @apply text-left rtl:text-right; | ||
| } | ||
| .text--align-center { | ||
| @apply text-center; | ||
| } | ||
| .text--align-end { | ||
| @apply text-right rtl:text-left; | ||
| } | ||
| .text--align-justify { | ||
| @apply text-justify; | ||
| } | ||
| .text--color-default { | ||
| @apply text-foreground; | ||
| } | ||
| .text--color-muted { | ||
| @apply text-muted; | ||
| } | ||
| .text--truncate { | ||
| @apply block truncate; | ||
| } | ||
| .text--weight-normal { | ||
| @apply font-normal; | ||
| } | ||
| .text--weight-medium { | ||
| @apply font-medium; | ||
| } | ||
| .text--weight-semibold { | ||
| @apply font-semibold; | ||
| } | ||
| .text--weight-bold { | ||
| @apply font-bold; | ||
| } |
| export * from "./text.styles"; | ||
| //# sourceMappingURL=index.d.ts.map |
| {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"} |
| export { textVariants } from './text.styles.js'; |
| import type { VariantProps } from "tailwind-variants"; | ||
| export declare const textVariants: import("tailwind-variants").TVReturnType<{ | ||
| align: { | ||
| center: string; | ||
| end: string; | ||
| justify: string; | ||
| start: string; | ||
| }; | ||
| color: { | ||
| default: string; | ||
| muted: string; | ||
| }; | ||
| truncate: { | ||
| true: string; | ||
| }; | ||
| type: { | ||
| body: string; | ||
| "body-sm": string; | ||
| "body-xs": string; | ||
| code: string; | ||
| h1: string; | ||
| h2: string; | ||
| h3: string; | ||
| h4: string; | ||
| h5: string; | ||
| h6: string; | ||
| }; | ||
| weight: { | ||
| bold: string; | ||
| medium: string; | ||
| normal: string; | ||
| semibold: string; | ||
| }; | ||
| }, { | ||
| base: string; | ||
| prose: string; | ||
| }, undefined, { | ||
| align: { | ||
| center: string; | ||
| end: string; | ||
| justify: string; | ||
| start: string; | ||
| }; | ||
| color: { | ||
| default: string; | ||
| muted: string; | ||
| }; | ||
| truncate: { | ||
| true: string; | ||
| }; | ||
| type: { | ||
| body: string; | ||
| "body-sm": string; | ||
| "body-xs": string; | ||
| code: string; | ||
| h1: string; | ||
| h2: string; | ||
| h3: string; | ||
| h4: string; | ||
| h5: string; | ||
| h6: string; | ||
| }; | ||
| weight: { | ||
| bold: string; | ||
| medium: string; | ||
| normal: string; | ||
| semibold: string; | ||
| }; | ||
| }, { | ||
| base: string; | ||
| prose: string; | ||
| }, import("tailwind-variants").TVReturnType<{ | ||
| align: { | ||
| center: string; | ||
| end: string; | ||
| justify: string; | ||
| start: string; | ||
| }; | ||
| color: { | ||
| default: string; | ||
| muted: string; | ||
| }; | ||
| truncate: { | ||
| true: string; | ||
| }; | ||
| type: { | ||
| body: string; | ||
| "body-sm": string; | ||
| "body-xs": string; | ||
| code: string; | ||
| h1: string; | ||
| h2: string; | ||
| h3: string; | ||
| h4: string; | ||
| h5: string; | ||
| h6: string; | ||
| }; | ||
| weight: { | ||
| bold: string; | ||
| medium: string; | ||
| normal: string; | ||
| semibold: string; | ||
| }; | ||
| }, { | ||
| base: string; | ||
| prose: string; | ||
| }, undefined, unknown, unknown, undefined>>; | ||
| export type TextVariants = VariantProps<typeof textVariants>; | ||
| //# sourceMappingURL=text.styles.d.ts.map |
| {"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA2CvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"} |
| import { tv } from 'tailwind-variants'; | ||
| const textVariants = tv({ | ||
| defaultVariants: { | ||
| align: "start", | ||
| color: "default", | ||
| type: "body", | ||
| }, | ||
| slots: { | ||
| base: "text", | ||
| prose: "text-prose", | ||
| }, | ||
| variants: { | ||
| align: { | ||
| center: "text--align-center", | ||
| end: "text--align-end", | ||
| justify: "text--align-justify", | ||
| start: "text--align-start", | ||
| }, | ||
| color: { | ||
| default: "text--color-default", | ||
| muted: "text--color-muted", | ||
| }, | ||
| truncate: { | ||
| true: "text--truncate", | ||
| }, | ||
| type: { | ||
| body: "text--body", | ||
| "body-sm": "text--body-sm", | ||
| "body-xs": "text--body-xs", | ||
| code: "text--code", | ||
| h1: "text--h1", | ||
| h2: "text--h2", | ||
| h3: "text--h3", | ||
| h4: "text--h4", | ||
| h5: "text--h5", | ||
| h6: "text--h6", | ||
| }, | ||
| weight: { | ||
| bold: "text--weight-bold", | ||
| medium: "text--weight-medium", | ||
| normal: "text--weight-normal", | ||
| semibold: "text--weight-semibold", | ||
| }, | ||
| }, | ||
| }); | ||
| export { textVariants }; |
| export * from "./text.styles"; |
| import type {VariantProps} from "tailwind-variants"; | ||
| import {tv} from "tailwind-variants"; | ||
| export const textVariants = tv({ | ||
| defaultVariants: { | ||
| align: "start", | ||
| color: "default", | ||
| type: "body", | ||
| }, | ||
| slots: { | ||
| base: "text", | ||
| prose: "text-prose", | ||
| }, | ||
| variants: { | ||
| align: { | ||
| center: "text--align-center", | ||
| end: "text--align-end", | ||
| justify: "text--align-justify", | ||
| start: "text--align-start", | ||
| }, | ||
| color: { | ||
| default: "text--color-default", | ||
| muted: "text--color-muted", | ||
| }, | ||
| truncate: { | ||
| true: "text--truncate", | ||
| }, | ||
| type: { | ||
| body: "text--body", | ||
| "body-sm": "text--body-sm", | ||
| "body-xs": "text--body-xs", | ||
| code: "text--code", | ||
| h1: "text--h1", | ||
| h2: "text--h2", | ||
| h3: "text--h3", | ||
| h4: "text--h4", | ||
| h5: "text--h5", | ||
| h6: "text--h6", | ||
| }, | ||
| weight: { | ||
| bold: "text--weight-bold", | ||
| medium: "text--weight-medium", | ||
| normal: "text--weight-normal", | ||
| semibold: "text--weight-semibold", | ||
| }, | ||
| }, | ||
| }); | ||
| export type TextVariants = VariantProps<typeof textVariants>; |
Sorry, the diff of this file is too big to display
No alert changes
Improved metrics
- Lines of code
17503
0.01%Worsened metrics
- Total package byte prevSize
937740
-0.93%No dependency changes