@webority/theme 0.27.2 → 0.28.0
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 +2 -2
- package/dist/purge-safelist.json +2 -0
- 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 +52 -19
- package/scss/wui/_flow.scss +76 -13
package/README.md
CHANGED
|
@@ -85,8 +85,8 @@ marketing partial). Prefer the SCSS chain above for brand-exact output.
|
|
|
85
85
|
|
|
86
86
|
`dist/webority-brand-signal.css` (export `@webority/theme/css/brand-signal`, source `scss/_brand-signal.scss`)
|
|
87
87
|
re-points the theme to the Webority company palette: violet #4A0FBF primary, ink #16093A headings, tint
|
|
88
|
-
#F1EBFF, pink #B517C8 for unread counts only, muted text #6A6A6A, a dark set on #
|
|
89
|
-
#A98BFF, and the Webority Serif 600 face for page, card, modal and empty-state titles. It is never imported by
|
|
88
|
+
#F1EBFF, pink #B517C8 for unread counts only, muted text #6A6A6A, a dark set on pure black #000 with neutral
|
|
89
|
+
grey surfaces and violet #A98BFF kept for accents, and the Webority Serif 600 face for page, card, modal and empty-state titles. It is never imported by
|
|
90
90
|
the default theme (check-theme-exports asserts the default dist has no #4A0FBF).
|
|
91
91
|
|
|
92
92
|
Load it once, after the theme: React `import "@webority/theme/css/brand-signal"`; Razor
|
package/dist/purge-safelist.json
CHANGED
|
@@ -991,6 +991,7 @@
|
|
|
991
991
|
"wui-sortable-live",
|
|
992
992
|
"wui-sparkline",
|
|
993
993
|
"wui-spin",
|
|
994
|
+
"wui-stepper-no-connectors",
|
|
994
995
|
"wui-struct-card-lg",
|
|
995
996
|
"wui-struct-card-no-check",
|
|
996
997
|
"wui-struct-card-sm",
|
|
@@ -1109,6 +1110,7 @@
|
|
|
1109
1110
|
"^wui-flag-",
|
|
1110
1111
|
"^wui-progress-",
|
|
1111
1112
|
"^wui-select-",
|
|
1113
|
+
"^wui-step-done-tone-",
|
|
1112
1114
|
"^wui-step-tone-",
|
|
1113
1115
|
"^wui-table-",
|
|
1114
1116
|
"^wui-topsearch-",
|
|
@@ -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-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: #
|
|
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-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);--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,.card-title,.wui-modal-title,.empty-state-title,.result-title{font-family:var(--wui-font-display);font-weight:600;font-style:normal;letter-spacing:-0.01em;color:var(--color-text)}: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]) .segmented{--segmented-selected-bg: 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]) .segmented{--segmented-selected-bg: 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)))}}
|