@webority/theme 0.81.0 → 0.82.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/purge-safelist.json +0 -1
- package/dist/webority-brand-signal.css +1 -1
- package/dist/webority-theme.css +1 -1
- package/package.json +1 -1
- package/scss/_brand-signal.scss +7 -8
- package/scss/_components.scss +12 -10
- package/scss/_tokens.scss +14 -8
- package/scss/_variables.scss +2 -2
- package/scss/_wui-aliases.scss +7 -0
- package/scss/wui/_card.scss +3 -0
- package/scss/wui/_carousel.scss +1 -1
- package/scss/wui/_chart.scss +2 -2
- package/scss/wui/_choice.scss +17 -19
- package/scss/wui/_command-palette.scss +3 -3
- package/scss/wui/_controls.scss +51 -43
- package/scss/wui/_data.scss +17 -19
- package/scss/wui/_display.scss +38 -54
- package/scss/wui/_file-viewer.scss +1 -1
- package/scss/wui/_flow.scss +2 -2
- package/scss/wui/_interaction.scss +55 -2
- package/scss/wui/_lightbox.scss +1 -1
- package/scss/wui/_media.scss +11 -10
- package/scss/wui/_navigation.scss +8 -5
- package/scss/wui/_notification-center.scss +2 -2
- package/scss/wui/_overlays.scss +2 -2
- package/scss/wui/_rating.scss +1 -1
- package/scss/wui/_rich-text.scss +1 -1
- package/scss/wui/_score-scale.scss +1 -1
- package/scss/wui/_shell-parts.scss +4 -4
- package/scss/wui/_shell.scss +2 -2
- package/scss/wui/_shortcuts.scss +1 -1
- package/scss/wui/_sortable.scss +1 -1
- package/scss/wui/_split-view.scss +1 -1
- package/scss/wui/_toolbar.scss +3 -3
- package/scss/wui/_typography.scss +4 -5
- package/scss/wui/_utilities.scss +1 -1
- package/scss/wui/_workspace.scss +6 -6
package/README.md
CHANGED
|
@@ -134,7 +134,7 @@ wash (`wui/interaction`, `wui/menu-motion`), so check its hover and press states
|
|
|
134
134
|
`dist/webority-brand-signal.css` (export `@webority/theme/css/brand-signal`, source `scss/_brand-signal.scss`)
|
|
135
135
|
re-points the theme to the Webority company palette: violet #4A0FBF primary, ink #16093A headings, tint
|
|
136
136
|
#F1EBFF, pink #B517C8 for unread counts only, muted text #6A6A6A, a dark set on pure black #000 with neutral
|
|
137
|
-
grey surfaces and violet #A98BFF kept for accents, and the Webority Serif 600 face for page
|
|
137
|
+
grey surfaces and violet #A98BFF kept for accents, and the Webority Serif 600 face for page and result titles at 24px and above. It is never imported by
|
|
138
138
|
the default theme (check-theme-exports asserts the default dist has no #4A0FBF).
|
|
139
139
|
|
|
140
140
|
Load it once, after the theme: React `import "@webority/theme/css/brand-signal"`; Razor
|
|
@@ -261,9 +261,9 @@ Anti-over-correction checklist. When thinning the package (e.g. marketing extrac
|
|
|
261
261
|
- Theme colors + `wui-brand-primary`; body/text/surface/border ramps (incl. AA tertiary)
|
|
262
262
|
- Radius ladder that differs from Bootstrap; spacer map extensions (6+)
|
|
263
263
|
- Status ramps: fills **and** `-text` / danger-strong for AA
|
|
264
|
-
- Control heights (`--wui-control-height
|
|
264
|
+
- Control heights (`--wui-control-height*`: sm 32, md 36, lg 44; md is 44 on phone-width and touch screens) and one disabled opacity (`--wui-disabled-opacity`); flat in-page elevation; overlay shadows only
|
|
265
265
|
- Z-index scale (`--wui-z-*`); dark-mode `--bs-*` / RGB bridges
|
|
266
|
-
- Focus: no input glow (`$input-focus-box-shadow: none`); brand border
|
|
266
|
+
- Focus: no input glow (`$input-focus-box-shadow: none`); fields keep a soft brand border and also draw the shared keyboard ring
|
|
267
267
|
|
|
268
268
|
### One skin on Bootstrap classes (not a second kit)
|
|
269
269
|
|
package/dist/purge-safelist.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@font-face{font-family:"Webority Serif";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/serif/WeboritySerif-DemiBold.woff2") format("woff2")}:root{--wui-signal-violet: #4A0FBF;--wui-signal-violet-hover: #3D0CA0;--wui-signal-tint: #F1EBFF;--wui-signal-ink: #16093A;--wui-signal-heading: #4C1D95;--wui-signal-pink: #B517C8;--wui-signal-dark-fill: #5A22D6;--wui-signal-dark-fill-hover: #6B35E6;--bs-font-sans-serif: "Webority Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--bs-body-font-family: var(--bs-font-sans-serif);--wui-font-display: "Webority Serif", Georgia, "Times New Roman", serif;--wui-primary: #4A0FBF;--wui-primary-hover: #3D0CA0;--wui-primary-pressed: #340A88;--wui-primary-50: #8B66E6;--wui-primary-30: #B9A2F2;--wui-primary-20: #D9CBFA;--wui-primary-15: #E6DCFD;--wui-primary-10: #F1EBFF;--wui-primary-5: #F8F5FF;--wui-primary-text: #FFFFFF;--wui-primary-ink: #4A0FBF;--wui-accent-dark: #340A88;--wui-surface-soft: #F1EBFF;--wui-surface-violet: #E6DCFD;--wui-surface-violet-soft: #F8F5FF;--wui-hero-gradient: radial-gradient(ellipse 120% 80% at 50% 30%, #8B66E6 0%, #4A0FBF 35%, #3D0CA0 75%, #16093A 100%);--wui-cta-gradient: radial-gradient(ellipse 120% 100% at 50% 50%, #2B1150 0%, #16093A 60%, #0E0626 100%);--wui-text-heading: #16093A;--wui-text-1: #2B2B2B;--wui-text-2: #5A5A5A;--wui-text-3: #6A6A6A;--wui-text-4: #9A9A9A;--wui-text-5: #CFC9DE;--wui-ink: #16093A;--wui-bg-page: #F8F6FD;--wui-bg-light: #FFFFFF;--wui-bg-elevated: #FBFAFE;--wui-bg-muted: #F3EFFB;--wui-field-bg: #FBFAFE;--wui-border-light: #E8E4F2;--wui-border-soft: #F3F0FA;--wui-progress-track: #E8E4F2;--wui-neutral-border-dark: #E8E4F2;--wui-neutral-bg-dark: #F3EFFB;--wui-shadow-overlay: 0 8px 28px -6px rgba(22, 9, 58, 0.16);--wui-shadow-overlay-lg: 0 24px 60px -16px rgba(22, 9, 58, 0.30);--wui-dark-bg-page: #000000;--wui-dark-bg-elevated: #0F0F0F;--wui-dark-bg-surface: #161616;--wui-dark-bg-muted: #1E1E1E;--wui-dark-border: #2A2A2A;--wui-dark-border-strong: #333333;--wui-dark-progress-track: #333333;--wui-dark-text: #EDEDED;--wui-dark-text-muted: #C0C0C0;--wui-dark-text-subtle: #A0A0A0;--wui-dark-primary: #A98BFF;--wui-dark-primary-hover: #BFA6FF;--bs-primary: #4A0FBF;--bs-primary-rgb: 74, 15, 191;--bs-link-color: #4A0FBF;--bs-link-color-rgb: 74, 15, 191;--bs-link-hover-color: #3D0CA0;--bs-link-hover-color-rgb: 61, 12, 160;--bs-focus-ring-color: rgba(74, 15, 191, 0.3)}.btn-primary{--bs-btn-color: #fff;--bs-btn-bg: #4A0FBF;--bs-btn-border-color: #4A0FBF;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #3D0CA0;--bs-btn-hover-border-color: #3D0CA0;--bs-btn-focus-shadow-rgb: 74, 15, 191;--bs-btn-active-color: #fff;--bs-btn-active-bg: #340A88;--bs-btn-active-border-color: #340A88;--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #4A0FBF;--bs-btn-disabled-border-color: #4A0FBF}.btn-outline-primary{--bs-btn-color: var(--color-primary-ink);--bs-btn-border-color: var(--color-primary);--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #4A0FBF;--bs-btn-hover-border-color: #4A0FBF;--bs-btn-active-color: #fff;--bs-btn-active-bg: #340A88;--bs-btn-active-border-color: #340A88;--bs-btn-focus-shadow-rgb: 74, 15, 191}.form-check-input:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.page-title,.
|
|
1
|
+
@font-face{font-family:"Webority Serif";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/serif/WeboritySerif-DemiBold.woff2") format("woff2")}:root{--wui-signal-violet: #4A0FBF;--wui-signal-violet-hover: #3D0CA0;--wui-signal-tint: #F1EBFF;--wui-signal-ink: #16093A;--wui-signal-heading: #4C1D95;--wui-signal-pink: #B517C8;--wui-signal-dark-fill: #5A22D6;--wui-signal-dark-fill-hover: #6B35E6;--bs-font-sans-serif: "Webority Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--bs-body-font-family: var(--bs-font-sans-serif);--wui-font-display: "Webority Serif", Georgia, "Times New Roman", serif;--wui-primary: #4A0FBF;--wui-primary-hover: #3D0CA0;--wui-primary-pressed: #340A88;--wui-primary-50: #8B66E6;--wui-primary-30: #B9A2F2;--wui-primary-20: #D9CBFA;--wui-primary-15: #E6DCFD;--wui-primary-10: #F1EBFF;--wui-primary-5: #F8F5FF;--wui-primary-text: #FFFFFF;--wui-primary-ink: #4A0FBF;--wui-accent-dark: #340A88;--wui-surface-soft: #F1EBFF;--wui-surface-violet: #E6DCFD;--wui-surface-violet-soft: #F8F5FF;--wui-hero-gradient: radial-gradient(ellipse 120% 80% at 50% 30%, #8B66E6 0%, #4A0FBF 35%, #3D0CA0 75%, #16093A 100%);--wui-cta-gradient: radial-gradient(ellipse 120% 100% at 50% 50%, #2B1150 0%, #16093A 60%, #0E0626 100%);--wui-text-heading: #16093A;--wui-text-1: #2B2B2B;--wui-text-2: #5A5A5A;--wui-text-3: #6A6A6A;--wui-text-4: #9A9A9A;--wui-text-5: #CFC9DE;--wui-ink: #16093A;--wui-bg-page: #F8F6FD;--wui-bg-light: #FFFFFF;--wui-bg-elevated: #FBFAFE;--wui-bg-muted: #F3EFFB;--wui-field-bg: #FBFAFE;--wui-border-light: #E8E4F2;--wui-border-soft: #F3F0FA;--wui-progress-track: #E8E4F2;--wui-neutral-border-dark: #E8E4F2;--wui-neutral-bg-dark: #F3EFFB;--wui-shadow-overlay: 0 8px 28px -6px rgba(22, 9, 58, 0.16);--wui-shadow-overlay-lg: 0 24px 60px -16px rgba(22, 9, 58, 0.30);--wui-dark-bg-page: #000000;--wui-dark-bg-elevated: #0F0F0F;--wui-dark-bg-surface: #161616;--wui-dark-bg-muted: #1E1E1E;--wui-dark-border: #2A2A2A;--wui-dark-border-strong: #333333;--wui-dark-progress-track: #333333;--wui-dark-text: #EDEDED;--wui-dark-text-muted: #C0C0C0;--wui-dark-text-subtle: #A0A0A0;--wui-dark-primary: #A98BFF;--wui-dark-primary-hover: #BFA6FF;--bs-primary: #4A0FBF;--bs-primary-rgb: 74, 15, 191;--bs-link-color: #4A0FBF;--bs-link-color-rgb: 74, 15, 191;--bs-link-hover-color: #3D0CA0;--bs-link-hover-color-rgb: 61, 12, 160;--bs-focus-ring-color: rgba(74, 15, 191, 0.3)}.btn-primary{--bs-btn-color: #fff;--bs-btn-bg: #4A0FBF;--bs-btn-border-color: #4A0FBF;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #3D0CA0;--bs-btn-hover-border-color: #3D0CA0;--bs-btn-focus-shadow-rgb: 74, 15, 191;--bs-btn-active-color: #fff;--bs-btn-active-bg: #340A88;--bs-btn-active-border-color: #340A88;--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #4A0FBF;--bs-btn-disabled-border-color: #4A0FBF}.btn-outline-primary{--bs-btn-color: var(--color-primary-ink);--bs-btn-border-color: var(--color-primary);--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #4A0FBF;--bs-btn-hover-border-color: #4A0FBF;--bs-btn-active-color: #fff;--bs-btn-active-bg: #340A88;--bs-btn-active-border-color: #340A88;--bs-btn-focus-shadow-rgb: 74, 15, 191}.form-check-input:checked{background-color:var(--color-primary);border-color:var(--color-primary)}.page-title,.result-title{font-family:var(--wui-font-display);font-weight:600;font-style:normal;letter-spacing:-0.01em;color:var(--color-text)}.page-header-sm .page-title,.page-header.page-header-bar .page-title{font-family:inherit}:root[data-theme=dark],:root[data-bs-theme=dark]{--wui-signal-heading: #C4AEFF;--color-primary-soft: color-mix(in srgb, #FFFFFF 8%, transparent);--color-primary-text: #16093A;--color-progress-label: #16093A;--bs-body-bg-rgb: 0, 0, 0;--bs-body-color-rgb: 237, 237, 237;--bs-emphasis-color-rgb: 237, 237, 237;--bs-secondary-color-rgb: 192, 192, 192;--bs-tertiary-color-rgb: 160, 160, 160;--bs-secondary-bg-rgb: 22, 22, 22;--bs-tertiary-bg-rgb: 30, 30, 30;--bs-border-color-rgb: 42, 42, 42;--bs-link-color: #A98BFF;--bs-link-color-rgb: 169, 139, 255;--bs-link-hover-color: #BFA6FF;--bs-link-hover-color-rgb: 191, 166, 255;--bs-focus-ring-color: rgba(169, 139, 255, 0.4)}:root[data-theme=dark] .btn-primary,:root[data-bs-theme=dark] .btn-primary{--bs-btn-bg: #5A22D6;--bs-btn-border-color: #5A22D6;--bs-btn-hover-bg: #6B35E6;--bs-btn-hover-border-color: #6B35E6;--bs-btn-active-bg: #4A0FBF;--bs-btn-active-border-color: #4A0FBF;--bs-btn-disabled-bg: #5A22D6;--bs-btn-disabled-border-color: #5A22D6}:root[data-theme=dark] .btn-outline-primary,:root[data-bs-theme=dark] .btn-outline-primary{--bs-btn-hover-bg: #5A22D6;--bs-btn-hover-border-color: #5A22D6}:root[data-theme=dark] .form-check-input:checked,:root[data-bs-theme=dark] .form-check-input:checked{background-color:#5a22d6;border-color:#5a22d6}:root[data-theme=dark] :where(.stepper:not(.wizard-stepper)),:root[data-bs-theme=dark] :where(.stepper:not(.wizard-stepper)){--wui-step-accent-fg: #16093A}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .struct-card.checked,:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .tpg-arrow:hover:not(:disabled),:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .tpg-page:hover:not(.is-active),:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .u-action:hover:not(:disabled),:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .tbl-empty-icon,:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .u-avatar,:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .wui-file-viewer-audio-art{background:var(--color-primary-soft)}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .wui-calendar-view-btn[aria-pressed=true],:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .compare-table td.is-highlight{background:color-mix(in srgb, #FFFFFF 8%, var(--color-surface))}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .table-ledger tbody tr.is-selected:hover{--bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent)}:where(:root[data-theme=dark],:root[data-bs-theme=dark]) .table-ledger tbody tr.is-selected>:first-child{box-shadow:inset 3px 0 0 0 var(--color-primary),inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))}@media(prefers-color-scheme: dark){:root[data-theme=auto]{--wui-signal-heading: #C4AEFF;--color-primary-soft: color-mix(in srgb, #FFFFFF 8%, transparent);--color-primary-text: #16093A;--color-progress-label: #16093A;--bs-body-bg-rgb: 0, 0, 0;--bs-body-color-rgb: 237, 237, 237;--bs-emphasis-color-rgb: 237, 237, 237;--bs-secondary-color-rgb: 192, 192, 192;--bs-tertiary-color-rgb: 160, 160, 160;--bs-secondary-bg-rgb: 22, 22, 22;--bs-tertiary-bg-rgb: 30, 30, 30;--bs-border-color-rgb: 42, 42, 42;--bs-link-color: #A98BFF;--bs-link-color-rgb: 169, 139, 255;--bs-link-hover-color: #BFA6FF;--bs-link-hover-color-rgb: 191, 166, 255;--bs-focus-ring-color: rgba(169, 139, 255, 0.4)}:root[data-theme=auto] .btn-primary{--bs-btn-bg: #5A22D6;--bs-btn-border-color: #5A22D6;--bs-btn-hover-bg: #6B35E6;--bs-btn-hover-border-color: #6B35E6;--bs-btn-active-bg: #4A0FBF;--bs-btn-active-border-color: #4A0FBF;--bs-btn-disabled-bg: #5A22D6;--bs-btn-disabled-border-color: #5A22D6}:root[data-theme=auto] .btn-outline-primary{--bs-btn-hover-bg: #5A22D6;--bs-btn-hover-border-color: #5A22D6}:root[data-theme=auto] .form-check-input:checked{background-color:#5a22d6;border-color:#5a22d6}:root[data-theme=auto] :where(.stepper:not(.wizard-stepper)){--wui-step-accent-fg: #16093A}:where(:root[data-theme=auto]) .struct-card.checked,:where(:root[data-theme=auto]) .tpg-arrow:hover:not(:disabled),:where(:root[data-theme=auto]) .tpg-page:hover:not(.is-active),:where(:root[data-theme=auto]) .u-action:hover:not(:disabled),:where(:root[data-theme=auto]) .tbl-empty-icon,:where(:root[data-theme=auto]) .u-avatar,:where(:root[data-theme=auto]) .wui-file-viewer-audio-art{background:var(--color-primary-soft)}:where(:root[data-theme=auto]) .wui-calendar-view-btn[aria-pressed=true],:where(:root[data-theme=auto]) .compare-table td.is-highlight{background:color-mix(in srgb, #FFFFFF 8%, var(--color-surface))}:where(:root[data-theme=auto]) .table-ledger tbody tr.is-selected:hover{--bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent)}:where(:root[data-theme=auto]) .table-ledger tbody tr.is-selected>:first-child{box-shadow:inset 3px 0 0 0 var(--color-primary),inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)))}}
|