| 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 |
:root { |
| 23 |
--cs-color-accent: #2271b1; |
| 24 |
--cs-color-accent-hover: #0a4b78; |
| 25 |
--cs-color-text: #2c3337; |
| 26 |
--cs-color-text-muted: #646970; |
| 27 |
--cs-color-surface: #fff; |
| 28 |
--cs-color-surface-subtle: #f6f7f7; |
| 29 |
--cs-color-border: #c3c4c7; |
| 30 |
--cs-color-border-subtle: #dcdcde; |
| 31 |
--cs-control-height: 38px; |
| 32 |
--cs-control-radius: 5px; |
| 33 |
--cs-font-size-body: 14px; |
| 34 |
--cs-line-height-body: 1.5; |
| 35 |
} |
| 36 |
|
| 37 |
/* format: background-color [color] */ |
| 38 |
$badges: ( |
| 39 |
// 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, |
| 42 |
html: #cd4510, |
| 43 |
css: #9b59b6, |
| 44 |
js: #f7d67a #1c1f20, |
| 45 |
cond: #22826f, |
| 46 |
core: #4fa1a6, |
| 47 |
pro: #f7e8e3 #df9279, |
| 48 |
cloud: #009fb4, |
| 49 |
bundles: #50575e, |
| 50 |
cloud_search: #d27c00, |
| 51 |
private: #f7e6be #a27813, |
| 52 |
public: #dbebf7 $accent, |
| 53 |
success: #d3e8d1 #447340, |
| 54 |
failure: #fad7c1 #a24b16, |
| 55 |
info: #d2e6f4 #2b71a3, |
| 56 |
neutral: #f6f7f7 #646970, |
| 57 |
neutralDark: #e2e5e5 #6c7e7e, |
| 58 |
special: #dfc5ef #6e249c |
| 59 |
); |
| 60 |
$notices: ( |
| 61 |
success: #d3e9d3 #377a37, |
| 62 |
warning: #f2ebc3 #b0730a, |
| 63 |
error: #f8d7da #721c24, |
| 64 |
info: #d2e6f4 #2b71a3, |
| 65 |
neutral: #e2e5e5 #6c7e7e, |
| 66 |
special: #dfc5ef #6e249c |
| 67 |
); |
| 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 |
} |
| 88 |
|
