Skip to content

Commit

Permalink
feat(core): ✨ clean up state colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@alistair3149
alistair3149 committed Jul 1, 2024
1 parent c21a908 commit ff0a6ed
Show file tree
Hide file tree
Showing 46 changed files with 160 additions and 237 deletions.
22 changes: 2 additions & 20 deletions resources/skins.citizen.styles/common/cssvariables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,35 +30,21 @@
--color-surface-4__s: 10%;
--color-surface-4__l: 88%;

--delta-hover-state: 2%;

--color-surface-0: ~'hsl( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ) )';
--color-surface-1: ~'hsl( var( --color-primary__h ), var( --color-surface-1__s ), var( --color-surface-1__l ) )';
--color-surface-2: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), var( --color-surface-2__l ) )';
--color-surface-3: ~'hsl( var( --color-primary__h ), var( --color-surface-3__s ), var( --color-surface-3__l ) )';
--color-surface-4: ~'hsl( var( --color-primary__h ), var( --color-surface-4__s ), var( --color-surface-4__l ) )';

--color-surface-2--hover: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) + var( --delta-hover-state ) ) )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) - var( --delta-hover-state ) ) )';

--background-color-destructive: rgba( 221, 51, 51, 0.1 );
--background-color-success: rgba( 0, 175, 137, 0.1 );
--background-color-warning: rgba( 255, 204, 51, 0.1 );

--background-image-destructive: linear-gradient( var( --background-color-destructive ), var( --background-color-destructive ) );
--background-image-success: linear-gradient( var( --background-color-success ), var( --background-color-success ) );
--background-image-warning: linear-gradient( var( --background-color-warning ), var( --background-color-warning ) );
--color-surface-2--hover: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) + var( --delta-lightness-hover-state ) ) )';
--color-surface-2--active: ~'hsl( var( --color-primary__h ), var( --color-surface-2__s ), calc( var( --color-surface-2__l ) - var( --delta-lightness-hover-state ) ) )';

--box-shadow-card: @box-shadow-card;
--box-shadow-dialog: @box-shadow-dialog;

--font-grade: 0;

/* Foreground Colors */
--color-text-error: @color-text-error;
--color-text-warning: @color-text-warning;
--color-text-success: @color-text-success;

--color-syntax-red: @color-syntax-red;
--color-syntax-orange: @color-syntax-orange;
--color-syntax-yellow: @color-syntax-yellow;
Expand Down Expand Up @@ -158,10 +144,6 @@ a {
}

.theme-dark-old() {
--color-text-error: @dark-color-text-error;
--color-text-warning: @dark-color-text-warning;
--color-text-success: @dark-color-text-success;

--color-syntax-red: @color-syntax-red-dark;
--color-syntax-orange: @color-syntax-orange-dark;
--color-syntax-yellow: @color-syntax-yellow-dark;
Expand Down
11 changes: 5 additions & 6 deletions resources/skins.citizen.styles/common/features.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,14 @@
--color-surface-4__s: 15%;
--color-surface-4__l: 23%;

--delta-hover-state: 4%;

--color-emphasized: ~'hsl( var( --color-primary__h ), 80%, 95% )';
--color-base: ~'hsl( var( --color-primary__h ), 25%, 80% )';
--color-subtle: ~'hsl( var( --color-primary__h ), 25%, 65% )';

--background-color-progressive-subtle: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 15% )';
--background-color-progressive-subtle: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 10% )';
--background-color-destructive-subtle: #360003;
--background-color-warning-subtle: #251400;
--background-color-success-subtle: #001f12;
--background-color-button-quiet--hover: rgba( 255, 255, 255, 0.04 );
--background-color-button-quiet--active: rgba( 255, 255, 255, 0.08 );
--background-color-icon: ~'rgba( 255, 255, 255, var( --opacity-icon-base ) )';
Expand Down Expand Up @@ -65,9 +66,7 @@

--color-surface-4__l: 14%;

--delta-hover-state: 6%;

