@dev-dga/css 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/CHANGELOG.md +12 -0
- package/dist/components/aspect-ratio.css +2 -0
- package/dist/components/aspect-ratio.css.map +1 -0
- package/dist/components/avatar.css +1 -1
- package/dist/components/avatar.css.map +1 -1
- package/dist/components/badge.css +1 -1
- package/dist/components/badge.css.map +1 -1
- package/dist/components/button.css +1 -1
- package/dist/components/button.css.map +1 -1
- package/dist/components/calendar.css +2 -0
- package/dist/components/calendar.css.map +1 -0
- package/dist/components/card.css +1 -1
- package/dist/components/card.css.map +1 -1
- package/dist/components/combobox.css +1 -1
- package/dist/components/combobox.css.map +1 -1
- package/dist/components/command.css +1 -1
- package/dist/components/command.css.map +1 -1
- package/dist/components/date-picker.css +1 -1
- package/dist/components/date-picker.css.map +1 -1
- package/dist/components/date-range-picker.css +2 -0
- package/dist/components/date-range-picker.css.map +1 -0
- package/dist/components/description-list.css +1 -1
- package/dist/components/description-list.css.map +1 -1
- package/dist/components/dropdown-menu.css +1 -1
- package/dist/components/dropdown-menu.css.map +1 -1
- package/dist/components/file-upload.css +1 -1
- package/dist/components/file-upload.css.map +1 -1
- package/dist/components/menubar.css +1 -1
- package/dist/components/menubar.css.map +1 -1
- package/dist/components/progress.css +1 -1
- package/dist/components/progress.css.map +1 -1
- package/dist/components/select.css +1 -1
- package/dist/components/select.css.map +1 -1
- package/dist/components/sidebar.css +1 -1
- package/dist/components/sidebar.css.map +1 -1
- package/dist/components/skeleton.css +1 -1
- package/dist/components/skeleton.css.map +1 -1
- package/dist/components/slider.css +1 -1
- package/dist/components/slider.css.map +1 -1
- package/dist/components/stat.css +1 -1
- package/dist/components/stat.css.map +1 -1
- package/dist/components/switch.css +1 -1
- package/dist/components/switch.css.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAWE,sRAeA,yEAIA,gMAUA,8HAIA,iKAIA,6JAIA,2JAIA,2IAMA,4EAMA,+JAKA,qHAWA,kHAIA,gJAIA,8KAIA,4KAIA,0KAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAWA,+EAMA,0RAUA,gFAGA,8EAKA,gFAMA,0KAMA,6FAGA,2FAGA,sEAGA,kGAGA,kGAIA,sGAOA,2DAKA,4FAQA,2EAIA,qEAOA,2CAGA,oEAGA,mEAIA,qEAKA,mEAIA,kEAIA,oDAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,gIAIA,yBACE,8EAKF,6FAOA,iDAKA,8BAEE,sEAIA,uDAKA","sources":["src/components/stat.css"],"sourcesContent":["@layer ddga-components {\n /* Self-contained KPI tile: owns its surface (padding/border/bg/radius) so\n `<Stat>` renders a complete tile with no Card wrapper. `max-inline-size`\n keeps a single tile from stretching full-width; inside a grid/flex the\n container controls sizing. Logical properties keep it RTL-safe; numbers\n stay LTR via Latin digits. Sentiment color flows through\n --ddga-stat-change-color. The --ddga-color-card/-border/-success/-error\n tokens (surface + change row) adapt automatically in dark mode, but the\n -50/-100 badge tints are raw palette tokens that don't, so they get\n explicit [data-theme='dark'] overrides (below). */\n\n .ddga-stat {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n max-inline-size: 20rem;\n padding: var(--ddga-space-5);\n background-color: var(--ddga-color-card);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n color: var(--ddga-color-card-foreground);\n }\n\n /* ─── Variants ─── */\n /* flat = the base surface (border + neutral badge). elevated/accent below. */\n\n .ddga-stat--elevated {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-stat--elevated .ddga-stat__icon {\n inline-size: 2.5rem;\n block-size: 2.5rem;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-600);\n color: var(--ddga-color-primary-foreground);\n }\n\n /* accent + gradient share the sentiment-keyed tint vars (data-sentiment on\n the root). Defaults to brand when no sentiment. */\n :is(.ddga-stat--accent, .ddga-stat--gradient) {\n --ddga-stat-accent-fg: var(--ddga-sa-600);\n --ddga-stat-accent-bg: var(--ddga-sa-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-600);\n --ddga-stat-accent-bg: var(--ddga-success-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-600);\n --ddga-stat-accent-bg: var(--ddga-error-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-600);\n --ddga-stat-accent-bg: var(--ddga-gray-100);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient) .ddga-stat__icon {\n background-color: var(--ddga-stat-accent-bg);\n color: var(--ddga-stat-accent-fg);\n }\n\n /* accent: inline-start edge bar. */\n .ddga-stat--accent {\n border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n }\n\n /* gradient: soft sentiment-tinted surface (elevated, borderless). The tint\n fades from the inline-start corner; flip the angle in RTL. */\n .ddga-stat--gradient {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-sm);\n background-image: linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);\n }\n [dir='rtl'] .ddga-stat--gradient {\n background-image: linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%);\n }\n\n /* ─── Dark mode ─── */\n /* The -50/-100 badge tints are raw palette tokens (identical in dark) and read\n near-white on a dark card. Use translucent fills + lighter foregrounds\n (mirrors alert.css / empty-state.css). The change-row colors already adapt\n via the semantic --ddga-color-* tokens, and the elevated brand badge\n (--ddga-sa-600) stays legible in dark, so neither needs an override. */\n\n [data-theme='dark'] .ddga-stat--flat .ddga-stat__icon {\n background-color: rgb(255 255 255 / 0.08);\n color: var(--ddga-gray-300, #d2d6db);\n }\n [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient) {\n --ddga-stat-accent-fg: var(--ddga-sa-300, #7ed3a8);\n --ddga-stat-accent-bg: rgb(37 147 95 / 0.18);\n }\n [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-200, #abefc6);\n --ddga-stat-accent-bg: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-200, #fecdca);\n --ddga-stat-accent-bg: rgb(217 45 32 / 0.18);\n }\n [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-300, #d2d6db);\n --ddga-stat-accent-bg: rgb(255 255 255 / 0.08);\n }\n\n .ddga-stat__label-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n }\n\n .ddga-stat__label {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n text-transform: uppercase;\n /* Tracked caps read as \"professional\" in LTR. Reset in RTL — letter-spacing\n breaks Arabic cursive joining; uppercase is a harmless no-op on Arabic. */\n letter-spacing: 0.06em;\n }\n [dir='rtl'] .ddga-stat__label {\n letter-spacing: normal;\n }\n\n .ddga-stat__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: 2.25rem;\n block-size: 2.25rem;\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-600);\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-stat__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-stat__value {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-2xl);\n font-weight: var(--ddga-font-weight-semibold);\n /* tight leading for the large single-line numeric */\n line-height: 1.2;\n letter-spacing: -0.01em;\n /* Align digits across a grid of tiles. */\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-stat__change-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n .ddga-stat__change {\n --ddga-stat-change-color: var(--ddga-text-secondary);\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-stat-change-color);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n font-variant-numeric: tabular-nums;\n }\n .ddga-stat__change--positive {\n --ddga-stat-change-color: var(--ddga-color-success);\n }\n .ddga-stat__change--negative {\n --ddga-stat-change-color: var(--ddga-color-error);\n }\n /* Same as the default — kept explicit so the three sentiment modifiers are\n symmetric and `--neutral` is a stable override hook. */\n .ddga-stat__change--neutral {\n --ddga-stat-change-color: var(--ddga-text-secondary);\n }\n\n /* Chip: same text color, wrapped in a sentiment-tinted pill. The raw -50\n tints get dark overrides below (mirrors the accent badge). */\n .ddga-stat__change--chip {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-100);\n }\n .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: var(--ddga-success-50);\n }\n .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: var(--ddga-error-50);\n }\n [data-theme='dark'] .ddga-stat__change--chip {\n background-color: rgb(255 255 255 / 0.08);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: rgb(217 45 32 / 0.18);\n }\n\n .ddga-stat__change-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* caret slightly smaller than the change text for hierarchy */\n font-size: 0.85em;\n }\n .ddga-stat__change-icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-stat__change-label {\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Chart slot (consumer-supplied sparkline) ─── */\n /* A styled slot with a consistent height; the dropped-in chart stretches to\n fill. The library ships no charting dependency. */\n .ddga-stat__chart {\n margin-block-start: var(--ddga-space-2);\n block-size: 2.5rem;\n }\n .ddga-stat__chart > svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Sizes (scale padding + value; lg/xl also open the root gap) ─── */\n .ddga-stat--sm {\n padding: var(--ddga-space-4);\n }\n .ddga-stat--sm .ddga-stat__value {\n font-size: var(--ddga-font-size-xl);\n }\n .ddga-stat--lg {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6);\n }\n .ddga-stat--lg .ddga-stat__value {\n font-size: var(--ddga-font-size-3xl);\n }\n /* Hero/display: no font-size token sits above 3xl, so the display value uses\n a component-local rem (precedent: the .625rem label size). */\n .ddga-stat--xl {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-8);\n }\n .ddga-stat--xl .ddga-stat__value {\n font-size: 2.5rem;\n line-height: 1.1;\n }\n .ddga-stat--xl .ddga-stat__chart {\n block-size: 3.25rem;\n }\n\n /* ─── StatGroup (layout parent for Stat tiles) ─── */\n\n .ddga-stat-group {\n --ddga-stat-group-gap: var(--ddga-space-4);\n }\n .ddga-stat-group--gap-sm {\n --ddga-stat-group-gap: var(--ddga-space-3);\n }\n .ddga-stat-group--gap-md {\n --ddga-stat-group-gap: var(--ddga-space-4);\n }\n .ddga-stat-group--gap-lg {\n --ddga-stat-group-gap: var(--ddga-space-6);\n }\n\n .ddga-stat-group--horizontal {\n display: grid;\n gap: var(--ddga-stat-group-gap);\n grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));\n }\n .ddga-stat-group--horizontal.ddga-stat-group--cols {\n grid-template-columns: repeat(var(--ddga-stat-group-columns), minmax(0, 1fr));\n }\n /* Fixed columns collapse on narrow screens so content isn't crushed. */\n @media (max-width: 40rem) {\n .ddga-stat-group--horizontal.ddga-stat-group--cols {\n grid-template-columns: 1fr;\n }\n }\n\n .ddga-stat-group--vertical {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-stat-group-gap);\n }\n\n /* Inside a group, tiles fill their slot — release the standalone cap. */\n .ddga-stat-group .ddga-stat {\n max-inline-size: none;\n }\n\n /* ─── Forced colors ─── */\n @media (forced-colors: active) {\n /* Badge + chip backgrounds flatten to Canvas; a border keeps them visible. */\n .ddga-stat__icon,\n .ddga-stat__change--chip {\n border: 1px solid CanvasText;\n }\n .ddga-stat--accent {\n border-inline-start-color: Highlight;\n }\n /* gradient flattens its tinted surface + has a transparent border, so it\n would lose its boundary — restore one. */\n .ddga-stat--gradient {\n border: 1px solid CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAWE,sRAeA,yEAIA,gMAUA,8HAIA,iKAIA,6JAIA,2JAIA,2IAMA,4EAMA,+JAKA,qHAWA,kHAIA,gJAIA,8KAIA,4KAIA,0KAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAYA,kDAIA,+EAMA,0RAUA,gFAGA,8EAKA,gFAMA,0KAMA,6FAGA,2FAGA,sEAGA,kGAGA,kGAIA,sGAOA,2DAKA,4FAQA,2EAIA,qEAOA,2CAGA,oEAGA,mEAIA,qEAKA,mEAIA,kEAIA,oDAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,gIAIA,yBACE,8EAKF,6FAOA,iDAKA,8BAEE,sEAIA,uDAKA","sources":["src/components/stat.css"],"sourcesContent":["@layer ddga-components {\n /* Self-contained KPI tile: owns its surface (padding/border/bg/radius) so\n `<Stat>` renders a complete tile with no Card wrapper. `max-inline-size`\n keeps a single tile from stretching full-width; inside a grid/flex the\n container controls sizing. Logical properties keep it RTL-safe; numbers\n stay LTR via Latin digits. Sentiment color flows through\n --ddga-stat-change-color. The --ddga-color-card/-border/-success/-error\n tokens (surface + change row) adapt automatically in dark mode, but the\n -50/-100 badge tints are raw palette tokens that don't, so they get\n explicit [data-theme='dark'] overrides (below). */\n\n .ddga-stat {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n max-inline-size: 20rem;\n padding: var(--ddga-space-5);\n background-color: var(--ddga-color-card);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n color: var(--ddga-color-card-foreground);\n }\n\n /* ─── Variants ─── */\n /* flat = the base surface (border + neutral badge). elevated/accent below. */\n\n .ddga-stat--elevated {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-stat--elevated .ddga-stat__icon {\n inline-size: 2.5rem;\n block-size: 2.5rem;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-600);\n color: var(--ddga-color-primary-foreground);\n }\n\n /* accent + gradient share the sentiment-keyed tint vars (data-sentiment on\n the root). Defaults to brand when no sentiment. */\n :is(.ddga-stat--accent, .ddga-stat--gradient) {\n --ddga-stat-accent-fg: var(--ddga-sa-600);\n --ddga-stat-accent-bg: var(--ddga-sa-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-600);\n --ddga-stat-accent-bg: var(--ddga-success-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-600);\n --ddga-stat-accent-bg: var(--ddga-error-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-600);\n --ddga-stat-accent-bg: var(--ddga-gray-100);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient) .ddga-stat__icon {\n background-color: var(--ddga-stat-accent-bg);\n color: var(--ddga-stat-accent-fg);\n }\n\n /* accent: inline-start edge bar. */\n .ddga-stat--accent {\n border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n }\n\n /* gradient: soft sentiment-tinted surface (elevated, borderless). The tint\n fades from the inline-start corner; flip the angle in RTL. */\n .ddga-stat--gradient {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-sm);\n background-image: linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);\n }\n [dir='rtl'] .ddga-stat--gradient {\n background-image: linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%);\n }\n\n /* ─── Dark mode ─── */\n /* The -50/-100 badge tints are raw palette tokens (identical in dark) and read\n near-white on a dark card. Use translucent fills + lighter foregrounds\n (mirrors alert.css / empty-state.css). The change-row colors already adapt\n via the semantic --ddga-color-* tokens, and the elevated brand badge\n (--ddga-sa-600) stays legible in dark, so neither needs an override. */\n\n [data-theme='dark'] .ddga-stat--flat .ddga-stat__icon {\n background-color: rgb(255 255 255 / 0.08);\n color: var(--ddga-gray-300, #d2d6db);\n }\n [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient) {\n --ddga-stat-accent-fg: var(--ddga-sa-300, #7ed3a8);\n --ddga-stat-accent-bg: rgb(37 147 95 / 0.18);\n }\n [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-200, #abefc6);\n --ddga-stat-accent-bg: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-200, #fecdca);\n --ddga-stat-accent-bg: rgb(217 45 32 / 0.18);\n }\n [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-300, #d2d6db);\n --ddga-stat-accent-bg: rgb(255 255 255 / 0.08);\n }\n\n .ddga-stat__label-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n }\n\n .ddga-stat__label {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n text-transform: uppercase;\n /* Tracked caps read as \"professional\" in LTR. Reset in RTL — letter-spacing\n breaks Arabic cursive joining; uppercase is a harmless no-op on Arabic. */\n letter-spacing: 0.06em;\n }\n [dir='rtl'] .ddga-stat__label {\n letter-spacing: normal;\n }\n\n .ddga-stat__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: 2.25rem;\n block-size: 2.25rem;\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-600);\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-stat__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-stat__value {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-2xl);\n font-weight: var(--ddga-font-weight-semibold);\n /* tight leading for the large single-line numeric */\n line-height: 1.2;\n letter-spacing: -0.01em;\n /* Align digits across a grid of tiles. */\n font-variant-numeric: tabular-nums;\n }\n /* Reset the tracking in RTL — values can carry Arabic text (e.g. \"مليون ريال\"),\n and letter-spacing breaks Arabic cursive joining (mirrors __label above). */\n [dir='rtl'] .ddga-stat__value {\n letter-spacing: normal;\n }\n\n .ddga-stat__change-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n .ddga-stat__change {\n --ddga-stat-change-color: var(--ddga-text-secondary);\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-stat-change-color);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n font-variant-numeric: tabular-nums;\n }\n .ddga-stat__change--positive {\n --ddga-stat-change-color: var(--ddga-color-success);\n }\n .ddga-stat__change--negative {\n --ddga-stat-change-color: var(--ddga-color-error);\n }\n /* Same as the default — kept explicit so the three sentiment modifiers are\n symmetric and `--neutral` is a stable override hook. */\n .ddga-stat__change--neutral {\n --ddga-stat-change-color: var(--ddga-text-secondary);\n }\n\n /* Chip: same text color, wrapped in a sentiment-tinted pill. The raw -50\n tints get dark overrides below (mirrors the accent badge). */\n .ddga-stat__change--chip {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-100);\n }\n .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: var(--ddga-success-50);\n }\n .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: var(--ddga-error-50);\n }\n [data-theme='dark'] .ddga-stat__change--chip {\n background-color: rgb(255 255 255 / 0.08);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: rgb(217 45 32 / 0.18);\n }\n\n .ddga-stat__change-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* caret slightly smaller than the change text for hierarchy */\n font-size: 0.85em;\n }\n .ddga-stat__change-icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-stat__change-label {\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Chart slot (consumer-supplied sparkline) ─── */\n /* A styled slot with a consistent height; the dropped-in chart stretches to\n fill. The library ships no charting dependency. */\n .ddga-stat__chart {\n margin-block-start: var(--ddga-space-2);\n block-size: 2.5rem;\n }\n .ddga-stat__chart > svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Sizes (scale padding + value; lg/xl also open the root gap) ─── */\n .ddga-stat--sm {\n padding: var(--ddga-space-4);\n }\n .ddga-stat--sm .ddga-stat__value {\n font-size: var(--ddga-font-size-xl);\n }\n .ddga-stat--lg {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6);\n }\n .ddga-stat--lg .ddga-stat__value {\n font-size: var(--ddga-font-size-3xl);\n }\n /* Hero/display: no font-size token sits above 3xl, so the display value uses\n a component-local rem (precedent: the .625rem label size). */\n .ddga-stat--xl {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-8);\n }\n .ddga-stat--xl .ddga-stat__value {\n font-size: 2.5rem;\n line-height: 1.1;\n }\n .ddga-stat--xl .ddga-stat__chart {\n block-size: 3.25rem;\n }\n\n /* ─── StatGroup (layout parent for Stat tiles) ─── */\n\n .ddga-stat-group {\n --ddga-stat-group-gap: var(--ddga-space-4);\n }\n .ddga-stat-group--gap-sm {\n --ddga-stat-group-gap: var(--ddga-space-3);\n }\n .ddga-stat-group--gap-md {\n --ddga-stat-group-gap: var(--ddga-space-4);\n }\n .ddga-stat-group--gap-lg {\n --ddga-stat-group-gap: var(--ddga-space-6);\n }\n\n .ddga-stat-group--horizontal {\n display: grid;\n gap: var(--ddga-stat-group-gap);\n grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));\n }\n .ddga-stat-group--horizontal.ddga-stat-group--cols {\n grid-template-columns: repeat(var(--ddga-stat-group-columns), minmax(0, 1fr));\n }\n /* Fixed columns collapse on narrow screens so content isn't crushed. */\n @media (max-width: 40rem) {\n .ddga-stat-group--horizontal.ddga-stat-group--cols {\n grid-template-columns: 1fr;\n }\n }\n\n .ddga-stat-group--vertical {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-stat-group-gap);\n }\n\n /* Inside a group, tiles fill their slot — release the standalone cap. */\n .ddga-stat-group .ddga-stat {\n max-inline-size: none;\n }\n\n /* ─── Forced colors ─── */\n @media (forced-colors: active) {\n /* Badge + chip backgrounds flatten to Canvas; a border keeps them visible. */\n .ddga-stat__icon,\n .ddga-stat__change--chip {\n border: 1px solid CanvasText;\n }\n .ddga-stat--accent {\n border-inline-start-color: Highlight;\n }\n /* gradient flattens its tinted surface + has a transparent border, so it\n would lose its boundary — restore one. */\n .ddga-stat--gradient {\n border: 1px solid CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer ddga-components{.ddga-switch-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-switch{background-color:var(--ddga-color-input);cursor:pointer;border:1px solid #0000;border-radius:999px;flex-shrink:0;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex;position:relative}.ddga-switch--md{--ddga-switch-thumb-travel:16px;block-size:22px;inline-size:38px}.ddga-switch--sm{--ddga-switch-thumb-travel:12px;block-size:18px;inline-size:30px}.ddga-switch[data-state=checked]{background-color:var(--ddga-color-primary)}.ddga-switch:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-switch--error{background-color:var(--ddga-color-background);border-color:var(--ddga-color-error)}.ddga-switch--error[data-state=checked]{background-color:var(--ddga-color-error);border-color:var(--ddga-color-error)}.ddga-switch--error:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-switch:disabled{opacity:.5;cursor:not-allowed}.ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-switch__thumb{aspect-ratio:1;background-color:var(--ddga-color-background);will-change:translate;border-radius:999px;block-size:calc(100% - 4px);margin-inline-start:2px;transition:translate .15s;display:block;translate:0;box-shadow:0 1px 2px #00000026}.ddga-switch[data-state=checked] .ddga-switch__thumb{translate:var(--ddga-switch-thumb-travel) 0}[dir=rtl] .ddga-switch[data-state=checked] .ddga-switch__thumb{translate:calc(var(--ddga-switch-thumb-travel) * -1) 0}[data-theme=dark] .ddga-switch__thumb{background-color
|
|
1
|
+
@layer ddga-components{.ddga-switch-row{align-items:center;gap:var(--ddga-space-2);display:flex}.ddga-switch{background-color:var(--ddga-color-input);cursor:pointer;border:1px solid #0000;border-radius:999px;flex-shrink:0;align-items:center;padding:0;transition:background-color .15s,border-color .15s,box-shadow .15s;display:inline-flex;position:relative}.ddga-switch--md{--ddga-switch-thumb-travel:16px;block-size:22px;inline-size:38px}.ddga-switch--sm{--ddga-switch-thumb-travel:12px;block-size:18px;inline-size:30px}.ddga-switch[data-state=checked]{background-color:var(--ddga-color-primary)}.ddga-switch:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-ring);outline:none}.ddga-switch--error{background-color:var(--ddga-color-background);border-color:var(--ddga-color-error)}.ddga-switch--error[data-state=checked]{background-color:var(--ddga-color-error);border-color:var(--ddga-color-error)}.ddga-switch--error:focus-visible{box-shadow:0 0 0 2px var(--ddga-color-error)}.ddga-switch:disabled{opacity:.5;cursor:not-allowed}.ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label{cursor:not-allowed;color:var(--ddga-text-tertiary)}.ddga-switch__thumb{aspect-ratio:1;background-color:var(--ddga-color-background);will-change:translate;border-radius:999px;block-size:calc(100% - 4px);margin-inline-start:2px;transition:translate .15s;display:block;translate:0;box-shadow:0 1px 2px #00000026}.ddga-switch[data-state=checked] .ddga-switch__thumb{translate:var(--ddga-switch-thumb-travel) 0}[dir=rtl] .ddga-switch[data-state=checked] .ddga-switch__thumb{translate:calc(var(--ddga-switch-thumb-travel) * -1) 0}[data-theme=dark] .ddga-switch__thumb{background-color:var(--ddga-gray-100);box-shadow:0 1px 2px #0006}.ddga-switch__label{color:var(--ddga-text-primary);font-size:var(--ddga-font-size-base);cursor:pointer;line-height:1.4}.ddga-switch__required{color:var(--ddga-color-error);margin-inline-start:.125rem}@media (prefers-reduced-motion:reduce){.ddga-switch,.ddga-switch__thumb{transition:none}}@media (forced-colors:active){.ddga-switch{background-color:canvas;border:1px solid canvastext}.ddga-switch[data-state=checked]{background-color:highlight}.ddga-switch__thumb{box-shadow:none;background-color:canvastext}.ddga-switch[data-state=checked] .ddga-switch__thumb{background-color:highlighttext}.ddga-switch:focus-visible{outline-offset:1px;outline:2px solid highlight}.ddga-switch:disabled{border-color:graytext}}}
|
|
2
2
|
/*# sourceMappingURL=switch.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAME,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAME,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,uGAOA,uHAMA,iFAOA,uCACE,kDAQF,8BACE,iEAIA,4DAGA,gEAIA,oFAGA,0EAIA","sources":["src/components/switch.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Switch-specific styles live here. */\n\n /* ─── Row (track + label, inline) ─── */\n\n .ddga-switch-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Track (Radix Root , reset the button, then style) ─── */\n\n .ddga-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid transparent;\n border-radius: 999px;\n background-color: var(--ddga-color-input);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* Track dimensions and travel distance. Travel is encoded as a per-size\n custom property so the thumb rule below is size-agnostic. */\n .ddga-switch--md {\n block-size: 22px;\n inline-size: 38px;\n --ddga-switch-thumb-travel: 16px;\n }\n .ddga-switch--sm {\n block-size: 18px;\n inline-size: 30px;\n --ddga-switch-thumb-travel: 12px;\n }\n\n /* ─── Checked fill ─── */\n\n .ddga-switch[data-state='checked'] {\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n .ddga-switch:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-switch--error {\n background-color: var(--ddga-color-background);\n border-color: var(--ddga-color-error);\n }\n .ddga-switch--error[data-state='checked'] {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-switch--error:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-switch:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Thumb (Radix Thumb , the moving circle) ─── */\n\n .ddga-switch__thumb {\n display: block;\n block-size: calc(100% - 4px);\n aspect-ratio: 1;\n margin-inline-start: 2px;\n border-radius: 999px;\n background-color: var(--ddga-color-background);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n transition: translate 150ms ease;\n translate: 0 0;\n will-change: translate;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n translate: var(--ddga-switch-thumb-travel) 0;\n }\n /* RTL: the thumb's resting position is on the right (logical start\n flips), so checked travels in the negative direction. The ancestor\n `[dir=\"rtl\"]` is set on DgaProvider; using attribute selector instead\n of `:dir()` for broader browser support (the theming pass set the\n Safari floor at 16.2; `:dir()` lands in 16.4). */\n [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n translate: calc(var(--ddga-switch-thumb-travel) * -1) 0;\n }\n\n /* Dark mode: the default thumb color (--ddga-color-background, near-white\n in light mode) flips to a very dark gray-900 , darker than the off-state\n track (--ddga-color-input = gray-700) , and the thumb disappears.\n Override locally with a near-white so the puck reads as a raised\n surface in both modes. Kept in this file (not dark.css) because dark.css\n is reserved for semantic token remapping; this is a per-component fix. */\n [data-theme='dark'] .ddga-switch__thumb {\n background-color: var(--ddga-gray-100);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n }\n\n /* ─── Label ─── */\n\n .ddga-switch__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n .ddga-switch__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-switch,\n .ddga-switch__thumb {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-switch {\n border: 1px solid CanvasText;\n background-color: Canvas;\n }\n .ddga-switch[data-state='checked'] {\n background-color: Highlight;\n }\n .ddga-switch__thumb {\n background-color: CanvasText;\n box-shadow: none;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n background-color: HighlightText;\n }\n .ddga-switch:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-switch:disabled {\n border-color: GrayText;\n }\n }\n}\n"],"names":[]}
|