@webority/theme 0.27.2 → 0.27.3
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/webority-brand-signal.css +1 -1
- package/package.json +1 -1
- package/scss/_brand-signal.scss +52 -19
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
|
|
@@ -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)))}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webority/theme",
|
|
3
|
-
"version": "0.27.
|
|
3
|
+
"version": "0.27.3",
|
|
4
4
|
"description": "Webority shared design system — Bootstrap 5.3 SCSS overrides, --wui-* tokens, and shared component CSS. The single source of brand chrome for React portals and Razor sites.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
package/scss/_brand-signal.scss
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
// Signal: an opt-in brand layer, a violet-primary palette with ink headings and a serif display face.
|
|
2
|
+
// Its dark mode is pure black with neutral grey surfaces; violet is kept for accents only.
|
|
2
3
|
//
|
|
3
4
|
// Loaded AFTER webority-theme.css; the default theme never contains these values. It re-points the
|
|
4
5
|
// --wui-* tokens, then overrides the few Bootstrap values the theme compiles as literals (button
|
|
@@ -74,16 +75,17 @@
|
|
|
74
75
|
--wui-shadow-overlay: 0 8px 28px -6px rgba(22, 9, 58, 0.16);
|
|
75
76
|
--wui-shadow-overlay-lg: 0 24px 60px -16px rgba(22, 9, 58, 0.30);
|
|
76
77
|
|
|
77
|
-
|
|
78
|
-
--wui-dark-bg-
|
|
79
|
-
--wui-dark-bg-
|
|
80
|
-
--wui-dark-bg-
|
|
81
|
-
--wui-dark-
|
|
82
|
-
--wui-dark-border
|
|
83
|
-
--wui-dark-
|
|
84
|
-
--wui-dark-
|
|
85
|
-
--wui-dark-text
|
|
86
|
-
--wui-dark-text-
|
|
78
|
+
// Dark mode is pure black and neutral grey; violet appears only on accents (fills, links, focus, selection marks).
|
|
79
|
+
--wui-dark-bg-page: #000000;
|
|
80
|
+
--wui-dark-bg-elevated: #0F0F0F;
|
|
81
|
+
--wui-dark-bg-surface: #161616;
|
|
82
|
+
--wui-dark-bg-muted: #1E1E1E;
|
|
83
|
+
--wui-dark-border: #2A2A2A;
|
|
84
|
+
--wui-dark-border-strong: #333333;
|
|
85
|
+
--wui-dark-progress-track: #333333;
|
|
86
|
+
--wui-dark-text: #EDEDED;
|
|
87
|
+
--wui-dark-text-muted: #C0C0C0;
|
|
88
|
+
--wui-dark-text-subtle: #A0A0A0;
|
|
87
89
|
--wui-dark-primary: #A98BFF;
|
|
88
90
|
--wui-dark-primary-hover: #BFA6FF;
|
|
89
91
|
|
|
@@ -146,18 +148,20 @@
|
|
|
146
148
|
|
|
147
149
|
@mixin wui-signal-dark {
|
|
148
150
|
--wui-signal-heading: #C4AEFF;
|
|
149
|
-
|
|
151
|
+
// Selected, hover and highlight fills are a neutral lift; the violet stays on the text, border
|
|
152
|
+
// or edge that marks the state. check-contrast.mjs mirrors the 8%; change them together.
|
|
153
|
+
--color-primary-soft: color-mix(in srgb, #FFFFFF 8%, transparent);
|
|
150
154
|
// Ink on the lilac fill (--color-primary): 8:1 or better.
|
|
151
155
|
--color-primary-text: #16093A;
|
|
152
156
|
--color-progress-label: #16093A;
|
|
153
|
-
--bs-body-bg-rgb:
|
|
154
|
-
--bs-body-color-rgb: 237,
|
|
155
|
-
--bs-emphasis-color-rgb: 237,
|
|
156
|
-
--bs-secondary-color-rgb:
|
|
157
|
-
--bs-tertiary-color-rgb:
|
|
158
|
-
--bs-secondary-bg-rgb:
|
|
159
|
-
--bs-tertiary-bg-rgb:
|
|
160
|
-
--bs-border-color-rgb:
|
|
157
|
+
--bs-body-bg-rgb: 0, 0, 0;
|
|
158
|
+
--bs-body-color-rgb: 237, 237, 237;
|
|
159
|
+
--bs-emphasis-color-rgb: 237, 237, 237;
|
|
160
|
+
--bs-secondary-color-rgb: 192, 192, 192;
|
|
161
|
+
--bs-tertiary-color-rgb: 160, 160, 160;
|
|
162
|
+
--bs-secondary-bg-rgb: 22, 22, 22;
|
|
163
|
+
--bs-tertiary-bg-rgb: 30, 30, 30;
|
|
164
|
+
--bs-border-color-rgb: 42, 42, 42;
|
|
161
165
|
--bs-link-color: #A98BFF;
|
|
162
166
|
--bs-link-color-rgb: 169, 139, 255;
|
|
163
167
|
--bs-link-hover-color: #BFA6FF;
|
|
@@ -189,6 +193,35 @@
|
|
|
189
193
|
:where(.stepper:not(.wizard-stepper)) {
|
|
190
194
|
--wui-step-accent-fg: #16093A;
|
|
191
195
|
}
|
|
196
|
+
|
|
197
|
+
// Components that mix their violet fill inline rather than through --color-primary-soft.
|
|
198
|
+
// :where(&) keeps each rule at the component's own specificity, so a tone variant still wins.
|
|
199
|
+
:where(&) .struct-card.checked,
|
|
200
|
+
:where(&) .tpg-arrow:hover:not(:disabled),
|
|
201
|
+
:where(&) .tpg-page:hover:not(.is-active),
|
|
202
|
+
:where(&) .u-action:hover:not(:disabled),
|
|
203
|
+
:where(&) .tbl-empty-icon,
|
|
204
|
+
:where(&) .u-avatar,
|
|
205
|
+
:where(&) .wui-file-viewer-audio-art {
|
|
206
|
+
background: var(--color-primary-soft);
|
|
207
|
+
}
|
|
208
|
+
:where(&) .wui-calendar-view-btn[aria-pressed="true"],
|
|
209
|
+
:where(&) .compare-table td.is-highlight {
|
|
210
|
+
background: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
|
|
211
|
+
}
|
|
212
|
+
:where(&) .segmented {
|
|
213
|
+
--segmented-selected-bg: color-mix(in srgb, #FFFFFF 8%, var(--color-surface));
|
|
214
|
+
}
|
|
215
|
+
:where(&) .table-ledger tbody tr.is-selected:hover {
|
|
216
|
+
--bs-table-bg-state: color-mix(in srgb, #FFFFFF 12%, transparent);
|
|
217
|
+
}
|
|
218
|
+
// A grey row alone reads as disabled; the violet edge says chosen. One step below the row status
|
|
219
|
+
// bar's specificity, so a status row keeps its own colour bar.
|
|
220
|
+
:where(&) .table-ledger tbody tr.is-selected > :first-child {
|
|
221
|
+
box-shadow:
|
|
222
|
+
inset 3px 0 0 0 var(--color-primary),
|
|
223
|
+
inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
|
|
224
|
+
}
|
|
192
225
|
}
|
|
193
226
|
|
|
194
227
|
:root[data-theme="dark"],
|