--shadow-strength: 0.04;
--shadow-strength: 0.06;
}

.skin-theme-clientpref-night {
Expand Down
6 changes: 3 additions & 3 deletions resources/skins.citizen.styles/skinning/content.body.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@
}

.error {
color: var( --color-text-error );
color: var( --color-destructive );
}

.warning {
color: var( --color-text-warning );
color: var( --color-base );
}

.success {
color: var( --color-text-success );
color: var( --color-success );
}
}
}
12 changes: 6 additions & 6 deletions resources/skins.citizen.styles/skinning/interface-message-box.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,18 @@
}

&-error {
background-color: var( --background-color-destructive );
border-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: var( --background-color-destructive-subtle );
}

&-warning {
background-color: var( --background-color-warning );
border-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
border-color: var( --background-color-warning-subtle );
}

&-success {
background-color: var( --background-color-success );
border-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
border-color: var( --background-color-success-subtle );
}
}

Expand Down
55 changes: 28 additions & 27 deletions resources/skins.citizen.styles/tokens.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
--background-color-icon: ~'rgba( 0, 0, 0, var( --opacity-icon-base ) )';
--background-color-icon--hover: ~'rgba( 0, 0, 0, var( --opacity-icon-base--hover ) )';
--background-color-icon--active: ~'rgba( 0, 0, 0, var( --opacity-icon-base--active ) )';

// Hover and active states are calculated by a modifier of the lightness value in HSL (e.g. hover: +2%, active: -2%)
--delta-lightness-hover-state: 4%;
// Used to calculate box shadow
--shadow-strength: 0.02;
--surface-shadow: var( --color-primary__h ), 10%, 20%;

Expand All @@ -29,23 +31,21 @@
--color-inverted: #fff;
--color-inverted-fixed: #fff;
--color-progressive: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), var( --color-primary__l ) )';
--color-progressive--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 1.2 ) )';
--color-progressive--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) * 0.8 ) )';
--color-progressive--hover: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) + var( --delta-lightness-hover-state ) ) )';
--color-progressive--active: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), calc( var( --color-primary__l ) - var( --delta-lightness-hover-state ) ) )';
--color-progressive--focus: var( --color-progressive );
--color-destructive: #d73333;
--color-destructive--hover: #ff4242;
--color-destructive--active: #b32424;
--color-destructive: #d60021;
--color-destructive--hover: #ef4444;
--color-destructive--active: #9c0015;
--color-destructive--focus: var( --color-progressive );
--color-visited: var( --color-link );
--color-destructive--visited: var( --color-destructive );
--color-error: var( --color-destructive );
--color-warning: #edab00;
--color-success: #14866d;
--color-warning: #c77f00;
--color-success: #009768;
--color-notice: var( --color-base );
/*
--color-content-added: #096450;
--color-content-removed: #b32424;
*/
--color-content-added: var( --color-success );
--color-content-removed: var( --color-destructive );
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 1;
--box-shadow-color-base: ~'hsla( var( --surface-shadow ), var( --shadow-strength ) )';
Expand All @@ -68,24 +68,22 @@
--background-color-progressive--active: var( --color-progressive--active );
--background-color-progressive--focus: var( --color-progressive );
--background-color-progressive-subtle: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 95% )';
/*
--background-color-destructive: #d73333;
--background-color-destructive--hover: #ff4242;
--background-color-destructive--active: #b32424;
*/
--background-color-destructive: var( --color-destructive );
--background-color-destructive--hover: var( --color-destructive--hover );
--background-color-destructive--active: var( --color-destructive--active );
--background-color-destructive--focus: var( --color-progressive );
--background-color-destructive-subtle: #fee2e2;
--background-color-error: var( --color-destructive );
--background-color-error--hover: var( --color-destructive--hover );
--background-color-error--active: var( --color-destructive--active );
--background-color-error-subtle: var( --background-color-destructive-subtle );
--background-color-warning-subtle: #fef3c7;
--background-color-success-subtle: #d1fae5;
/*
--background-color-destructive-subtle: #fee7e6;
--background-color-error: #d73333;
--background-color-error--hover: #ff4242;
--background-color-error--active: #b32424;
--background-color-error-subtle: #fee7e6;
--background-color-warning-subtle: #fef6e7;
--background-color-success-subtle: #d5fdf4;
--background-color-notice-subtle: #eaecf0;
--background-color-content-added: #afb6e9;
--background-color-content-removed: #fc3;
--background-color-notice-subtle: #d1fae5;
*/
--background-color-content-added: var( --background-color-success-subtle );
--background-color-content-removed: var( --background-color-destructive-subtle );
--background-color-backdrop-light: ~'hsla( var( --color-primary__h ), var( --color-surface-0__s ), var( --color-surface-0__l ), 0.65 )';
--background-color-backdrop-dark: rgba( 0, 0, 0, 0.65 );
/*
Expand Down Expand Up @@ -159,5 +157,8 @@
--color-primary: var( --color-progressive );
--color-primary--hover: var( --color-progressive--hover );
--color-primary--active: var( --color-progressive--active );
--color-text-error: var( --color-destructive );
--color-text-warning: var( --color-base );
--color-text-success: var( --color-success );
--opacity-icon-base--active: var( --opacity-icon-base--selected );
}
71 changes: 7 additions & 64 deletions resources/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,63 +85,6 @@
@color-syntax-violet-dark: #bb80b3;
@color-syntax-grey-dark: #676E95;

/**
* Based WikimediaUI (`wmui`) color palette
* See https://design.wikimedia.org/style-guide/visual-style_colors.html
* Don't use those variables directly, instead define your vars
* referring to them as applied further below.
*/

