| @@ -1,61 +1,75 @@ | ||
| 1 | -@use 'sass:color'; | |
| 2 | - | |
| 3 | -$accent: #2271b1; | |
| 4 | -$primary: #03c7d2; | |
| 5 | -$secondary: #d46f4d; | |
| 6 | -$outline: #9e9e9e; | |
| 7 | -$brand-discord: #5865f2; | |
| 8 | -$brand-facebook: #3b5998; | |
| 9 | -$cloud: #00bcd4; | |
| 10 | -$cloud-update: #ff9800; | |
| 11 | - | |
| 12 | -// Plugin admin control tokens, applied to native form controls on all plugin | |
| 13 | -// screens regardless of WordPress version (see common/_wp-admin.scss). | |
| 14 | -$accent-hover: #0a4b78; | |
| 15 | -$control-border: #c3c4c7; | |
| 16 | -$control-text: #2c3337; | |
| 17 | -$control-height: 38px; | |
| 18 | -$control-radius: 5px; | |
| 19 | - | |
| 20 | -// Runtime design tokens. Sass variables keep compile-time helpers available; | |
| 21 | -// custom properties expose the approved system to every rendered component. | |
| 22 | 1 | :root { |
| 23 | 2 | --cs-color-accent: #2271b1; |
| 24 | 3 | --cs-color-accent-hover: #0a4b78; |
| 4 | + --cs-color-accent-subtle: #c9e1f5; | |
| 5 | + --cs-color-primary: #03c7d2; | |
| 6 | + --cs-color-primary-hover: #0ca0a9; | |
| 7 | + --cs-color-secondary: #d46f4d; | |
| 25 | 8 | --cs-color-text: #2c3337; |
| 9 | + --cs-color-text-secondary: #50575e; | |
| 26 | 10 | --cs-color-text-muted: #646970; |
| 11 | + --cs-color-text-subtle: #787c82; | |
| 12 | + --cs-color-text-disabled: #a7aaad; | |
| 27 | 13 | --cs-color-surface: #fff; |
| 28 | 14 | --cs-color-surface-subtle: #f6f7f7; |
| 15 | + --cs-color-surface-muted: #f0f0f1; | |
| 16 | + --cs-color-surface-info: #f0f6fc; | |
| 29 | 17 | --cs-color-border: #c3c4c7; |
| 30 | 18 | --cs-color-border-subtle: #dcdcde; |
| 19 | + --cs-color-info: #72aee6; | |
| 20 | + --cs-color-success: #00a32a; | |
| 21 | + --cs-color-warning: #dba617; | |
| 22 | + --cs-color-error: #d63638; | |
| 23 | + --cs-cloud-status-public-color: #64baba; | |
| 24 | + --cs-cloud-status-private-color: #cc96fb; | |
| 25 | + --cs-cloud-status-unverified-color: #ea835e; | |
| 26 | + --cs-cloud-status-ai-verified-color: #1cabcf; | |
| 27 | + --cs-cloud-status-pro-verified-color: #41a269; | |
| 28 | + --cs-tooltip-background-color: rgb(19 18 18 / 90%); | |
| 29 | + --cs-toolbar-block-size: 136px; | |
| 30 | + --cs-wpcontent-inline-start-indent: 20px; | |
| 31 | + --cs-sidebar-width: 320px; | |
| 32 | + --cs-sidebar-gap: 30px; | |
| 33 | + --cs-card-radius: 8px; | |
| 31 | 34 | --cs-control-height: 38px; |
| 32 | 35 | --cs-control-radius: 5px; |
| 36 | + --cs-feedback-modal-inline-size: 460px; | |
| 37 | + --cs-preview-modal-inline-size: min(900px, 90vw); | |
| 38 | + --cs-preview-modal-inset: 40px; | |
| 33 | 39 | --cs-font-size-body: 14px; |
| 34 | 40 | --cs-line-height-body: 1.5; |
| 41 | + --cs-direction-multiplier: 1; // LTR = 1, RTL = -1 | |
| 35 | 42 | } |
| 36 | 43 | |
| 44 | +html[dir="rtl"], | |
| 45 | +body.rtl { | |
| 46 | + --cs-direction-multiplier: -1; | |
| 47 | +} | |
| 48 | + | |
| 37 | 49 | /* format: background-color [color] */ |
| 38 | 50 | $badges: ( |
| 51 | + // Badge text colours meet WCAG AA (>= 4.5:1) against their own background. | |
| 39 | 52 | // php/html/cond darkened for WCAG AA — at least 4.5:1 against white 12px |
| 40 | - // bold text; php reuses $accent, html/cond keep hue at reduced lightness. | |
| 41 | - php: $accent, | |
| 53 | + // bold text; php reuses the accent token, html/cond keep hue at reduced lightness. | |
| 54 | + php: #2271b1, | |
| 42 | 55 | html: #cd4510, |
| 43 | 56 | css: #9b59b6, |
| 44 | 57 | js: #f7d67a #1c1f20, |
| 45 | 58 | cond: #22826f, |
| 59 | + revisions: #50575e, | |
| 46 | 60 | core: #4fa1a6, |
| 47 | 61 | pro: #f7e8e3 #df9279, |
| 48 | 62 | cloud: #009fb4, |
| 49 | 63 | bundles: #50575e, |
| 50 | 64 | cloud_search: #d27c00, |
| 51 | - private: #f7e6be #a27813, | |
| 52 | - public: #dbebf7 $accent, | |
| 53 | - success: #d3e8d1 #447340, | |
| 54 | - failure: #fad7c1 #a24b16, | |
| 55 | - info: #d2e6f4 #2b71a3, | |
| 65 | + private: #f7e6be #83610f, | |
| 66 | + public: #dbebf7 #206ba8, | |
| 67 | + success: #d3e8d1 #416e3d, | |
| 68 | + failure: #fad7c1 #9c4815, | |
| 69 | + info: #d2e6f4 #286896, | |
| 56 | 70 | neutral: #f6f7f7 #646970, |
| 57 | - neutralDark: #e2e5e5 #6c7e7e, | |
| 71 | + neutralDark: #e2e5e5 #596767, | |
| 58 | 72 | special: #dfc5ef #6e249c |
| 59 | 73 | ); |
| 60 | 74 | $notices: ( |
| 61 | 75 | success: #d3e9d3 #377a37, |
| @@ -64,24 +78,4 @@ | ||
| 64 | 78 | info: #d2e6f4 #2b71a3, |
| 65 | 79 | neutral: #e2e5e5 #6c7e7e, |
| 66 | 80 | special: #dfc5ef #6e249c |
| 67 | 81 | ); |
| 68 | - | |
| 69 | -@function contrasting-text-color($bg-color) { | |
| 70 | - $sum: 0; | |
| 71 | - | |
| 72 | - @each $color, $multiplier in (red 0.299, green 0.587, blue 0.114) { | |
| 73 | - $sum: $sum + color.channel($bg-color, $color, $space: rgb) * $multiplier; | |
| 74 | - } | |
| 75 | - | |
| 76 | - @return if ($sum > 186, #1c1f20, #fff) | |
| 77 | -} | |
| 78 | - | |
| 79 | -@mixin link-colors($color, $lightness: 15%) { | |
| 80 | - a { | |
| 81 | - color: $color; | |
| 82 | - | |
| 83 | - &:hover, &:active, &:focus { | |
| 84 | - color: color.adjust($color, $lightness: $lightness); | |
| 85 | - } | |
| 86 | - } | |
| 87 | -} | |
