From 2b355ee76f8cb0c5903573f1105bce47607c123f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Tue, 8 Sep 2026 23:14:52 +0200 Subject: [PATCH] Align core, shared and preview with the design-system skill (#3010) --- .agents/skills/design-system/SKILL.md | 33 +++- .../skills/design-system/rules-of-thumb.md | 54 ++++-- .changeset/design-audit-core-added.md | 5 + .changeset/design-audit-core-colors.md | 5 + .changeset/design-audit-core-recipes.md | 5 + .changeset/design-audit-core-removed.md | 5 + .changeset/design-audit-decisions.md | 5 + .changeset/design-audit-inbox.md | 5 + .changeset/design-audit-preview.md | 5 + core/scss/_variables.scss | 34 ++-- core/scss/ui/_avatars.scss | 10 +- core/scss/ui/_badges.scss | 4 +- core/scss/ui/_buttons.scss | 8 +- core/scss/ui/_calendars.scss | 4 +- core/scss/ui/_cards.scss | 32 ++-- core/scss/ui/_carousel.scss | 4 +- core/scss/ui/_chat.scss | 2 +- core/scss/ui/_dropdowns.scss | 7 +- core/scss/ui/_forms.scss | 22 ++- core/scss/ui/_icons.scss | 6 +- core/scss/ui/_legend.scss | 2 +- core/scss/ui/_lists.scss | 6 +- core/scss/ui/_loaders.scss | 4 +- core/scss/ui/_markdown.scss | 2 +- core/scss/ui/_modals.scss | 2 +- core/scss/ui/_nav.scss | 35 +++- core/scss/ui/_pagination.scss | 25 ++- core/scss/ui/_patterns.scss | 5 +- core/scss/ui/_payments.scss | 2 +- core/scss/ui/_ribbons.scss | 4 +- core/scss/ui/_segmented.scss | 6 +- core/scss/ui/_signature.scss | 2 +- core/scss/ui/_stars.scss | 2 +- core/scss/ui/_steps.scss | 11 +- core/scss/ui/_switch-icon.scss | 8 +- core/scss/ui/_tags.scss | 2 +- core/scss/ui/_toasts.scss | 6 +- core/scss/ui/_type.scss | 13 +- core/scss/ui/forms/_form-check.scss | 2 +- core/scss/ui/forms/_form-colorinput.scss | 4 +- core/scss/ui/forms/_form-imagecheck.scss | 2 +- core/scss/ui/forms/_form-selectgroup.scss | 1 + docs/content/ui/components/list-group.mdx | 4 +- docs/content/ui/components/trending.mdx | 178 +++++++++++------- preview/pages/2-step-verification-code.astro | 4 +- preview/pages/2-step-verification.astro | 6 +- preview/pages/all-elements.astro | 168 ++++++++--------- preview/pages/card-gradients.astro | 6 +- preview/pages/cards-masonry.astro | 2 +- preview/pages/cookie-banner.astro | 4 +- preview/pages/dashboard-crypto.astro | 28 +-- preview/pages/datatables.astro | 79 ++++---- preview/pages/dropzone.astro | 6 +- preview/pages/email-inbox.astro | 127 ++++++------- preview/pages/faq.astro | 2 +- preview/pages/form-elements.astro | 108 +++++------ preview/pages/form-layout.astro | 38 ++-- preview/pages/illustrations.astro | 4 +- preview/pages/inline-player.astro | 2 +- preview/pages/logs.astro | 10 +- preview/pages/map-fullsize.astro | 4 +- preview/pages/maps-vector.astro | 2 +- preview/pages/marketing/about.astro | 14 +- preview/pages/marketing/real-estate.astro | 6 +- preview/pages/modals.astro | 2 +- preview/pages/navigation.astro | 2 +- preview/pages/onboarding.astro | 6 +- preview/pages/patterns.astro | 44 ++--- preview/pages/pay.astro | 4 +- preview/pages/payment-providers.astro | 2 +- preview/pages/pricing-table.astro | 16 +- preview/pages/profile.astro | 2 +- preview/pages/progress.astro | 10 +- preview/pages/screenshot.astro | 9 +- preview/pages/scroll-spy.astro | 2 +- preview/pages/settings.astro | 8 +- preview/pages/sortable.astro | 14 +- preview/pages/stars-rating.astro | 2 +- preview/pages/tasks-list.astro | 12 +- preview/pages/tour.astro | 14 +- preview/pages/trial-ended.astro | 2 +- preview/pages/users.astro | 4 +- preview/scss/_highlight.scss | 48 ----- preview/scss/demo.scss | 57 +++--- shared/components/cards/AuthLockCard.astro | 2 +- .../cards/AuthenticateAccount.astro | 2 +- shared/components/cards/BodyPlaceholder.astro | 2 +- shared/components/cards/CrmStats.astro | 4 +- shared/components/cards/EmptyTeam.astro | 4 +- shared/components/cards/GalleryPhoto.astro | 4 +- shared/components/cards/InvoiceCard.astro | 112 +++++------ shared/components/cards/Invoices.astro | 2 +- .../components/cards/MostVisitedPages.astro | 2 +- shared/components/cards/PricingCard.astro | 11 +- shared/components/cards/PricingPlan.astro | 14 +- shared/components/cards/ProfileContact.astro | 2 +- shared/components/cards/RecentActivity.astro | 4 +- shared/components/cards/SmallStats.astro | 2 +- shared/components/cards/SocialTraffic.astro | 2 +- shared/components/cards/Sponsor.astro | 4 +- shared/components/cards/TasksDue.astro | 5 +- shared/components/cards/TeamLeaderboard.astro | 2 +- shared/components/cards/TopDeals.astro | 4 +- shared/components/cards/Weather.astro | 2 +- shared/components/cards/Welcome.astro | 29 +-- shared/components/cards/YouWin.astro | 2 +- .../cards/charts/ActiveUsers2.astro | 2 +- .../cards/charts/PipelineFunnel.astro | 2 +- .../components/cards/charts/TotalUsers.astro | 2 +- shared/components/cards/form/Payment.astro | 8 +- .../components/cards/music/TracksList.astro | 4 +- .../components/cards/tables/Progressbg.astro | 7 +- shared/components/demo/DropdownMenuAll.astro | 2 +- shared/components/demo/MapVector.astro | 6 +- shared/components/demo/Table.astro | 4 +- shared/components/demo/ThemeSettings.astro | 2 +- shared/components/demo/Timeline.astro | 6 +- shared/components/demo/Toast.astro | 4 +- shared/components/forms/FormElements2.astro | 6 +- shared/components/forms/FormElements3.astro | 14 +- shared/components/forms/FormElements4.astro | 22 +-- shared/components/forms/FormElements5.astro | 16 +- .../layout/HeaderActionsButtons.astro | 9 +- .../layout/HeaderActionsPrint.astro | 2 +- shared/components/layout/HeaderProfile.astro | 2 +- .../marketing/sections/Counters.astro | 8 +- .../components/marketing/sections/Faq.astro | 2 +- .../marketing/sections/Features2.astro | 2 +- .../marketing/sections/Features3.astro | 2 +- .../marketing/sections/Pricing.astro | 2 +- .../marketing/sections/PricingBanner.astro | 2 +- .../marketing/sections/Subscribe.astro | 2 +- .../modals/AddTaskModalContent.astro | 2 +- .../modals/ChangePasswordModalContent.astro | 8 +- .../modals/ConfirmDeleteModalContent.astro | 16 +- .../modals/EditProfileModalContent.astro | 20 +- .../modals/NewEmailModalContent.astro | 4 +- .../modals/NewEventModalContent.astro | 10 +- .../modals/NewTaskModalContent.astro | 14 +- .../modals/ReportModalContent.astro | 4 +- .../modals/SignatureModalContent.astro | 2 +- .../components/modals/TeamModalContent.astro | 2 +- shared/components/navbar/Navbar.astro | 4 - shared/components/navbar/NavbarMenuItem.astro | 6 +- shared/components/navbar/NavbarSideApps.astro | 4 +- .../navbar/NavbarSideNotifications.astro | 6 +- shared/components/navbar/NavbarSideUser.astro | 2 +- shared/components/navbar/SidebarUser.astro | 2 +- shared/components/parts/Datagrid.astro | 4 +- shared/components/parts/Tasks.astro | 4 +- shared/components/parts/form/InputColor.astro | 2 +- shared/layouts/SettingsLayout.astro | 12 +- shared/ui/ChartRadial.astro | 6 +- shared/ui/InputGroup.astro | 6 +- shared/ui/ProgressDescription.astro | 6 +- shared/ui/Rating.astro | 2 +- shared/ui/SwitchIcon.astro | 2 +- shared/ui/Trending.astro | 2 +- 158 files changed, 1025 insertions(+), 947 deletions(-) create mode 100644 .changeset/design-audit-core-added.md create mode 100644 .changeset/design-audit-core-colors.md create mode 100644 .changeset/design-audit-core-recipes.md create mode 100644 .changeset/design-audit-core-removed.md create mode 100644 .changeset/design-audit-decisions.md create mode 100644 .changeset/design-audit-inbox.md create mode 100644 .changeset/design-audit-preview.md delete mode 100644 preview/scss/_highlight.scss diff --git a/.agents/skills/design-system/SKILL.md b/.agents/skills/design-system/SKILL.md index bb99d9ee6..0996d107a 100644 --- a/.agents/skills/design-system/SKILL.md +++ b/.agents/skills/design-system/SKILL.md @@ -117,7 +117,7 @@ migration plan removes it together with every `rgba(var(--X-rgb))` site, so buil | Body size / line | `0.875rem` (14px) / `1.25rem` (20px) | | Small / large body | `0.765625rem` (12.25px; `0.75rem` in 2.0, decision #4) / `1.09375rem` (17.5px) | | Weights | 400 body · 500 medium · 600 semibold · 300 display | -| Letter spacing | 0 | +| Letter spacing | 0, except `0.04em`: the `subheader()` mixin (`.subheader`, table heads, `.table-mobile` cell labels, `.dropdown-header`, `.datagrid-title`, `.page-pretitle`, `.hr-text`) and the sidebar section title, which writes the same value by hand | | Root font size | not set; `rem` follows the user's browser setting (WCAG 1.4.4) | ### Heading scale (size / line, both on the 4px grid) @@ -137,7 +137,9 @@ Heading margin-bottom is `--spacer` (8px). Headings and `strong` share the semib ### Where each weight is used - **400** body text, lead (lead is body-size in the secondary colour, not larger). -- **500** buttons, form labels, badges, `kbd`, card titles. +- **500** buttons, form labels, badges, `kbd`, card titles, modal and offcanvas titles, ribbons, + the chat bubble author, and the active item of a vertical nav, list or step (the active colour + already carries the state). - **600** headings, `strong`, navbar brand, alert links. ### Component text sizes @@ -146,12 +148,15 @@ Heading margin-bottom is `--spacer` (8px). Headings and `strong` share the semib | --- | --- | --- | --- | | Card title | h3 (16px) | 500 | heading colour | | Card subtitle | h4 (14px) when inline | 400 | secondary | +| Modal / offcanvas title | h3 (16px) | 500 | heading colour | | Page title | h2 (20px / 28px) | headings weight | | | Form label | h4 (14px), margin-bottom 8px | 500 | body | +| Fieldset legend as a label (`legend.form-label`) | inherits 14px (the reboot's bare `legend` is 24px) | 500 | body | +| Markdown prose (`.markdown`) | h3 (16px), blockquote 16px — long-form reading text is the one exception to the 14px content rule | 400 | body | | Form hint / feedback | `0.875em`, margin-top 4px | 400 | secondary | | Tooltip / popover body | small (12.25px) | | | | Badge | `0.857em` of parent (sm `0.714em`, lg `1em`) | 500 | | -| Sidebar section title | 12px | | | +| Sidebar section title | 12px, uppercase, tracked `0.04em` | 500 | navbar colour at 70% | | Code | `0.857em`, `gray-600` on `gray-100` (dark: `gray-400` on `gray-900`) | | | --- @@ -248,7 +253,7 @@ Rule of thumb: **controls 6px, containers 8px, small controls 4px.** A global ### Borders -- Width 1px; `wide` 2px (nav-bordered active, steps, modal status, progress ring). +- Width 1px; `wide` 2px (nav-bordered active, steps, modal status, progress ring, card status bar, blockquote rule). Components write `var(--border-width)`, not `1px`. - Colour: `--border-color-translucent` for cards, tables, dropdowns, alerts (blends on any background); `--border-color` for navbars, modals headers, list groups, tabs, popovers. - Hover on a control raises the border to `--border-active-color`. @@ -287,7 +292,11 @@ Every interactive component expresses the same five states with the same tokens: - Coloured buttons: filled `btn-X`, `btn-outline-X` (transparent, coloured border, fills on hover), `btn-ghost-X` (no border, tints on hover). - Nav variants: `pills` (active = `--active-bg` + primary text), `bordered` (2px primary - underline), `tabs` (surface bg + border), `underline` (2px, emphasis colour). + underline), `tabs` (surface bg + border), `underline` (2px, emphasis colour), `segmented` + (tertiary track with an inset 1px translucent ring; active = surface bg + `--border-color`; + sizes 32 / 40 / 48px, link gap 8px, lg 12px). +- Hover on a list, nav, pagination, action button or select-group item is `$hover-bg`; the + open state of a `form-help` popover and the checked select-group item are `--active-bg`. - Pagination active is the one place where a filled primary background is used for a selected item. @@ -302,8 +311,9 @@ Every interactive component expresses the same five states with the same tokens: | Collapse | `height 0.35s ease` | | Modal | `transform 0.3s ease-out`, slides down 16px; static backdrop scales 1.02 | | Progress bar | `width 0.6s ease` | -| Reveal on hover (`$transition-time`) | `0.3s` — list-group item actions, card options; an opacity fade, not a colour change | -| Icon animations | pulse 2s, tada 3s, rotate 3s | +| Reveal on hover (`$transition-time`) | `0.3s` — list-group item actions, card options, switch-icon fade/scale/flip; an opacity fade, not a colour change | +| Icon animations | pulse 2s, tada 3s, rotate 3s (`.icon-*`); `.btn-animate-icon-*` pulse/shake/tada 0.9s once on hover | +| Everything else | `$transition-time` 0.3s or `0.15s`; no other durations in `core/scss/ui` | `prefers-reduced-motion`: decorative loops (blink, pulse, tada, rotate, animated gradient, waves) are removed; loaders and indeterminate progress keep animating but at 3s so state is @@ -320,6 +330,8 @@ still visible. negative outer margin of a quarter. - Nav-link icons are the link colour at 50%, 80% on hover. - Filled variant only via `.icon-filled`. +- A toggle's two faces are `.switch-icon-a` (rest, inherits or `--secondary`) and `.switch-icon-b` + (on, a state colour — `SwitchIcon` takes it as `activeColor`). --- @@ -333,12 +345,17 @@ Places where the code contradicts its own rules, found on 2026-09-08 and decided | 2 | Sass `$spacer` = 16px but CSS `--spacer` = 8px. Headings use the 8px one, `card-img-overlay` and popover header use the 16px one. | `_variables.scss:341`, `layout/_root.scss` | **Fix in 2.0.** `--spacer` becomes 16px, equal to `$spacer`; headings get an explicit `--spacer-2`. Remap of the shipped `--tblr-spacer`: section 5 entry + upgrade guide. | planned 2.0 | | 3 | Small-element heights do not share a ladder: `btn-sm` 28 · `avatar-sm` 32 · tag/status 24. | buttons, inputs, avatars | **Fix in 2.0.** `btn-sm` (and with it `form-control-sm`, `form-select-sm`) goes to 32px: `$input-btn-padding-y-sm` 5px → 7px. The ladder becomes 24 / 32 / 40 / 48 / 56. Section 5 entry + upgrade guide. | planned 2.0 | | 4 | `$font-size-sm` is 12.25px, off the pixel grid; `h5` is 12px. | `_variables.scss:403` | **Fix in 2.0.** `$font-size-sm: 0.75rem`. Tooltips and popovers drop a quarter pixel. Short section 5 entry. | planned 2.0 | -| 5 | Two focus indicators: the ring everywhere, but `outline: 2px solid var(--primary)` in `_buttons.scss:294` and `_calendars.scss:73`. | buttons, calendars | **Fix.** Both go through `@include focus-ring()`; added to the scope of issue #2972. | tracked, #2972 | +| 5 | Two focus indicators: the ring everywhere, but `outline: 2px solid var(--primary)` on `.btn-action:focus-visible` (`_buttons.scss`), `.date-item:focus-visible` (`_calendars.scss`) and `.switch-icon:focus-visible` (`_switch-icon.scss`). | buttons, calendars, switch-icon | **Fix.** All three go through `@include focus-ring()`; added to the scope of issue #2972. | tracked, #2972 | | 6 | Hex literals outside the variable files: `--card-gradient-*`, `.card-cover` `#666`, `.card-note` `#fff7dd/#fff1c9`, calendar `#66758c` and `#fefeff`. | `ui/_cards.scss`, `ui/_calendars.scss` | **Fix, with one exception.** `.card-note`, `.card-cover` and the calendar get `light-dark()` tokens. The gradients stay literal: they are artwork, nobody rethemes them. | planned, no remap | | 7 | `$dropdown-header-color: $gray-600` and the `$dropdown-dark-*` family are not `light-dark()` pairs. | `_variables.scss` | **Fix in 2.0.** Header colour → `--secondary`. The `$dropdown-dark-*` Sass variables go; `.dropdown-menu-dark` keeps emitting through the dropdown tokens (v5 class, section 5 question 8). | planned 2.0 | | 8 | Tooltip 200px, popover 276px, modals 380/540/720/1140px and toast 350px are the only pixel widths. | `_variables.scss` | **Fix in 2.0.** Move to `rem` (12.5 · 17.25 · 23.75/33.75/45/71.25 · 21.875rem) so overlays scale with the user's font size. Section 5 entry. | planned 2.0 | | 9 | `icon-md` 40px and `icon-lg` 56px drop the stroke to 1; `icon-sm` keeps 1.5. | `ui/_icons.scss` | **Intended.** Rule: stroke 1.5 up to 24px, stroke 1 from 40px. Recorded in section 8. | closed, exception | | 10 | Table hover uses `--emphasis-color` at 7.5% while every other hover uses `$hover-bg` (`--secondary` at 8%). | `_variables.scss` table block | **Fix in 2.0.** `$table-hover-bg: $hover-bg`. Short section 5 entry. | planned 2.0 | +| 13 | Demo pages nest example cards inside a section card (`SectionCard` > `SectionCardBody` > `Card`), and `cards.astro` documents "Cards inside card"; rule 12 forbids a card in a card body. | `preview/pages/cards.astro` and every `SectionCard` page | **Intended.** The demo section wrapper is exempt from rule 12: it frames the examples, it is not product markup. The "cards inside card" demo stays. | closed, exception | +| 14 | `badge-outline` is forbidden by `.agents/rules/main.mdc` but shipped by `core/scss/ui/_badges.scss` and shown as the "Outline" demo on `badges.astro`. | `_badges.scss`, `badges.astro`, `job-listing.astro` | **Fix in 2.0.** The class is removed: it duplicates the soft `-lt` variant. Deprecate, section 5 entry, upgrade-guide line. | tracked, #3011 | +| 15 | Brand colour as UI chrome: the sponsor heart is `text-pink` inside `.btn` (`NavbarSide.astro`, `Sponsor.astro`), the marketing footer uses filled `btn-facebook` / `btn-x` / `btn-instagram` / `btn-linkedin`, and `SmallStats color="facebook"` fills a stat avatar. | `shared/components/**`, `shared/layouts/MarketingLayout.astro` | **Intended, for the brand only.** The sponsor heart and the social follow buttons keep their brand colour; everything else obeys rule 21. The one real violation was a decorative icon at rest, the favourite star in `ProfileContact`, which now inherits. A toggle's on-state (`.switch-icon-b`) is a separate, allowed pattern: it carries a state colour, not decoration. | closed, exception | +| 16 | Scroll containers carry an inline height: `ActivityCard` `height: 28rem`, `UsersListHeaders` `max-height: 35rem`, `NavbarSideApps` `max-height: 50vh`. | `shared/components/cards/ActivityCard.astro`, `UsersListHeaders.astro`, `navbar/NavbarSideApps.astro` | **Intended.** A scroll container's height is a per-instance layout choice, not a scale value, so it stays inline. Rule 18 records the exception. | closed, exception | + --- ## 10. What a review checks (summary) diff --git a/.agents/skills/design-system/rules-of-thumb.md b/.agents/skills/design-system/rules-of-thumb.md index 1e751e475..65451110c 100644 --- a/.agents/skills/design-system/rules-of-thumb.md +++ b/.agents/skills/design-system/rules-of-thumb.md @@ -12,6 +12,7 @@ A review cites a rule by number: "rule 16 — buttons go in `btn-list`". ### 1. Use 14px for content text Body copy, buttons, table cells and form values are 14px. 16px and above belong to headings. +Long-form prose inside `.markdown` is the one exception, at 16px (SKILL section 3). ```html @@ -28,7 +29,8 @@ Body copy, buttons, table cells and form values are 14px. 16px and above belong Only the first word and product names take a capital. Title Case reads as marketing, not UI. This covers all UI text: headings, card and page titles, subheaders, buttons, menu items and table headers. -Today: "Top Pages", "Payment Method", "Edit Profile" and about ten more card titles in preview. +Today: 0 in `preview/pages` and `shared/` after the sentence-case pass of 2026-09-08; what is left +capitalised is a product or proper name ("Tabler Icons", "Front-End Learning", "United States"). ```html @@ -43,7 +45,7 @@ Today: "Top Pages", "Payment Method", "Edit Profile" and about ten more card tit ### 3. Never use `fw-bold` Headings are semibold (600) and emphasised inline text is medium (500). 700 is not on the -weight scale. Today: 12 × `fw-bold` against 25 × `fw-medium` and 8 × `fw-semibold`. +weight scale. Today: 0 × `fw-bold`, 23 × `fw-medium`, 7 × `fw-semibold`. ```html @@ -57,8 +59,10 @@ weight scale. Today: 12 × `fw-bold` against 25 × `fw-medium` and 8 × `fw-semi ### 4. Never change letter spacing -`letter-spacing` is 0 everywhere. The only tracked text is `.subheader`, which the framework -styles itself. +`letter-spacing` is 0 everywhere. The only tracked text comes from the `subheader()` mixin, +which the framework applies itself: `.subheader`, table heads, `.table-mobile` cell labels, +`.dropdown-header`, `.datagrid-title`, `.page-pretitle` and `.hr-text`, plus the sidebar +section title, which writes the same `0.04em` by hand. Markup never adds tracking. ```html @@ -134,16 +138,16 @@ hand-written nesting must too.
…
- +
-
…
+
…
``` ### 9. Use a border to separate sticky elements A sticky table head or toolbar gets a 1px border on the edge that meets the content. A -shadow there reads as a floating surface, which it is not. Today: 6 × `sticky-top` in preview. +shadow there reads as a floating surface, which it is not. Today: 4 × `sticky-top` in preview. ```html @@ -190,6 +194,8 @@ stronger belongs to floating surfaces. Two borders and two paddings in a row look like a mistake. Kumo's rule is "never stack"; Tabler has `.card-stacked` for the deliberate stack, so the rule is about nesting. A list in a card is `card-list-group`, a table is `card-table`; both keep the card's edge and padding. +The demo pages' `SectionCard` wrapper is exempt: it frames the examples on a preview page, it +is not product markup (deviation #13, closed). ```html @@ -260,7 +266,8 @@ finds the primary without reading. ### 16. Buttons go in `btn-list`, badges in `badge-list`, avatars in `avatar-list` The wrappers own the gap and the wrapping. Hand-written `me-2` breaks at the last item and -in RTL. Today: 57 × `me-2` against 5 × `btn-list`. +in RTL. Today: 0 × `me-2` on a button, badge or avatar; 49 × ``, 10 × ``, +13 × ``, 9 × ``. The remaining 53 × `me-2` sit on inline icons and text. ```html @@ -277,8 +284,9 @@ in RTL. Today: 57 × `me-2` against 5 × `btn-list`. ### 17. Use `text-secondary`, never `text-muted` One class for secondary text. `text-muted` is a Bootstrap alias kept for compatibility. -Today: 254 × `text-secondary`, 18 × `text-muted`. `` still emits -`text-muted` and is documented that way; it is not a finding until the prop is remapped. +Today: 0 × `text-muted` anywhere in `preview/pages`, `shared/` and `docs/content`, including +``, which is gone; `text-secondary` is the only secondary-text class. The +`.text-muted` utility itself stays as a Bootstrap alias until 2.0 drops the aliases. ```html @@ -291,8 +299,12 @@ Today: 254 × `text-secondary`, 18 × `text-muted`. `` still ### 18. No inline `style` for sizes Sizes come from utilities or a component token, so they follow the scale and the theme. -Today: 75 inline `style` attributes in preview, among them 8 × `height: 8rem` and -`width: 350px`. The exception is SVG illustration fills, which are data, not layout. +Today: 0 inline sizes in `preview/pages`; demo-only sizes live as classes in +`preview/scss/demo.scss` (`demo-photo-placeholder`, `demo-dropdown-menu-wide`, +`modal-demo-scrollable`). In `shared/` three scroll-container heights stay inline on purpose (deviation #16): a scroll +height is a per-instance layout choice, not a scale value. +The exceptions are data, not layout: SVG illustration fills, `background-image` URLs and +progress-bar widths that carry the value. ```html @@ -307,7 +319,8 @@ Today: 75 inline `style` attributes in preview, among them 8 × `height: 8rem` a ### 19. Vertical rhythm is `mb-3` inside a card and `row-cards` between cards One spacing step per level. Mixing `mb-3`, `mb-4` and `mt-3` in the same block gives uneven -gaps nobody chose. Today: 142 × `mb-3`, 76 × `mb-4`, 31 × `mt-3`, 31 × `mt-4`. +gaps nobody chose. Today: 148 × `mb-3`, 46 × `mb-4`, 33 × `mt-3`, 27 × `mt-4`; the `mb-4` +left is mostly the auth and marketing cards, which use a wider rhythm on purpose. ```html @@ -348,12 +361,19 @@ and the state colours are not reused for categories. ### 21. Icons inherit colour inside controls, `gray-400` elsewhere A button's icon is the button's text colour. A stand-alone icon is `--icon-color`. -Colouring an icon separately makes it read as a second control. +Colouring an icon separately makes it read as a second control. Two exceptions: the on-state of +a toggle carries a state colour on purpose (rule 20) — that is what `.switch-icon-b` is for, and +`SwitchIcon` takes it as `activeColor` — and the sponsor heart, which carries the brand +(deviation #15). ```html Create + Create @@ -361,8 +381,10 @@ Colouring an icon separately makes it read as a second control. ### 22. Uppercase only in `.subheader` and list-group headers -The framework uppercases `.subheader`, `.list-group-header`, avatar initials, ribbons and the -pagination "page" label. Nothing else. Today: 9 × `text-uppercase` in preview to review. +The framework uppercases `.subheader`, `.list-group-header`, avatar initials, ribbons, the +pagination "page" label and, through the `subheader()` mixin, table heads, `.dropdown-header`, +`.datagrid-title`, `.page-pretitle` and `.hr-text`. Nothing else, so `` +is redundant. Today: 0 × `text-uppercase` in `preview/pages` and `shared/`. ```html diff --git a/.changeset/design-audit-core-added.md b/.changeset/design-audit-core-added.md new file mode 100644 index 000000000..07dc4f5b8 --- /dev/null +++ b/.changeset/design-audit-core-added.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +Added `$dropdown-arrow-size`, `$badge-padding-y-sm`, `$signature-canvas-height` and the `$nav-tokens` and `$pagination-tokens` maps. diff --git a/.changeset/design-audit-core-colors.md b/.changeset/design-audit-core-colors.md new file mode 100644 index 000000000..1f81ccb7d --- /dev/null +++ b/.changeset/design-audit-core-colors.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed colours that ignored dark mode by replacing Sass colour literals with `--tblr-*` tokens in buttons, forms, lists, steps and toasts. diff --git a/.changeset/design-audit-core-recipes.md b/.changeset/design-audit-core-recipes.md new file mode 100644 index 000000000..8a0a72d3d --- /dev/null +++ b/.changeset/design-audit-core-recipes.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Updated hover, active, font-weight, shadow and motion values across `core/scss/ui` to the design-system recipes. diff --git a/.changeset/design-audit-core-removed.md b/.changeset/design-audit-core-removed.md new file mode 100644 index 000000000..2864da913 --- /dev/null +++ b/.changeset/design-audit-core-removed.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": major +--- + +Removed `$alert-shadow`, `$steps-dot-offset-counter` and the `--tblr-status-color-rgb` custom property. diff --git a/.changeset/design-audit-decisions.md b/.changeset/design-audit-decisions.md new file mode 100644 index 000000000..5a1d2c61e --- /dev/null +++ b/.changeset/design-audit-decisions.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Removed the `letter-spacing` from `.badge` so only `.subheader` and its mixin consumers are tracked. diff --git a/.changeset/design-audit-inbox.md b/.changeset/design-audit-inbox.md new file mode 100644 index 000000000..d12cc4c32 --- /dev/null +++ b/.changeset/design-audit-inbox.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Updated the email inbox list to `card-list-group` and replaced every `` with `color="secondary"`. diff --git a/.changeset/design-audit-preview.md b/.changeset/design-audit-preview.md new file mode 100644 index 000000000..72932a18a --- /dev/null +++ b/.changeset/design-audit-preview.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Updated preview pages and shared components to sentence case, `text-secondary` and list wrappers, with no inline sizes. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 802c1b641..23a34f50c 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -1006,7 +1006,6 @@ $alert-margin-bottom: 1rem !default; $alert-link-font-weight: var(--font-weight-semibold) !default; $alert-border-width: var(--border-width) !default; $alert-border-color: var(--border-color-translucent) !default; -$alert-shadow: color-transparent(var(--dark), 0.04) 0 2px 4px 0 !default; $alert-heading-margin-bottom: 0.25rem !default; $alert-icon-size: 1.25rem !default; $alert-padding-inline-end: 3rem !default; @@ -1021,7 +1020,7 @@ $breadcrumb-padding-x: 0 !default; $breadcrumb-item-padding-x: 0.5rem !default; $breadcrumb-margin-bottom: 1rem !default; $breadcrumb-bg: null !default; -$breadcrumb-divider-color: var(--gray-500) !default; +$breadcrumb-divider-color: var(--secondary) !default; $breadcrumb-active-color: inherit !default; $breadcrumb-divider: string.quote('/') !default; $breadcrumb-border-radius: null !default; @@ -1049,6 +1048,7 @@ $badge-empty-size: 0.5rem !default; $badge-color: var(--secondary) !default; $badge-bg-color: var(--bg-surface-secondary) !default; $badge-gap: 0.25rem !default; +$badge-padding-y-sm: 2px !default; $badge-padding-x-sm: 0.25rem !default; $badge-padding-y-lg: 0.25rem !default; $badge-padding-x-lg: 0.5rem !default; @@ -1227,7 +1227,7 @@ $card-bg: var(--bg-surface) !default; $card-img-overlay-padding: $spacer !default; $card-group-margin: 1.5rem !default; -$card-status-size: 3px !default; +$card-status-size: $border-width-wide !default; // The strip sits on top of the card border, so it is pulled out by the border width $card-status-offset: calc(-1 * var(--card-border-width)) !default; @@ -1308,10 +1308,10 @@ $carousel-control-icon-width: 1.5rem !default; $carousel-control-prev-icon-bg: url("data:image/svg+xml,") !default; $carousel-control-next-icon-bg: url("data:image/svg+xml,") !default; -$carousel-indicator-width: 30px !default; -$carousel-indicator-height: 3px !default; -$carousel-indicator-hit-area-height: 10px !default; -$carousel-indicator-spacer: 3px !default; +$carousel-indicator-width: 32px !default; +$carousel-indicator-height: 2px !default; +$carousel-indicator-hit-area-height: 12px !default; +$carousel-indicator-spacer: 4px !default; $carousel-indicator-opacity: 0.5 !default; $carousel-indicator-active-bg: $white !default; $carousel-indicator-active-opacity: 1 !default; @@ -1403,6 +1403,7 @@ $dropdown-scrollable-height: 13rem !default; $dropdown-item-gap: 0.5rem !default; $dropdown-header-padding-bottom: 0.25rem !default; $dropdown-menu-columns-gap: 0.25rem !default; +$dropdown-arrow-size: 0.75rem !default; $dropdown-arrow-offset: 0.25rem !default; $dropdown-arrow-inset: 0.75rem !default; $dropdown-dropend-offset: 0.25rem !default; @@ -1443,7 +1444,7 @@ $tooltip-arrow-height: 0.4rem !default; $loader-size: 2.5rem !default; $list-group-header-bg: var(--bg-surface-tertiary) !default; -$list-group-header-color: var(--gray-500) !default; +$list-group-header-color: var(--secondary) !default; // Modals // scss-docs-start modal-variables @@ -1502,7 +1503,7 @@ $nav-link-padding-y: 0.5rem !default; $nav-link-padding-x: 0.75rem !default; $nav-link-font-size: var(--body-font-size) !default; $nav-link-font-weight: null !default; -$nav-link-color: var(--gray-500) !default; +$nav-link-color: var(--secondary) !default; $nav-link-active-color: var(--body-color) !default; $nav-link-hover-color: var(--link-hover-color) !default; $nav-link-transition: @@ -1731,8 +1732,8 @@ $steps-counter-dot-size: 1.5rem !default; $steps-vertical-padding-start: 1rem !default; $steps-vertical-item-gap: 1rem !default; $steps-vertical-connector-gap: 1rem !default; -$steps-dot-offset: 6px !default; -$steps-dot-offset-counter: -2px !default; +// Centers the dot on the first line of the step label, whatever the dot size. +$steps-dot-offset: calc((var(--body-line-height) * 1em - var(--steps-dot-size)) / 2) !default; // scss-docs-end steps-variables // Spinner @@ -1820,7 +1821,7 @@ $toast-background-color: var(--bg-surface) !default; $toast-border-width: var(--border-width) !default; $toast-border-color: var(--border-color) !default; $toast-border-radius: var(--border-radius) !default; -$toast-box-shadow: var(--box-shadow) !default; +$toast-box-shadow: var(--shadow) !default; $toast-spacing: $container-padding-x !default; $toast-header-color: var(--gray-500) !default; @@ -2148,6 +2149,9 @@ $switch-icon-loading-border-width: $spinner-border-width-sm !default; $switch-icon-loading-animation-speed: $spinner-animation-speed !default; // scss-docs-end switch-icon-variables +// Signature +$signature-canvas-height: 12.5rem !default; + // Offcanvas // scss-docs-start offcanvas-variables $offcanvas-padding-y: $modal-inner-padding !default; @@ -2203,19 +2207,19 @@ $nav-segmented-height: 2.5rem !default; $nav-segmented-padding: 2px !default; $nav-segmented-radius: 6px !default; $nav-segmented-gap: 0.25rem !default; -$nav-segmented-link-gap: 0.25rem !default; +$nav-segmented-link-gap: 0.5rem !default; $nav-segmented-link-padding-x: 0.75rem !default; $nav-segmented-link-icon-size: 1.25rem !default; $nav-segmented-icon-margin: -0.25rem !default; $nav-segmented-height-sm: 2rem !default; $nav-segmented-radius-sm: 4px !default; $nav-segmented-link-padding-x-sm: 0.5rem !default; -$nav-segmented-link-gap-sm: 0.25rem !default; +$nav-segmented-link-gap-sm: 0.5rem !default; $nav-segmented-link-icon-size-sm: 1rem !default; $nav-segmented-height-lg: 3rem !default; $nav-segmented-radius-lg: 8px !default; $nav-segmented-link-padding-x-lg: 1rem !default; -$nav-segmented-link-gap-lg: 0.5rem !default; +$nav-segmented-link-gap-lg: 0.75rem !default; $nav-segmented-link-icon-size-lg: 1.5rem !default; // scss-docs-end segmented-nav-variables diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss index ad2259893..a84aade72 100644 --- a/core/scss/ui/_avatars.scss +++ b/core/scss/ui/_avatars.scss @@ -58,7 +58,7 @@ $avatar-tokens: defaults( inset-inline-end: 0; bottom: 0; @include border-radius(var(--border-radius-pill)); - box-shadow: 0 0 0 calc(var(--avatar-status-size) / 4) $card-bg; + box-shadow: 0 0 0 calc(var(--avatar-status-size) / 4) var(--card-bg, var(--bg-surface)); } @at-root a#{&} { @@ -66,7 +66,7 @@ $avatar-tokens: defaults( &:hover { color: var(--primary); - --avatar-box-shadow-color: var(--primary); + --avatar-box-shadow-color: var(--border-active-color); } } } @@ -149,13 +149,13 @@ $avatar-tokens: defaults( svg { width: var(--avatar-upload-icon-size); height: var(--avatar-upload-icon-size); - stroke-width: 1; + stroke-width: 1.5; } &:hover { color: var(--primary); text-decoration: none; - border-color: var(--primary); + border-color: var(--border-active-color); } } @@ -181,6 +181,6 @@ $avatar-tokens: defaults( width: var(--avatar-brand-size); height: var(--avatar-brand-size); background: var(--bg-surface); - border: 1px solid var(--border-color); + border: var(--border-width) solid var(--border-color); @include border-radius(var(--border-radius)); } diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss index 02607bf14..3c0ba3cba 100644 --- a/core/scss/ui/_badges.scss +++ b/core/scss/ui/_badges.scss @@ -36,7 +36,6 @@ $badge-tokens: defaults( line-height: var(--badge-line-height); color: var(--badge-color); text-align: center; - letter-spacing: 0.04em; white-space: nowrap; vertical-align: bottom; user-select: none; @@ -52,7 +51,6 @@ $badge-tokens: defaults( width: 1em; height: 1em; font-size: var(--badge-icon-size); - stroke-width: 2; } } @@ -115,7 +113,7 @@ $badge-tokens: defaults( .badge-sm { --badge-font-size: #{$badge-font-size-sm}; --badge-icon-size: 1em; - --badge-padding-y: 2px; + --badge-padding-y: #{$badge-padding-y-sm}; --badge-padding-x: #{$badge-padding-x-sm}; } diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss index 3d22a1f21..da3f3cece 100644 --- a/core/scss/ui/_buttons.scss +++ b/core/scss/ui/_buttons.scss @@ -81,7 +81,7 @@ $btn-tokens: defaults( // here would leave a disabled link button with the default surface and border. --btn-bg: transparent; --btn-border-color: transparent; - color: #{adjust-lightness-css(var(--primary), 5%)}; + color: var(--link-color); background-color: transparent; border-color: transparent; box-shadow: none; @@ -91,7 +91,7 @@ $btn-tokens: defaults( } &:hover { - color: #{$btn-link-hover-color}; + color: var(--link-hover-color); border-color: transparent; } } @@ -311,7 +311,7 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors)); // Action button // .btn-action { - --border-color: transparent; + --btn-border-color: transparent; --btn-bg: transparent; --btn-disabled-color: var(--secondary); color: var(--secondary); @@ -361,7 +361,7 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors)); .btn-animate-icon { .icon { - transition: transform 0.3s ease; + transition: transform $transition-time ease; } &:hover, diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss index 3bf9b24a5..f9089a84f 100644 --- a/core/scss/ui/_calendars.scss +++ b/core/scss/ui/_calendars.scss @@ -104,14 +104,14 @@ $calendar-tokens: defaults( top: 50%; height: var(--calendar-date-size); content: ''; - background: color-transparent(var(--primary), 0.1); + background: var(--active-bg); transform: translateY(-50%); } &.range-start, &.range-end { .date-item { - color: $white; + color: var(--primary-fg); background: var(--primary); border-color: var(--primary); } diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 57fcf2896..f9e9cf36b 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -106,7 +106,7 @@ $card-tokens: defaults( max-height: 100%; overflow: hidden; pointer-events: none; - border-start-end-radius: $border-radius; + border-start-end-radius: var(--card-border-radius); opacity: $card-stamp-opacity; } @@ -132,7 +132,7 @@ $card-tokens: defaults( .icon { width: calc(var(--stamp-size) * 0.75); height: calc(var(--stamp-size) * 0.75); - stroke-width: 2; + stroke-width: 1; } } @@ -176,7 +176,7 @@ $card-tokens: defaults( flex: 1; align-items: center; justify-content: center; - padding: $card-spacer-y $card-spacer-x; + padding: var(--card-spacer-y) var(--card-spacer-x); font-weight: var(--font-weight-medium); color: inherit; text-align: center; @@ -213,7 +213,7 @@ $card-tokens: defaults( .card-cover { position: relative; - padding: $card-spacer-y $card-spacer-x; + padding: var(--card-spacer-y) var(--card-spacer-x); background: #666 no-repeat center/cover; &::before { @@ -228,7 +228,7 @@ $card-tokens: defaults( &:first-child, &:first-child::before { - @include border-radius($border-radius $border-radius 0 0); + @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0); } } @@ -299,7 +299,7 @@ $card-tokens: defaults( &:hover { color: inherit; text-decoration: none; - box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-card-hover); } } @@ -338,11 +338,11 @@ $card-tokens: defaults( height: var(--card-progress-height); &:last-child { - @include border-radius(0 0 2px 2px); + @include border-radius(0 0 var(--border-radius-xs) var(--border-radius-xs)); } &:first-child { - @include border-radius(2px 2px 0 0); + @include border-radius(var(--border-radius-xs) var(--border-radius-xs) 0 0); } } @@ -391,7 +391,7 @@ $card-tokens: defaults( .card-subtitle { --card-subtitle-margin-start: #{$card-subtitle-margin-start}; margin-bottom: $card-title-spacer-y; - font-weight: 400; + font-weight: var(--font-weight-normal); color: var(--secondary); .card-header & { @@ -502,13 +502,13 @@ $card-tokens: defaults( td, th { &:first-child { - padding-inline-start: $card-spacer-x; + padding-inline-start: var(--card-spacer-x); border-inline-start: 0; border-start-start-radius: var(--card-border-radius); } &:last-child { - padding-inline-end: $card-spacer-x; + padding-inline-end: var(--card-spacer-x); border-inline-end: 0; border-start-end-radius: var(--card-border-radius); } @@ -627,8 +627,8 @@ Card list group } .list-group-item { - padding-inline-start: $card-spacer-x; - padding-inline-end: $card-spacer-x; + padding-inline-start: var(--card-spacer-x); + padding-inline-end: var(--card-spacer-x); border-inline-start: 0; border-inline-end: 0; border-radius: 0; @@ -651,14 +651,14 @@ Card list group border-bottom: 0; .nav-link { - background: $card-cap-bg; - border: $card-border-width var(--border-style) $card-border-color; + background: var(--card-cap-bg); + border: var(--card-border-width) var(--border-style) var(--card-border-color); &.active, &:active, &:hover { color: var(--body-color); - border-color: $card-border-color; + border-color: var(--card-border-color); } &.active { diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss index ea8c6ade2..4b0f668e7 100644 --- a/core/scss/ui/_carousel.scss +++ b/core/scss/ui/_carousel.scss @@ -39,7 +39,7 @@ margin: 0 $carousel-indicator-spacer; background: no-repeat center/cover; border: 0; - box-shadow: $box-shadow; + box-shadow: var(--shadow-card); opacity: $carousel-indicator-thumb-opacity; @include border-radius(var(--border-radius)); @@ -68,6 +68,6 @@ inset-inline-end: 0; bottom: 0; height: 90%; - background: $dark; + background: var(--dark); background: linear-gradient(0deg, color-transparent(var(--dark), 0.9), color-transparent(var(--dark), 0)); } diff --git a/core/scss/ui/_chat.scss b/core/scss/ui/_chat.scss index b4a98729a..695e52844 100644 --- a/core/scss/ui/_chat.scss +++ b/core/scss/ui/_chat.scss @@ -43,7 +43,7 @@ $chat-tokens: defaults( } .chat-bubble-author { - font-weight: 600; + font-weight: var(--font-weight-medium); } .chat-bubble-date { diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss index 613c9369f..e693eb6d6 100644 --- a/core/scss/ui/_dropdowns.scss +++ b/core/scss/ui/_dropdowns.scss @@ -11,6 +11,7 @@ $dropdown-tokens: defaults( --dropdown-item-icon-color: var(--tertiary), --dropdown-header-padding-bottom: $dropdown-header-padding-bottom, --dropdown-menu-columns-gap: $dropdown-menu-columns-gap, + --dropdown-arrow-size: $dropdown-arrow-size, --dropdown-arrow-offset: $dropdown-arrow-offset, --dropdown-arrow-inset: $dropdown-arrow-inset, --dropdown-dropend-offset: $dropdown-dropend-offset, @@ -99,9 +100,9 @@ $dropdown-tokens: defaults( top: calc(-1 * var(--dropdown-arrow-offset)); z-index: -1; display: block; - width: 14px; - height: 14px; - clip-path: inset(0 5px 5px 0); + width: var(--dropdown-arrow-size); + height: var(--dropdown-arrow-size); + clip-path: inset(0 calc(var(--dropdown-arrow-size) / 3) calc(var(--dropdown-arrow-size) / 3) 0); content: ''; background: inherit; // The menu draws its edge with the 1px ring in --dropdown-box-shadow and has diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss index 61193f6f4..c3b4e78eb 100644 --- a/core/scss/ui/_forms.scss +++ b/core/scss/ui/_forms.scss @@ -18,12 +18,17 @@ textarea { &.required { &::after { margin-inline-start: var(--form-label-required-gap); - color: $red; + color: var(--danger); content: '*'; } } } +// A fieldset legend used as a label keeps the label size, not the reboot's 1.5rem. +legend.form-label { + font-size: inherit; +} + .form-label-description { float: inline-end; font-weight: var(--font-weight-normal); @@ -57,12 +62,12 @@ textarea { } .form-control-light { - background-color: var(--gray-100); + background-color: var(--bg-surface-secondary); border-color: transparent; } .form-control-dark { - color: $white; + color: var(--white); background-color: color-transparent(var(--black), 0.1); border-color: transparent; @@ -135,10 +140,15 @@ fieldset:empty { @include border-radius(var(--border-radius-pill)); @include transition(background-color $transition-time, color $transition-time); - &:hover, + &:hover { + color: var(--body-color); + background: $hover-bg; + } + + // Popover open &[aria-describedby] { - color: $white; - background: var(--primary); + color: var(--primary); + background: var(--active-bg); } } diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss index 7023ad230..c6650625d 100644 --- a/core/scss/ui/_icons.scss +++ b/core/scss/ui/_icons.scss @@ -61,19 +61,19 @@ // Icons animation // .icon-pulse { - transition: all 0.15s ease 0s; + transition: transform 0.15s ease; animation: pulse 2s ease infinite; animation-fill-mode: both; } .icon-tada { - transition: all 0.15s ease 0s; + transition: transform 0.15s ease; animation: tada 3s ease infinite; animation-fill-mode: both; } .icon-rotate { - transition: all 0.15s ease 0s; + transition: transform 0.15s ease; animation: rotate-360 3s linear infinite; animation-fill-mode: both; } diff --git a/core/scss/ui/_legend.scss b/core/scss/ui/_legend.scss index 46c82da06..e135ca19a 100644 --- a/core/scss/ui/_legend.scss +++ b/core/scss/ui/_legend.scss @@ -14,7 +14,7 @@ width: var(--legend-size); height: var(--legend-size); background: var(--legend-color); - border: 1px solid var(--border-color-translucent); + border: var(--border-width) solid var(--border-color-translucent); @include border-radius($legend-border-radius); } diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss index 5e0ab44db..65f869515 100644 --- a/core/scss/ui/_lists.scss +++ b/core/scss/ui/_lists.scss @@ -30,14 +30,14 @@ // `.list-group-item-{color}` tint. &.disabled, &:disabled { - color: $gray-500; + color: var(--disabled-color); background-color: var(--hover-bg); } } .list-group-item.active { background-color: var(--active-bg); - border-inline-start-color: $component-active-bg; + border-inline-start-color: var(--primary); border-inline-start-width: $border-width-wide; } @@ -85,7 +85,7 @@ } &.active { - font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-medium); color: inherit; background: $list-group-active-bg; diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss index 88c9c9cd1..8e1225bdd 100644 --- a/core/scss/ui/_loaders.scss +++ b/core/scss/ui/_loaders.scss @@ -5,7 +5,7 @@ display: block; width: $loader-size; height: $loader-size; - color: $blue; + color: var(--primary); vertical-align: middle; &::after { @@ -15,7 +15,7 @@ width: 100%; height: 100%; content: ''; - border: 1px var(--border-style); + border: var(--border-width) var(--border-style); border-color: transparent; border-inline-start-color: currentColor; border-top-color: currentColor; diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss index 0dad5f8de..bf339d626 100644 --- a/core/scss/ui/_markdown.scss +++ b/core/scss/ui/_markdown.scss @@ -81,7 +81,7 @@ Prose (formerly markdown) > p > img, > figure > img { @include border-radius(var(--border-radius)); - border: 1px solid var(--border-color); + border: var(--border-width) solid var(--border-color); } pre { diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss index bb1ae182b..61cde7437 100644 --- a/core/scss/ui/_modals.scss +++ b/core/scss/ui/_modals.scss @@ -47,7 +47,7 @@ .modal-title { font-size: $h3-font-size; - font-weight: $headings-font-weight; + font-weight: var(--font-weight-medium); line-height: $line-height-base; color: var(--heading-color, var(--emphasis-color)); } diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss index 8c3e7d7a5..0553e61ac 100644 --- a/core/scss/ui/_nav.scss +++ b/core/scss/ui/_nav.scss @@ -1,15 +1,30 @@ @use '../config' as *; +// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references + +// Tabler's additions on top of Bootstrap's `.nav` tokens. +// scss-docs-start nav-css-vars +$nav-tokens: () !default; +$nav-tokens: defaults( + ( + --nav-link-hover-bg: var(--hover-bg), + // Read by `.nav-vertical .nav-link.active` below; without it that rule's + // color declaration was invalid and the active link fell back to the + // inherited color. + --nav-link-active-color: $nav-link-active-color, + --nav-vertical-nested-margin-start: $nav-vertical-nested-margin-start, + --nav-vertical-nested-padding-start: $nav-vertical-nested-padding-start, + --nav-link-toggle-padding-x: $nav-link-toggle-padding-x, + --nav-link-icon-margin-end: $nav-link-icon-margin-end, + ), + $nav-tokens +); +// scss-docs-end nav-css-vars + +// stylelint-enable custom-property-no-missing-var-function + .nav { - --nav-link-hover-bg: var(--hover-bg); - // Read by `.nav-vertical .nav-link.active` below; without it that rule's - // color declaration was invalid and the active link fell back to the - // inherited color. - --nav-link-active-color: #{$nav-link-active-color}; - --nav-vertical-nested-margin-start: #{$nav-vertical-nested-margin-start}; - --nav-vertical-nested-padding-start: #{$nav-vertical-nested-padding-start}; - --nav-link-toggle-padding-x: #{$nav-link-toggle-padding-x}; - --nav-link-icon-margin-end: #{$nav-link-icon-margin-end}; + @include tokens($nav-tokens); font-size: var(--body-font-size); } @@ -28,7 +43,7 @@ .nav-link.active, .nav-item.show .nav-link { - font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-medium); color: var(--nav-link-active-color); } diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss index bee2743c7..110d0893c 100644 --- a/core/scss/ui/_pagination.scss +++ b/core/scss/ui/_pagination.scss @@ -1,13 +1,28 @@ @use '../config' as *; +// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references + +// Tabler's additions on top of Bootstrap's `.pagination` tokens. +// scss-docs-start pagination-css-vars +$pagination-tokens: () !default; +$pagination-tokens: defaults( + ( + --pagination-gap: $pagination-gap, + --pagination-link-min-width: $pagination-link-min-width, + --page-text-padding-x: $page-text-padding-x, + ), + $pagination-tokens +); +// scss-docs-end pagination-css-vars + +// stylelint-enable custom-property-no-missing-var-function + .pagination { + @include tokens($pagination-tokens); gap: var(--pagination-gap); margin: 0; line-height: var(--body-line-height); user-select: none; - --pagination-gap: #{$pagination-gap}; - --pagination-link-min-width: #{$pagination-link-min-width}; - --page-text-padding-x: #{$page-text-padding-x}; @include media-print() { display: none; @@ -62,7 +77,7 @@ color: var(--body-color); .page-link:hover & { - color: $link-color; + color: var(--link-color); } .page-item.disabled & { @@ -73,7 +88,7 @@ .pagination-outline { --pagination-border-color: var(--border-color); --pagination-disabled-border-color: var(--border-color); - --pagination-border-width: 1px; + --pagination-border-width: var(--border-width); } .pagination-circle { diff --git a/core/scss/ui/_patterns.scss b/core/scss/ui/_patterns.scss index 91212e617..454c55239 100644 --- a/core/scss/ui/_patterns.scss +++ b/core/scss/ui/_patterns.scss @@ -1,3 +1,4 @@ +@use 'sass:map'; @use '../config' as *; @mixin pattern-base($opacity: $pattern-opacity) { @@ -165,9 +166,9 @@ } // Color variants -@each $color, $value in $theme-colors { +@each $color in map.keys($theme-colors) { .bg-pattern-#{$color} { - --pattern-color: #{$value}; + --pattern-color: var(--#{$color}); } } diff --git a/core/scss/ui/_payments.scss b/core/scss/ui/_payments.scss index 4f0bcb156..da70dc3a4 100644 --- a/core/scss/ui/_payments.scss +++ b/core/scss/ui/_payments.scss @@ -10,7 +10,7 @@ font-style: normal; vertical-align: bottom; background: no-repeat center/100% 100%; - box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: var(--shadow-border); @include config.border-radius(var(--border-radius)); } diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss index 8a5a95368..5d08b96b6 100644 --- a/core/scss/ui/_ribbons.scss +++ b/core/scss/ui/_ribbons.scss @@ -42,9 +42,9 @@ $ribbon-tokens: defaults( min-height: var(--ribbon-min-size); padding: var(--ribbon-padding-y) var(--ribbon-padding-x); font-size: var(--ribbon-font-size); - font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-medium); line-height: 1; - color: $white; + color: var(--primary-fg); text-align: center; text-transform: uppercase; background: var(--primary); diff --git a/core/scss/ui/_segmented.scss b/core/scss/ui/_segmented.scss index 89958a5b2..a45fa8a44 100644 --- a/core/scss/ui/_segmented.scss +++ b/core/scss/ui/_segmented.scss @@ -34,12 +34,12 @@ $nav-segmented-tokens: defaults( list-style: none; background: var(--nav-bg); @include border-radius(calc(var(--nav-radius) + var(--nav-padding))); - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); + box-shadow: inset 0 0 0 var(--border-width) var(--border-color-translucent); .nav-link { display: inline-flex; flex-grow: 1; - gap: calc(#{$nav-segmented-link-gap} + var(--nav-link-gap)); + gap: var(--nav-link-gap); align-items: center; justify-content: center; min-width: calc(var(--nav-height) - 2 * var(--nav-padding)); @@ -53,7 +53,7 @@ $nav-segmented-tokens: defaults( white-space: nowrap; cursor: pointer; background: transparent; - border: 1px solid transparent; + border: var(--border-width) solid transparent; transition: background-color $transition-time, color $transition-time; diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss index 2d7a71a00..a59aef652 100644 --- a/core/scss/ui/_signature.scss +++ b/core/scss/ui/_signature.scss @@ -8,7 +8,7 @@ $signature-tokens: defaults( ( --signature-padding: var(--spacer-1), --signature-border-radius: var(--border-radius), - --signature-canvas-height: 12.5rem, + --signature-canvas-height: $signature-canvas-height, ), $signature-tokens ); diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss index 28f2c73a1..0813337da 100644 --- a/core/scss/ui/_stars.scss +++ b/core/scss/ui/_stars.scss @@ -7,7 +7,7 @@ display: inline-flex; font-size: $h5-font-size; - color: $gray-400; + color: var(--tertiary); .star:not(:first-child) { margin-inline-start: var(--stars-gap); diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss index 50b8726a7..8904e9203 100644 --- a/core/scss/ui/_steps.scss +++ b/core/scss/ui/_steps.scss @@ -10,6 +10,7 @@ $steps-tokens: () !default; $steps-tokens: defaults( ( --steps-color: $steps-color, + --steps-fg: var(--primary-fg), --steps-inactive-color: $steps-inactive-color, --steps-dot-size: $steps-dot-size, --steps-border-width: $steps-border-width, @@ -39,9 +40,11 @@ $steps-tokens: defaults( @each $name, $color in $extra-colors { .steps-#{$name} { --steps-color: var(--#{$name}); + --steps-fg: var(--#{$name}-fg); &-lt { --steps-color: var(--#{$name}-lt); + --steps-fg: var(--#{$name}); } } } @@ -97,7 +100,7 @@ $steps-tokens: defaults( justify-content: center; width: var(--steps-dot-size); height: var(--steps-dot-size); - color: var(--white); + color: var(--steps-fg); content: ''; /* rtl:ignore */ @@ -106,7 +109,7 @@ $steps-tokens: defaults( } &.active { - font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-medium); &::after { background: var(--steps-inactive-color); @@ -153,10 +156,6 @@ $steps-tokens: defaults( --steps-vertical-connector-gap: #{$steps-vertical-connector-gap}; flex-direction: column; - &.steps-counter { - --steps-dot-offset: #{$steps-dot-offset-counter}; - } - .step-item { min-height: auto; padding-inline-start: calc(var(--steps-dot-size) + var(--steps-vertical-padding-start)); diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss index 7cca74d94..20b11320c 100644 --- a/core/scss/ui/_switch-icon.scss +++ b/core/scss/ui/_switch-icon.scss @@ -121,7 +121,7 @@ .switch-icon-fade { .switch-icon-a, .switch-icon-b { - @include transition(opacity 0.5s); + @include transition(opacity $transition-time); } } @@ -129,7 +129,7 @@ .switch-icon-scale { .switch-icon-a, .switch-icon-b { - @include transition(opacity 0.5s, transform 0s 0.5s); + @include transition(opacity $transition-time, transform 0s $transition-time); } .switch-icon-b { @@ -139,7 +139,7 @@ &.active { .switch-icon-a, .switch-icon-b { - @include transition(opacity 0s, transform 0.5s); + @include transition(opacity 0s, transform $transition-time); } .switch-icon-b { @@ -156,7 +156,7 @@ .switch-icon-b { backface-visibility: hidden; transform-style: preserve-3d; - @include transition(opacity 0s 0.2s, transform 0.4s ease-in-out); + @include transition(opacity 0s 0.15s, transform $transition-time ease-in-out); } .switch-icon-a { diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss index 449e92af4..e89be3b53 100644 --- a/core/scss/ui/_tags.scss +++ b/core/scss/ui/_tags.scss @@ -33,7 +33,7 @@ $tag-tokens: defaults( padding: 0 var(--tag-padding-x); background: var(--bg-surface); - border: $border-width solid var(--border-color); + border: var(--border-width) solid var(--border-color); box-shadow: var(--shadow-input); @include border-radius(var(--border-radius)); diff --git a/core/scss/ui/_toasts.scss b/core/scss/ui/_toasts.scss index 2446f39e4..314638d28 100644 --- a/core/scss/ui/_toasts.scss +++ b/core/scss/ui/_toasts.scss @@ -1,8 +1,8 @@ +@use 'sass:map'; @use '../config' as *; .toast { border: $alert-border-width var(--border-style) $alert-border-color; - box-shadow: $alert-shadow; .toast-header { user-select: none; @@ -20,8 +20,8 @@ } } -@each $state, $value in $theme-colors { +@each $state in map.keys($theme-colors) { .toast-#{$state} { - --toast-color: #{$value}; + --toast-color: var(--#{$state}); } } diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss index 947677dcb..3adb402b2 100644 --- a/core/scss/ui/_type.scss +++ b/core/scss/ui/_type.scss @@ -87,7 +87,7 @@ blockquote { --blockquote-padding: #{$blockquote-padding}; --blockquote-paragraph-margin-bottom: #{$blockquote-paragraph-margin-bottom}; padding: var(--blockquote-padding) var(--blockquote-padding) var(--blockquote-padding); - border-inline-start: 2px var(--border-style) var(--border-color); + border-inline-start: $border-width-wide var(--border-style) var(--border-color); p { margin-bottom: var(--blockquote-paragraph-margin-bottom); @@ -282,7 +282,6 @@ $text-variants: ( text-decoration-thickness: 1px; text-decoration-color: $color; background: color-transparent($color, 0.04); - background: color-transparent($color, 4%); } } @@ -308,7 +307,7 @@ $text-variants: ( margin-bottom: var(--steps-margin-bottom); overflow: visible; counter-reset: step; - border-inline-start: 1px solid var(--border-color); + border-inline-start: var(--border-width) solid var(--border-color); h3 { counter-increment: step; @@ -323,15 +322,15 @@ $text-variants: ( width: var(--steps-item-size); height: var(--steps-item-size); margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2); - margin-top: 1px; + margin-top: var(--border-width); font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); - line-height: calc(var(--steps-item-size) - 2px); + line-height: calc(var(--steps-item-size) - 2 * var(--border-width)); color: var(--body-color); text-align: center; content: counter(step); background: var(--bg-surface); - border: 1px solid var(--border-color); + border: var(--border-width) solid var(--border-color); @include border-radius(var(--border-radius)); } } @@ -362,7 +361,7 @@ $callout-tokens: defaults( padding: var(--callout-padding-y) var(--callout-padding-x); margin-bottom: var(--callout-margin-bottom); background: var(--primary-lt); - border: 1px solid var(--primary-200); + border: var(--border-width) solid var(--primary-200); @include border-radius(var(--border-radius)); > :last-child { diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss index 0d06f7686..ade6bbc3e 100644 --- a/core/scss/ui/forms/_form-check.scss +++ b/core/scss/ui/forms/_form-check.scss @@ -37,7 +37,7 @@ Form check &.required { &::after { margin-inline-start: var(--form-check-label-required-gap); - color: $red; + color: var(--danger); content: '*'; } } diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss index 18b14f2f4..161908f0f 100644 --- a/core/scss/ui/forms/_form-colorinput.scss +++ b/core/scss/ui/forms/_form-colorinput.scss @@ -23,10 +23,10 @@ Color Input display: block; width: var(--form-colorinput-size); height: var(--form-colorinput-size); - color: $white; + color: var(--white); border: var(--border-width) var(--border-style) $input-border-color-translucent; @include border-radius(var(--border-radius)); - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-input); &::before { position: absolute; diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss index 4ce0e44fb..a3c64aa55 100644 --- a/core/scss/ui/forms/_form-imagecheck.scss +++ b/core/scss/ui/forms/_form-imagecheck.scss @@ -42,7 +42,7 @@ display: block; width: $form-check-input-width; height: $form-check-input-width; - color: $white; + color: var(--white); pointer-events: none; content: ''; user-select: none; diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss index 59fa02ebb..c30e81285 100644 --- a/core/scss/ui/forms/_form-selectgroup.scss +++ b/core/scss/ui/forms/_form-selectgroup.scss @@ -57,6 +57,7 @@ Select group &:hover { color: var(--body-color); + border-color: var(--border-active-color); } } diff --git a/docs/content/ui/components/list-group.mdx b/docs/content/ui/components/list-group.mdx index 22c47d6ca..e4ce71b07 100644 --- a/docs/content/ui/components/list-group.mdx +++ b/docs/content/ui/components/list-group.mdx @@ -125,7 +125,7 @@ Add `list-group-hoverable` to the container to highlight the row under the point
Change deprecated html tags
- +
@@ -243,7 +243,7 @@ This pattern joins several variants: a flush list inside a card, hoverable rows,
The last deploy did not finish
- +
diff --git a/docs/content/ui/components/trending.mdx b/docs/content/ui/components/trending.mdx index a0a4e9c42..9748297ae 100644 --- a/docs/content/ui/components/trending.mdx +++ b/docs/content/ui/components/trending.mdx @@ -13,11 +13,12 @@ classnames: desc: Rising value, paired with an arrow-up icon - class: text-red desc: Falling value, paired with an arrow-down icon - - class: text-muted + - class: text-secondary desc: No change, paired with a minus icon --- -import Example from '@components/Example.astro'; -import Icon from '@ui/Icon.astro'; + +import Example from '@components/Example.astro' +import Icon from '@ui/Icon.astro' ## Overview @@ -26,7 +27,10 @@ A trend indicator is a small inline element. It shows a number and an arrow next There is no dedicated class for it. Build it from utilities: `d-inline-flex` and `align-items-center` to keep the number and the icon in one line, `lh-1` to keep the line short, and a text color that matches the direction. - 25% + + {' '} + 25% {' '} + ## Variants @@ -35,16 +39,25 @@ There is no dedicated class for it. Build it from utilities: `d-inline-flex` and Use three states to describe the change. Pick the color and the icon together, so they always tell the same story. -| Change | Color | Icon | -| --- | --- | --- | -| Up | `text-green` | `arrow-up` | -| No change | `text-secondary` | `minus` | -| Down | `text-red` | `arrow-down` | +| Change | Color | Icon | +| --------- | ---------------- | ------------ | +| Up | `text-green` | `arrow-up` | +| No change | `text-secondary` | `minus` | +| Down | `text-red` | `arrow-down` | - 25% - 0% - -12% + + {' '} + 25% {' '} + + + {' '} + 0% {' '} + + + {' '} + -12% {' '} + ### Unit @@ -52,9 +65,18 @@ Use three states to describe the change. Pick the color and the icon together, s The unit is only text after the number. Use a percent sign, a currency, or no unit at all. - 8% - 4.2K - -3 + + {' '} + 8% {' '} + + + {' '} + 4.2K {' '} + + + {' '} + -3 {' '} + ### Size @@ -62,9 +84,18 @@ The unit is only text after the number. Use a percent sign, a currency, or no un The indicator takes the font size of its parent. Put it in a heading or use a text size utility to make it bigger or smaller. - 15% - 15% - 15% + + {' '} + 15% {' '} + + + {' '} + 15% {' '} + + + {' '} + 15% {' '} + ## Examples @@ -74,13 +105,16 @@ The indicator takes the font size of its parent. Put it in a heading or use a te Place the indicator after the number. Use `align-items-baseline` on the wrapper, so the number and the indicator sit on the same line. -
-
Today's sales
-
-
6,782
- 7% +
+
Today's sales
+
+
6,782
+ + {' '} + 7% {' '} + +
-
### In a stats card @@ -88,19 +122,22 @@ Place the indicator after the number. Use `align-items-baseline` on the wrapper, This is the most common place for the indicator. The value stays on the left and the change on the right. -
-
-
-
-
New clients
-
1,352
-
-
- -4% +
+
+
+
+
New clients
+
1,352
+
+
+ + {' '} + -4% {' '} + +
-
### In a table @@ -108,38 +145,47 @@ This is the most common place for the indicator. The value stays on the left and Use it in a table cell to compare rows quickly. - - - - - - - - - - - - - - - - - - - - - - - - - -
ProductSalesChange
Basic plan4,120 - 12% -
Pro plan2,043 - -7% -
Team plan986 - 0% -
+ + + + + + + + + + + + + + + + + + + + + + + + + +
ProductSalesChange
Basic plan4,120 + + {' '} + 12% {' '} + +
Pro plan2,043 + + {' '} + -7% {' '} + +
Team plan986 + + {' '} + 0% {' '} + +
## Accessibility diff --git a/preview/pages/2-step-verification-code.astro b/preview/pages/2-step-verification-code.astro index a843c74dd..2e3c0da80 100644 --- a/preview/pages/2-step-verification-code.astro +++ b/preview/pages/2-step-verification-code.astro @@ -7,10 +7,10 @@ import CardTitle from '@ui/CardTitle.astro' import OtpInput from '@ui/OtpInput.astro' --- - +
- Authenticate Your Account + Authenticate your account

Please confirm your account by entering the authorization code sent to +1 856-672-8552. diff --git a/preview/pages/2-step-verification.astro b/preview/pages/2-step-verification.astro index b28d27db2..1f9afa180 100644 --- a/preview/pages/2-step-verification.astro +++ b/preview/pages/2-step-verification.astro @@ -7,10 +7,10 @@ import flags from '@data/flags.json' import CardTitle from '@ui/CardTitle.astro' --- - +

- 2-Step Verification + 2-step verification - +
+1 diff --git a/preview/pages/all-elements.astro b/preview/pages/all-elements.astro index e765d925d..584af8f63 100644 --- a/preview/pages/all-elements.astro +++ b/preview/pages/all-elements.astro @@ -70,7 +70,7 @@ function greetUser(name) { }` --- - +
@@ -92,7 +92,7 @@ function greetUser(name) { This is a regular paragraph with bold text, italic text, and underlined text.

-

This is small muted text.

+

This is small muted text.

Primary text color

Success text color

Danger text color

@@ -109,7 +109,7 @@ function greetUser(name) {
-

Standard Buttons

+

Standard buttons

-

Button Sizes

+

Button sizes

- + + @@ -627,7 +627,7 @@ function greetUser(name) {
-
Modal Title
+
Modal title
@@ -657,7 +657,7 @@ function greetUser(name) {
- +
@@ -672,18 +672,18 @@ function greetUser(name) {
- + -

Basic Button Group

+

Basic button group

-

Button Toolbar

-
{xmrBtc} - {xmr.price} + {xmr.price}
- Volume: {xmr['volume-24h'].replace('$', '')} + Volume: {xmr['volume-24h'].replace('$', '')}
@@ -261,7 +261,7 @@ const operationCurrencies = currencies.slice(0, 20)
-

The final amount could change depending on current market conditions.

+

The final amount could change depending on current market conditions.

@@ -269,7 +269,7 @@ const operationCurrencies = currencies.slice(0, 20)
- Sell Orders + Sell orders @@ -300,7 +300,7 @@ const operationCurrencies = currencies.slice(0, 20)
- Buy Orders + Buy orders diff --git a/preview/pages/datatables.astro b/preview/pages/datatables.astro index 6970142b5..8a448b021 100644 --- a/preview/pages/datatables.astro +++ b/preview/pages/datatables.astro @@ -4,7 +4,6 @@ import { toUnixSeconds, formatLongDate } from '@shared/lib/date-format' import { randomNumber, randomDate } from '@shared/lib/pseudo-random' import Card from '@ui/Card.astro' import CardHeader from '@ui/CardHeader.astro' -import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' import CardSubtitle from '@ui/CardSubtitle.astro' import Progress from '@ui/Progress.astro' @@ -44,47 +43,45 @@ const valueNames = ['sort-name', 'sort-type', 'sort-city', 'sort-score', { attr: Click a column header to sort the rows by that value.
- -
- - - - - - - - - - - - - - { - rows.map(({ rc, progress, quantity, dateSeconds, dateLabel }) => ( - - - - - - - - + + )) + } + +
{rc.name}{rc.city}{rc.type}{rc.score} - {dateLabel} - {quantity} -
-
{progress}%
-
- -
+
+ + + + + + + + + + + + + + { + rows.map(({ rc, progress, quantity, dateSeconds, dateLabel }) => ( + + + + + + + + - - )) - } - -
{rc.name}{rc.city}{rc.type}{rc.score} + {dateLabel} + {quantity} +
+
{progress}%
+
+
-
-
- +
+
+
diff --git a/preview/pages/dropzone.astro b/preview/pages/dropzone.astro index 5c7e7e6e0..c9a613ca0 100644 --- a/preview/pages/dropzone.astro +++ b/preview/pages/dropzone.astro @@ -14,7 +14,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Basic Usage + Basic usage Drag a file in or click to browse — a single drop target for one upload. @@ -23,7 +23,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Multiple File Upload + Multiple file upload Accept and preview several files at once from the same drop target. @@ -32,7 +32,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Custom Dropzone + Custom dropzone Swap in your own label and helper text for the drop target. diff --git a/preview/pages/email-inbox.astro b/preview/pages/email-inbox.astro index b834eb70b..a056aa8dc 100644 --- a/preview/pages/email-inbox.astro +++ b/preview/pages/email-inbox.astro @@ -1,4 +1,5 @@ --- +import Empty from '@ui/Empty.astro' import Subheader from '@ui/Subheader.astro' import ButtonGroup from '@ui/ButtonGroup.astro' import DefaultLayout from '@shared/layouts/DefaultLayout.astro' @@ -16,7 +17,7 @@ import { formatShortDate } from '@shared/lib/date-format' import mails from '@data/mails.json' // Label colors shared by the folder sidebar and the dots in the message list. -const labelColors: Record = { Updates: 'info', Friends: 'warning', Family: 'success', Social: 'primary', Important: 'danger', Promotions: 'purple' } +const labelColors: Record = { Updates: 'azure', Friends: 'orange', Family: 'teal', Social: 'indigo', Important: 'pink', Promotions: 'purple' } --- @@ -37,7 +38,7 @@ const labelColors: Record = { Updates: 'info', Friends: 'warning Starred Snoozed Draft32 - Sent Mail + Sent mail Trash Important Spam @@ -99,7 +100,7 @@ const labelColors: Record = { Updates: 'info', Friends: 'warning
- Label as: + Label as Updates Social Promotions @@ -112,72 +113,72 @@ const labelColors: Record = { Updates: 'info', Friends: 'warning More
- Mark as Unread - Add to Tasks - Add Star + Mark as unread + Add to tasks + Add star Mute
-
- - { - mails.length > 0 ? ( - mails.map((mail) => ( - -
-
- -
-
- - - -
-
- - {mail.sender} - -
-
- - {mail.subject} - - – {mail.preview} -
-
- {mail.labels.map((label) => ( - - ))} -
-
-
- - - - - - - - - - - - -
-
-
{formatShortDate(new Date(mail.date))}
+ + { + mails.length > 0 ? ( + mails.map((mail) => ( + +
+
+
- - )) - ) : ( - No emails - ) - } - -
-
+
+ + + +
+
+ + {mail.sender} + +
+
+ + {mail.subject} + + – {mail.preview} +
+
+ {mail.labels.map((label) => ( + + ))} +
+
+
+ + + + + + + + + + + + +
+
+
{formatShortDate(new Date(mail.date))}
+
+ + )) + ) : ( + + + + ) + } + +
Showing 1 - {mails.length} of {mails.length} diff --git a/preview/pages/faq.astro b/preview/pages/faq.astro index 4b3f126b7..4fa360763 100644 --- a/preview/pages/faq.astro +++ b/preview/pages/faq.astro @@ -7,7 +7,7 @@ import HeaderActionsBreadcrumb from '@shared/components/layout/HeaderActionsBrea const categories = faq as { name: string; questions: { question: string }[] }[] --- - +
diff --git a/preview/pages/form-elements.astro b/preview/pages/form-elements.astro index a2cfb8f44..794245886 100644 --- a/preview/pages/form-elements.astro +++ b/preview/pages/form-elements.astro @@ -110,14 +110,14 @@ const rows = [
- Node.js Version + Node.js version The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect. - Learn more about Node.js Version + Learn more about Node.js version
@@ -135,8 +135,8 @@ const rows = [ - - + +
@@ -160,7 +160,7 @@ const rows = [
- +
@@ -193,82 +193,82 @@ const rows = [
- Edit Profile + Edit profile
-
-
-
+
+
+
-
+
- +
- +
- +
- + - +
Assertions
-
- - - - - - { - rows.map((row) => ( - - - - - - - )) - } - -
SourcePropertyComparisonTarget
- - - - - - - -
-
+
+ + + + + + { + rows.map((row) => ( + + + + + + + )) + } + +
SourcePropertyComparisonTarget
+ + + + + + + +
+
diff --git a/preview/pages/form-layout.astro b/preview/pages/form-layout.astro index a78735081..127f448f8 100644 --- a/preview/pages/form-layout.astro +++ b/preview/pages/form-layout.astro @@ -20,7 +20,7 @@ import DocsLink from '@ui/DocsLink.astro' const countries = flags as { name: string }[] --- - +
@@ -30,7 +30,7 @@ const countries = flags as { name: string }[]
- Basic Form + Basic form A minimal sign-up form with just the essentials.
@@ -47,8 +47,8 @@ const countries = flags as { name: string }[] - - + +
@@ -59,23 +59,23 @@ const countries = flags as { name: string }[]
- Example Form + Example form A contact form with a subject select and a message field.
- + - + - + @@ -83,7 +83,7 @@ const countries = flags as { name: string }[] -
+
@@ -98,7 +98,7 @@ const countries = flags as { name: string }[]
- Example Form with Icons + Example form with icons Prefix each field with an icon for a friendlier sign-up flow.
@@ -107,11 +107,11 @@ const countries = flags as { name: string }[]
-
+
-
+
@@ -154,19 +154,19 @@ const countries = flags as { name: string }[]
- Example Form + Example form A longer profile form grouped into personal info and address sections.
-

Personal Info

+

Personal info

- + - + @@ -202,13 +202,13 @@ const countries = flags as { name: string }[] - +
@@ -224,7 +224,7 @@ const countries = flags as { name: string }[]
diff --git a/preview/pages/illustrations.astro b/preview/pages/illustrations.astro index 341f7118a..c6ed143fb 100644 --- a/preview/pages/illustrations.astro +++ b/preview/pages/illustrations.astro @@ -80,7 +80,7 @@ const illustrationsData = Object.fromEntries(autodarkEntries.map(([key, svg]) => }
-
Skin color
+
Skin color
{ skinEntries.map((color, i) => ( @@ -94,7 +94,7 @@ const illustrationsData = Object.fromEntries(autodarkEntries.map(([key, svg]) => }
-
Select SVG illustration
+
Select SVG illustration
{ autodarkEntries.map(([key, svg], i) => ( diff --git a/preview/pages/inline-player.astro b/preview/pages/inline-player.astro index 0a4393217..cd3baa932 100644 --- a/preview/pages/inline-player.astro +++ b/preview/pages/inline-player.astro @@ -10,7 +10,7 @@ import DocsLink from '@ui/DocsLink.astro' type Provider = { 'title': string; 'type': string; 'id': string; 'embed-id': string | number } --- - +
{ diff --git a/preview/pages/logs.astro b/preview/pages/logs.astro index 4cbeaa148..6ef79c177 100644 --- a/preview/pages/logs.astro +++ b/preview/pages/logs.astro @@ -18,12 +18,12 @@ import { site } from '@shared/lib/site' 
GET {site.previewUrl}
-

Request Timing

+

Request timing

Effective URL            {site.previewUrl}
Redirect count           0
Name lookup time         3.4e-05
Connect time             0.000521
Pre-transfer time        0.0
Start-transfer time      0.0
App connect time         0.0
Redirect time            0.0
Total time               28.000601
Response code            0
Return keyword           operation_timedout
-

Response Headers

+

Response headers

HTTP/1.1 200 Connection established
@@ -37,7 +37,7 @@ import { site } from '@shared/lib/site'
-

Application Log

+

Application log

2024-01-15 14:23:45 [INFO] Application started successfully
 2024-01-15 14:23:46 [DEBUG] Database connection established
@@ -48,7 +48,7 @@ import { site } from '@shared/lib/site'
 2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms
-

Log Levels

+

Log levels

@@ -57,7 +57,7 @@ import { site } from '@shared/lib/site' -

Log Source

+

Log source

Application Server (prod-01)
 diff --git a/preview/pages/map-fullsize.astro b/preview/pages/map-fullsize.astro index 4fb67aeb0..f6cc2e24b 100644 --- a/preview/pages/map-fullsize.astro +++ b/preview/pages/map-fullsize.astro @@ -3,8 +3,8 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import CaptureScript from '@shared/components/CaptureScript.astro' --- - -

Full Size Map

+ +

Full-size map

diff --git a/preview/pages/maps-vector.astro b/preview/pages/maps-vector.astro index 667486da5..e1814217d 100644 --- a/preview/pages/maps-vector.astro +++ b/preview/pages/maps-vector.astro @@ -7,7 +7,7 @@ import CardTitle from '@ui/CardTitle.astro' import DocsLink from '@ui/DocsLink.astro' --- - +
diff --git a/preview/pages/marketing/about.astro b/preview/pages/marketing/about.astro index e348204fb..66dfb2a28 100644 --- a/preview/pages/marketing/about.astro +++ b/preview/pages/marketing/about.astro @@ -5,7 +5,7 @@ import MarketingLayout from '@shared/layouts/MarketingLayout.astro'
-

About Us

+

About us

Tabler is a digital firm specializing in website development. Our themes are employed by businesses of all scales, ranging from emerging startups to established public companies, to construct and oversee their online presence.

@@ -14,29 +14,29 @@ import MarketingLayout from '@shared/layouts/MarketingLayout.astro'
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/preview/pages/marketing/real-estate.astro b/preview/pages/marketing/real-estate.astro index c4bbc100b..2071a2f7b 100644 --- a/preview/pages/marketing/real-estate.astro +++ b/preview/pages/marketing/real-estate.astro @@ -31,7 +31,7 @@ const buildings = realEstate as Building[]
-
+
@@ -52,7 +52,7 @@ const buildings = realEstate as Building[] -
{building.price}
+
{building.price}
{building.address}, California USA
@@ -67,7 +67,7 @@ const buildings = realEstate as Building[]
- + See details
diff --git a/preview/pages/modals.astro b/preview/pages/modals.astro index e38324507..fb4c5c3ae 100644 --- a/preview/pages/modals.astro +++ b/preview/pages/modals.astro @@ -86,7 +86,7 @@ const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-

Scrollable modal

- +
diff --git a/preview/pages/navigation.astro b/preview/pages/navigation.astro index 8f576badb..0cecba64a 100644 --- a/preview/pages/navigation.astro +++ b/preview/pages/navigation.astro @@ -21,7 +21,7 @@ import DocsLink from '@ui/DocsLink.astro'
- +
diff --git a/preview/pages/onboarding.astro b/preview/pages/onboarding.astro index a2ba1ec90..e099e04e6 100644 --- a/preview/pages/onboarding.astro +++ b/preview/pages/onboarding.astro @@ -49,7 +49,7 @@ import PageTitle from '@ui/PageTitle.astro'
- Team size + Team size
- What are you planning to use this for? + What are you planning to use this for?
@@ -89,7 +89,7 @@ import PageTitle from '@ui/PageTitle.astro'
- How did you hear about us? + How did you hear about us?
diff --git a/preview/pages/patterns.astro b/preview/pages/patterns.astro index bbecac14e..175697655 100644 --- a/preview/pages/patterns.astro +++ b/preview/pages/patterns.astro @@ -28,7 +28,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line { patterns.map((pattern) => (
- + .bg-pattern-{pattern}
)) @@ -46,7 +46,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line { patternColors.map((color) => (
- + .bg-pattern-{color}
)) @@ -64,7 +64,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line { patternSizes.map((size) => (
- + .bg-pattern-{size}
)) @@ -82,7 +82,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line { patternOpacities.map((opacity) => (
- + .bg-pattern-opacity-{opacity}
)) @@ -98,38 +98,38 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line Combine pattern type, color, size, and opacity on real layouts.
- + .bg-pattern-transparent
- + .bg-pattern-grid.bg-pattern-primary.bg-pattern-lg.bg-pattern-opacity-light
- + .bg-pattern-diagonal-stripes-2.bg-pattern-azure.bg-pattern-opacity-dark
- + .bg-pattern-dots.bg-pattern-red.bg-pattern-sm.bg-pattern-opacity-darker
-
- - - Card with .bg-pattern-diagonal. - - -
-
- - - Card with a primary grid and .bg-pattern-opacity-light. - - -
+
+ + + Card with .bg-pattern-diagonal. + + +
+
+ + + Card with a primary grid and .bg-pattern-opacity-light. + + +
diff --git a/preview/pages/pay.astro b/preview/pages/pay.astro index cd1e3b4c5..1e7af6aac 100644 --- a/preview/pages/pay.astro +++ b/preview/pages/pay.astro @@ -42,7 +42,7 @@ import Icon from '@ui/Icon.astro'
- +
@@ -52,7 +52,7 @@ import Icon from '@ui/Icon.astro'
- + diff --git a/preview/pages/payment-providers.astro b/preview/pages/payment-providers.astro index 80314eb59..1c16374a4 100644 --- a/preview/pages/payment-providers.astro +++ b/preview/pages/payment-providers.astro @@ -13,7 +13,7 @@ import DocsLink from '@ui/DocsLink.astro' const providers = payments as { name: string; logo: string }[] --- - +
diff --git a/preview/pages/pricing-table.astro b/preview/pages/pricing-table.astro index e93c17109..faeeb2b2d 100644 --- a/preview/pages/pricing-table.astro +++ b/preview/pages/pricing-table.astro @@ -16,18 +16,18 @@ import Subheader from '@ui/Subheader.astro'
Choose an affordable plan that comes with the best features to engage your audience, create customer loyalty and increase sales.
-
Starter
-
$0
+ Starter +
$0
Choose plan -
Professional
-
$9
- Choose plan + Professional +
$9
+ Choose plan -
Business
-
$16
+ Business +
$16
Choose plan @@ -92,7 +92,7 @@ import Subheader from '@ui/Subheader.astro' Choose plan - Choose plan + Choose plan Choose plan diff --git a/preview/pages/profile.astro b/preview/pages/profile.astro index 90fb17c93..c0aa01d05 100644 --- a/preview/pages/profile.astro +++ b/preview/pages/profile.astro @@ -20,7 +20,7 @@ import UserInfo from '@shared/components/cards/UserInfo.astro'
- About Me + About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid beatae eaque eius esse fugit, hic id illo itaque modi molestias nemo perferendis quae rerum soluta. Blanditiis laborum minima molestiae molestias nemo nesciunt nisi pariatur quae sapiente ut. Aut consectetur doloremque, diff --git a/preview/pages/progress.astro b/preview/pages/progress.astro index 7a67a55d6..8839e13be 100644 --- a/preview/pages/progress.astro +++ b/preview/pages/progress.astro @@ -184,7 +184,7 @@ import DocsLink from '@ui/DocsLink.astro'

- Steps Progress + Steps progress Mark discrete steps instead of a continuous percentage.
@@ -198,7 +198,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Progress Background + Progress background Fill a row's background as the progress indicator itself.
@@ -212,7 +212,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Progress Background Colors + Progress background colors Pair a light background fill with a matching accent color.
@@ -226,7 +226,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Progress Description + Progress description Pair a label and percentage with the bar for more context.
@@ -240,7 +240,7 @@ import DocsLink from '@ui/DocsLink.astro'
- Progress Description Sizes + Progress description sizes Scale the labeled progress bar from progress-sm to progress-xl.
diff --git a/preview/pages/screenshot.astro b/preview/pages/screenshot.astro index a75da874e..cffd99568 100644 --- a/preview/pages/screenshot.astro +++ b/preview/pages/screenshot.astro @@ -9,17 +9,12 @@ import { site } from '@shared/lib/site' .screenshot { width: 1024px; height: 768px; - background: var(--tblr-bg-surface-tertiary) linear-gradient(to top left, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); + background: var(--tblr-bg-surface-tertiary); position: relative; } .screenshot-card { padding: 64px; - border-radius: 16px; - box-shadow: - 0 1px 1px 0 rgba(0, 0, 0, 0.02), - 0 8px 24px -4px rgba(0, 0, 0, 0.04), - 0 24px 40px -8px rgba(0, 0, 0, 0.1); } .screenshot-logo { @@ -50,7 +45,7 @@ import { site } from '@shared/lib/site' -
+
{ site.themeColors.map((color) => ( diff --git a/preview/pages/scroll-spy.astro b/preview/pages/scroll-spy.astro index 1b4368945..3a9ef796a 100644 --- a/preview/pages/scroll-spy.astro +++ b/preview/pages/scroll-spy.astro @@ -63,7 +63,7 @@ const articles: [string, string[]][] = [ ] --- - +
diff --git a/preview/pages/settings.astro b/preview/pages/settings.astro index 521d48a15..427ed9d9d 100644 --- a/preview/pages/settings.astro +++ b/preview/pages/settings.astro @@ -15,9 +15,9 @@ const person = requireIndex(people, 0)
-

My Account

+

My account

- Profile Details + Profile details
@@ -25,10 +25,10 @@ const person = requireIndex(people, 0)
- Business Profile + Business profile
- + diff --git a/preview/pages/sortable.astro b/preview/pages/sortable.astro index 3607ade55..c1dedcf38 100644 --- a/preview/pages/sortable.astro +++ b/preview/pages/sortable.astro @@ -65,14 +65,12 @@ const sections = [ Drag to reorder items within a single list.
- - - Element A - Element B - Element C - Element D - - + + Element A + Element B + Element C + Element D +
diff --git a/preview/pages/stars-rating.astro b/preview/pages/stars-rating.astro index 3db98c93f..7c4fc67c8 100644 --- a/preview/pages/stars-rating.astro +++ b/preview/pages/stars-rating.astro @@ -8,7 +8,7 @@ import CardSubtitle from '@ui/CardSubtitle.astro' import DocsLink from '@ui/DocsLink.astro' --- - +
diff --git a/preview/pages/tasks-list.astro b/preview/pages/tasks-list.astro index 9a16fb4c9..a1814937e 100644 --- a/preview/pages/tasks-list.astro +++ b/preview/pages/tasks-list.astro @@ -34,7 +34,7 @@ const peopleList = people const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)) --- - +
{ @@ -43,7 +43,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)
{section.name} -
@@ -54,8 +54,8 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1) Name - Assigned To - Due Date + Assigned to + Due date Priority Actions @@ -91,7 +91,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1) {task['due-date']} ) : ( - — + — )} {task.priority === 'High' ? : task.priority === 'Medium' ? : task.priority === 'Low' ? : } @@ -122,7 +122,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1) - + No. - Invoice Subject + Invoice subject Client VAT No. Created diff --git a/shared/components/cards/MostVisitedPages.astro b/shared/components/cards/MostVisitedPages.astro index d4758688c..45be9f225 100644 --- a/shared/components/cards/MostVisitedPages.astro +++ b/shared/components/cards/MostVisitedPages.astro @@ -8,7 +8,7 @@ import { formatNumber } from '@shared/lib/string-format'
- Most Visited Pages + Most visited pages
diff --git a/shared/components/cards/PricingCard.astro b/shared/components/cards/PricingCard.astro index 9616edd2e..abd0299c2 100644 --- a/shared/components/cards/PricingCard.astro +++ b/shared/components/cards/PricingCard.astro @@ -1,19 +1,20 @@ --- // Feature names are a fixed list; the `features` string is split per-character into a 1/0 availability mask. import Icon from '@ui/Icon.astro' +import Subheader from '@ui/Subheader.astro' interface Props { price?: string users?: string | number category?: string features?: string - /** ribbon + button color, e.g. "green" */ + /** ribbon color of the featured plan, e.g. "green"; the button is always primary */ featuredColor?: string } const { price = '79', users = 10, category = 'Enterprise', features = '1000', featuredColor } = Astro.props -const featureNames = ['Sharing Tools', 'Design Tools', 'Private Messages', 'Twitter API'] +const featureNames = ['Sharing tools', 'Design tools', 'Private messages', 'Twitter API'] const availableFeatures = features.split('') --- @@ -27,9 +28,9 @@ const availableFeatures = features.split('') }
-
{category}
+ {category} -
${price}
+
${price}
  • {users} Users
    • @@ -44,7 +45,7 @@ const availableFeatures = features.split('')
- Choose plan + Choose plan
diff --git a/shared/components/cards/PricingPlan.astro b/shared/components/cards/PricingPlan.astro index 20bf4c2ed..3b8e885ad 100644 --- a/shared/components/cards/PricingPlan.astro +++ b/shared/components/cards/PricingPlan.astro @@ -9,29 +9,29 @@ import Button from '@ui/Button.astro'
Professional
$199
-
/ month
+
/ month
  • -
    Unlimited Target Audience
    +
    Unlimited target audience
  • -
    1 User Account
    +
    1 user account
  • -
    100+ Video Tuts
    +
    100+ video tutorials
  • -
    Public Displays
    +
    Public displays
-

This plan is perfect for small businesses and startups. It includes all the features you need to get started.

+

This plan is perfect for small businesses and startups. It includes all the features you need to get started.

-
diff --git a/shared/components/cards/ProfileContact.astro b/shared/components/cards/ProfileContact.astro index 9679075bc..90b1a8526 100644 --- a/shared/components/cards/ProfileContact.astro +++ b/shared/components/cards/ProfileContact.astro @@ -20,7 +20,7 @@ const color = 'yellow'
-
+
diff --git a/shared/components/cards/RecentActivity.astro b/shared/components/cards/RecentActivity.astro index 523dcc274..a3e4f7442 100644 --- a/shared/components/cards/RecentActivity.astro +++ b/shared/components/cards/RecentActivity.astro @@ -7,14 +7,14 @@ import crmDashboard from '@data/crm-dashboard.json' const activity = crmDashboard.recent_activity --- -
+
{activity.title} {activity.view_all_text}
-
+
{ activity.items.map((item) => ( diff --git a/shared/components/cards/SmallStats.astro b/shared/components/cards/SmallStats.astro index 57c0ae137..00d6b1bb5 100644 --- a/shared/components/cards/SmallStats.astro +++ b/shared/components/cards/SmallStats.astro @@ -26,7 +26,7 @@ interface Props { const { icon, color, lt, title, description, class: className, id, personId, chartType = 'line', chartPosition = 'right', chartData, smallIcon, descriptionValue, descriptionValueColor } = Astro.props const chartColor = color ?? 'primary' -const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'avatar', 'avatar-square'] +const avatarClass = [color ? (lt ? `bg-${color}-lt` : `bg-${color} text-${color}-fg`) : '', 'avatar', 'avatar-square'] ---
diff --git a/shared/components/cards/SocialTraffic.astro b/shared/components/cards/SocialTraffic.astro index 365d2c07d..2db74e7b1 100644 --- a/shared/components/cards/SocialTraffic.astro +++ b/shared/components/cards/SocialTraffic.astro @@ -10,7 +10,7 @@ const services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest
- Social Media Traffic + Social media traffic
diff --git a/shared/components/cards/Sponsor.astro b/shared/components/cards/Sponsor.astro index 31e68e85e..fda492ede 100644 --- a/shared/components/cards/Sponsor.astro +++ b/shared/components/cards/Sponsor.astro @@ -9,7 +9,7 @@ interface Props { const { rtl = false } = Astro.props --- - +
-
Help Tabler Grow and Thrive
+
Help Tabler grow and thrive

Sponsor Tabler and help us make a difference!

diff --git a/shared/components/cards/TasksDue.astro b/shared/components/cards/TasksDue.astro index 271d640a8..4c21602bb 100644 --- a/shared/components/cards/TasksDue.astro +++ b/shared/components/cards/TasksDue.astro @@ -1,4 +1,5 @@ --- +import Badge from '@ui/Badge.astro' import CardActions from '@ui/CardActions.astro' import Icon from '@ui/Icon.astro' import ListGroup from '@ui/ListGroup.astro' @@ -13,11 +14,11 @@ const tasks = crmDashboard.tasks_due
{tasks.title} - {tasks.badge} +
diff --git a/shared/components/cards/TeamLeaderboard.astro b/shared/components/cards/TeamLeaderboard.astro index a80579c2d..68b25c423 100644 --- a/shared/components/cards/TeamLeaderboard.astro +++ b/shared/components/cards/TeamLeaderboard.astro @@ -24,7 +24,7 @@ const leaderboard = crmDashboard.leaderboard leaderboard.items.map((item, index) => (
-
{index + 1}
+
{index + 1}
diff --git a/shared/components/cards/TopDeals.astro b/shared/components/cards/TopDeals.astro index d13f79636..843304b85 100644 --- a/shared/components/cards/TopDeals.astro +++ b/shared/components/cards/TopDeals.astro @@ -14,11 +14,11 @@ const deals = crmDashboard.top_deals Top deals diff --git a/shared/components/cards/Weather.astro b/shared/components/cards/Weather.astro index 392c70693..c25e46b05 100644 --- a/shared/components/cards/Weather.astro +++ b/shared/components/cards/Weather.astro @@ -30,7 +30,7 @@ const { city = 'Warsaw', temperature = 20, color = 'blue', icon = 'cloud-rain',
-
{temperature}°
+
{temperature}°
diff --git a/shared/components/cards/Welcome.astro b/shared/components/cards/Welcome.astro index ed1af1d6e..798b5675c 100644 --- a/shared/components/cards/Welcome.astro +++ b/shared/components/cards/Welcome.astro @@ -13,7 +13,7 @@ import Progress from '@ui/Progress.astro'
- Today's Sales + Today's sales
6,782
@@ -24,7 +24,7 @@ import Progress from '@ui/Progress.astro'
- Growth Rate + Growth rate
78,4%
@@ -39,33 +39,20 @@ import Progress from '@ui/Progress.astro' You are winner!

You've been selected as our lucky winner for completing 100 orders this month! Click below to claim your exclusive prize and enjoy the benefits!

-
diff --git a/shared/components/cards/charts/ActiveUsers2.astro b/shared/components/cards/charts/ActiveUsers2.astro index 1dcd1e411..2d458dcf9 100644 --- a/shared/components/cards/charts/ActiveUsers2.astro +++ b/shared/components/cards/charts/ActiveUsers2.astro @@ -6,7 +6,7 @@ import Trending from '@ui/Trending.astro'
- Active Users + Active users
25,782
diff --git a/shared/components/cards/charts/PipelineFunnel.astro b/shared/components/cards/charts/PipelineFunnel.astro index 480b4420d..1c639730f 100644 --- a/shared/components/cards/charts/PipelineFunnel.astro +++ b/shared/components/cards/charts/PipelineFunnel.astro @@ -22,7 +22,7 @@ const funnel = crmDashboard.pipeline_funnel
-
{item.count}
+
{item.count}
{item.amount}
diff --git a/shared/components/cards/charts/TotalUsers.astro b/shared/components/cards/charts/TotalUsers.astro index 98b497e38..68857b48d 100644 --- a/shared/components/cards/charts/TotalUsers.astro +++ b/shared/components/cards/charts/TotalUsers.astro @@ -6,7 +6,7 @@ import Trending from '@ui/Trending.astro'
- Total Users + Total users
75,782
diff --git a/shared/components/cards/form/Payment.astro b/shared/components/cards/form/Payment.astro index a879e9259..2388e6a39 100644 --- a/shared/components/cards/form/Payment.astro +++ b/shared/components/cards/form/Payment.astro @@ -9,16 +9,16 @@ import FormGroup from '@ui/FormGroup.astro'
- Payment Method + Payment method All transactions are secure and encrypted - +
- + Enter your 16-digit number. @@ -67,7 +67,7 @@ import FormGroup from '@ui/FormGroup.astro'
- Billing Address + Billing address The billing address associated with your payment method
diff --git a/shared/components/cards/music/TracksList.astro b/shared/components/cards/music/TracksList.astro index bd03b11bb..79b102c9b 100644 --- a/shared/components/cards/music/TracksList.astro +++ b/shared/components/cards/music/TracksList.astro @@ -17,7 +17,7 @@ const items = tracks.slice(0, 12) items.map((track, index) => (
-
{index + 1}
+
{index + 1}
{track.name}
@@ -28,7 +28,7 @@ const items = tracks.slice(0, 12)
{millisecondsToMinutes(track.duration_ms)}
+ Top pages + +
+
diff --git a/shared/components/demo/DropdownMenuAll.astro b/shared/components/demo/DropdownMenuAll.astro index 82504f37e..d5f1a6695 100644 --- a/shared/components/demo/DropdownMenuAll.astro +++ b/shared/components/demo/DropdownMenuAll.astro @@ -40,7 +40,7 @@ const peopleItems = people.slice(0, 3) { peopleItems.map((person) => ( )) } diff --git a/shared/components/demo/MapVector.astro b/shared/components/demo/MapVector.astro index aed8de681..cf522e3c5 100644 --- a/shared/components/demo/MapVector.astro +++ b/shared/components/demo/MapVector.astro @@ -53,7 +53,7 @@ const mapOptions = data regionStyle: { initial: { fill: 'var(--tblr-bg-surface-secondary)', - stroke: data.filled ? '#fff' : 'var(--tblr-border-color)', + stroke: data.filled ? 'var(--tblr-bg-surface)' : 'var(--tblr-border-color)', strokeWidth: data.filled ? 1 : 2, }, }, @@ -68,7 +68,7 @@ const mapOptions = data markerStyle: { initial: { r: 4, - stroke: '#fff', + stroke: 'var(--tblr-bg-surface)', opacity: 1, strokeWidth: 3, strokeOpacity: 0.5, @@ -85,7 +85,7 @@ const mapOptions = data lineStyle: { strokeDasharray: '4 4', animation: true, - stroke: 'rgba(98, 105, 118, .75)', + stroke: 'color-mix(in srgb, var(--tblr-secondary) 75%, transparent)', strokeWidth: 0.5, }, } diff --git a/shared/components/demo/Table.astro b/shared/components/demo/Table.astro index 709e8796a..acd68c449 100644 --- a/shared/components/demo/Table.astro +++ b/shared/components/demo/Table.astro @@ -48,8 +48,8 @@ const tableClasses = ['table', 'table-vcenter', mobile && 'table-mobile-md', car {avatars ? (
Page
-
- +
+
{person.full_name}
diff --git a/shared/components/demo/ThemeSettings.astro b/shared/components/demo/ThemeSettings.astro index ab17ba780..87abdb686 100644 --- a/shared/components/demo/ThemeSettings.astro +++ b/shared/components/demo/ThemeSettings.astro @@ -44,7 +44,7 @@ const presetSvg = (values: Partial>) => { } /** Marks drawn inside an accent-colored navigation shape. */ -const onAccent = 'rgba(255, 255, 255, 0.7)' +const onAccent = 'color-mix(in srgb, var(--tblr-primary-fg) 70%, transparent)' /** A content card: the page's own surface with a border, lines inside. */ const card = (x: number, y: number, w: number, h: number) => `` + lines(x + 6, y + 7, [w * 0.6, w * 0.8, w * 0.4].map(Math.round), border, 9) /** A scrollbar thumb on the right edge, at the top or scrolled down. */ diff --git a/shared/components/demo/Timeline.astro b/shared/components/demo/Timeline.astro index 56bd6f85f..9de742f02 100644 --- a/shared/components/demo/Timeline.astro +++ b/shared/components/demo/Timeline.astro @@ -33,7 +33,7 @@ const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
2 hrs ago
-

+3 New Products were added!

+

+3 new products were added!

Congratulations!

@@ -53,7 +53,7 @@ const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
1 day ago
-

+290 Page Likes

+

+290 page likes

This is great, keep it up!

@@ -63,7 +63,7 @@ const timelinePhoto = (i: number) => requireIndex(timelinePhotos, i)
2 days ago
-

+3 Friend Requests

+

+3 friend requests

{avatarPeople.map((person) => )}
diff --git a/shared/components/demo/Toast.astro b/shared/components/demo/Toast.astro index 620406063..2122ad07f 100644 --- a/shared/components/demo/Toast.astro +++ b/shared/components/demo/Toast.astro @@ -18,8 +18,8 @@ const person = requireIndex(people, 2) ---