// @color-base0: #000; // = HSB 0°, 0%, 0%
@color-base10: #202122; // = HSB 210°, 6%, 13%
@color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
@color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
@color-base50: #a2a9b1; // = HSB 212°, 8%, 69%
@color-base70: #c8ccd1; // = HSB 213°, 4%, 82%
@color-base80: #eaecf0; // = HSB 220°, 3%, 94%
@color-base90: #f8f9fa; // = HSB 210°, 1%, 98%
@color-base100: #fff; // = HSB 0°, 0%, 100%

@color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
@color-accent50: #36c; // = HSB 220°, 75%, 80%
@color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%

@color-red30: #b32424; // = HSB 360°, 80%, 70%
@color-red50: #d33; // = HSB 360°, 77%, 87%
@color-red90: #fee7e6; // = HSB 3°, 9%, 100%

@color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
@color-yellow50: #fc3; // = HSB 45°, 80%, 100%
@color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%

@color-green30: #14866d; // = HSB 167°, 85%, 53%
@color-green50: #00af89; // = HSB 167°, 100%, 69%
@color-green90: #d5fdf4; // = HSB 166°, 16%, 99%

@color-accent50--lighten: #5b84d6;
@color-red50--lighten: #e35b5b;

@color-accent-30--darken: #26437f;

@background-color-overlay: rgba( 255, 255, 255, 0.95 ); //base100 95% opacity
@background-color-overlay--lighter: rgba( 255, 255, 255, 0.6 );

@background-color-primary--hover: @color-accent90;
@background-color-primary--active: rgba( 41, 98, 204, 0.1 );

/* Foreground colors */
/* color-base is deprecated */
@color-base: @color-base20;
@color-base--emphasized: @color-base10;
@color-base--subtle: @color-base30;

@color-primary: @color-accent50;
@color-primary--hover: @color-accent50--lighten;
@color-primary--active: @color-accent30;

@color-text-error: @color-red50;
@color-text-warning: @color-yellow30;
@color-text-success: @color-green30;

/* Z-Index */
// @z-index-base: 0; - WMUI
Expand Down Expand Up @@ -182,13 +125,6 @@
@box-shadow-card: 0 2.8px 2.2px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 12.5px 10px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px -4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 100px 80px -4px ~'hsla(var(--surface-shadow), var(--shadow-strength))';
@box-shadow-dialog: 0 2.8px 2.2px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 6.7px 5.3px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .01))', 0 12.5px 10px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 22.3px 17.9px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .02))', 0 41.8px 33.4px ~'hsla(var(--surface-shadow), calc(var(--shadow-strength) + .03))', 0 100px 80px ~'hsla(var(--surface-shadow), var(--shadow-strength))';

@dark-background-color-primary--hover: @color-accent30;
@dark-background-color-primary--active: @color-accent-30--darken;

@dark-color-text-error: @color-red50--lighten;
@dark-color-text-warning: @color-yellow50;
@dark-color-text-success: @color-green50;

/*
* Framework
*/
Expand All @@ -204,6 +140,13 @@
* Those styles should be updated to the new standard.
* After that we can remove all theses LESS variables.
*/
@color-base: #54595d;
@color-base--emphasized: #202122;
@color-base--subtle: #72777d;

@color-primary: #36c;
@color-primary--hover: #5b84d6;
@color-primary--active: #2a4b8d;

@dark-bg-10: #1d2129;
@dark-bg-20: #22262d;
Expand Down
14 changes: 7 additions & 7 deletions skinStyles/codex/codex.styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@
.cdx-button--type-quiet.cdx-button--action-destructive:enabled:hover,
.cdx-button--weight-quiet.cdx-button--action-destructive:enabled:hover {
color: var( --color-destructive--hover );
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}

.cdx-button--type-quiet.cdx-button--action-destructive:enabled:active,
Expand Down Expand Up @@ -489,18 +489,18 @@
}

.cdx-message--block.cdx-message--error {
background-color: var( --background-color-destructive );
border-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
border-color: var( --background-color-destructive-subtle );
}

.cdx-message--block.cdx-message--warning {
background-color: var( --background-color-warning );
border-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
border-color: var( --background-color-warning-subtle );
}

.cdx-message--block.cdx-message--success {
background-color: var( --background-color-success );
border-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
border-color: var( --background-color-success-subtle );
}

.cdx-radio__icon {
Expand Down
2 changes: 1 addition & 1 deletion skinStyles/extensions/ApprovedRevs/ext.ApprovedRevs.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
* Highlight approved rev in revision history
**/
.approved-revision {
background-color: var( --background-color-success ) !important;
background-color: var( --background-color-success-subtle ) !important;
}
}
2 changes: 1 addition & 1 deletion skinStyles/extensions/DiscussionTools/ext.discussionTools.init.styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
}

.ext-discussiontools-init-publishedcomment {
background-color: var( --background-color-success );
background-color: var( --background-color-success-subtle );
}

.ext-discussiontools-init-targetcomment {
Expand Down
8 changes: 4 additions & 4 deletions skinStyles/extensions/FlaggedRevs/ext.flaggedRevs.basic.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,15 +95,15 @@ span.flaggedrevs-icon {
}

.fr-pending-long2 {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}

.fr-pending-long3 {
background-color: var( --color-surface-4 );
}

.fr-unreviewed-unwatched {
background-color: var( --background-color-destructive );
background-color: var( --background-color-destructive-subtle );
}

.mw-fr-reviewlink {
Expand All @@ -130,11 +130,11 @@ span.flaggedrevs-icon {

.flaggedrevs-pending {
// HACK: Oh well it works sorta
background: var( --background-image-warning );
background: var( --background-color-warning-subtle );
}

.flaggedrevs-unreviewed {
background-color: var( --background-color-warning );
background-color: var( --background-color-warning-subtle );
}

#mw-fr-stablediff {
Expand Down
2 changes: 1 addition & 1 deletion skinStyles/extensions/Flow/ext.flow.ui.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
.flow-ui-canNotEditWidget {
&-active {
color: var( --color-base );
background: var( --background-color-warning );
background: var( --background-color-warning-subtle );

a {
color: var( --color-emphasized );
Expand Down
Loading

0 comments on commit ff0a6ed

Please sign in to comment.