shy-tokens.css (6641B)
1 /*== ShyFox Polish Tokens =========================================================================== 2 3 Design tokens for the visual-polish layer (shy-surfaces, shy-interactive, shy-menus, shy-urlbar and 4 content/shy-polish-content). Everything here is derived from the four colours ShyFox already picks up 5 from the active theme -- --bg-col, --tb-col, --bt-col, --pp-col -- plus the accent, --shy-color. 6 A personal palette therefore keeps full control: change the palette, the whole polish layer follows. 7 8 The layer as a whole can be switched off with `shyfox.disable.polish`, and the (more expensive) 9 backdrop blur alone with `shyfox.disable.blur`. 10 11 ===================================================================================================*/ 12 13 @media not -moz-pref("shyfox.disable.polish") { 14 15 :root { 16 17 /*-- material -------------------------------------------------------------------------------*/ 18 19 /* how opaque floating panels are; lower it for more of the page showing through */ 20 --shy-surface-opct: 84%; 21 22 --shy-glass-blur: 18px; 23 --shy-glass-saturate: 1.3; 24 25 /* panel fills */ 26 --shy-surface: color-mix(in srgb, var(--tb-col) var(--shy-surface-opct), transparent); 27 --shy-surface-deep: color-mix(in srgb, var(--bg-col) var(--shy-surface-opct), transparent); 28 --shy-surface-popup: color-mix(in srgb, var(--pp-col) var(--shy-surface-opct), transparent); 29 --shy-surface-raised: color-mix(in srgb, var(--tb-col) 92%, var(--bt-col)); 30 31 /* hairline borders; --pp-col is often too close to the fill to read as an edge */ 32 --shy-hairline: color-mix(in srgb, var(--bt-col) 13%, transparent); 33 --shy-hairline-strong: color-mix(in srgb, var(--bt-col) 22%, transparent); 34 35 /*-- elevation ------------------------------------------------------------------------------*/ 36 37 /* tint the shadow itself to warm or cool the whole layer */ 38 --shy-shadow-tint: #000000; 39 40 --shy-shadow-weak: color-mix(in srgb, var(--shy-shadow-tint) 10%, transparent); 41 --shy-shadow-medium: color-mix(in srgb, var(--shy-shadow-tint) 18%, transparent); 42 --shy-shadow-strong: color-mix(in srgb, var(--shy-shadow-tint) 30%, transparent); 43 44 --shy-elev-1: 0 1px 2px var(--shy-shadow-weak), 45 0 2px 6px var(--shy-shadow-weak); 46 --shy-elev-2: 0 2px 4px var(--shy-shadow-weak), 47 0 8px 20px var(--shy-shadow-medium); 48 --shy-elev-3: 0 4px 10px var(--shy-shadow-medium), 49 0 18px 48px var(--shy-shadow-strong); 50 51 /*-- accent ---------------------------------------------------------------------------------*/ 52 53 --shy-accent-weak: color-mix(in srgb, var(--shy-color) 12%, transparent); 54 --shy-accent-tint: color-mix(in srgb, var(--shy-color) 20%, transparent); 55 --shy-accent-strong: color-mix(in srgb, var(--shy-color) 34%, transparent); 56 --shy-accent-line: color-mix(in srgb, var(--shy-color) 70%, transparent); 57 58 --shy-focus-ring: 0 0 0 2px color-mix(in srgb, var(--shy-color) 55%, transparent); 59 --shy-accent-glow: 0 0 0 1px var(--shy-accent-line), 60 0 0 18px color-mix(in srgb, var(--shy-color) 22%, transparent); 61 62 /*-- neutral interaction states -------------------------------------------------------------*/ 63 64 --shy-hover-tint: color-mix(in srgb, var(--bt-col) 10%, transparent); 65 --shy-active-tint: color-mix(in srgb, var(--bt-col) 16%, transparent); 66 --shy-selected-tint: color-mix(in srgb, var(--bt-col) 22%, transparent); 67 68 /* text that is deliberately quieter than --bt-col */ 69 --shy-text-dim: color-mix(in srgb, var(--bt-col) 65%, transparent); 70 --shy-text-faint: color-mix(in srgb, var(--bt-col) 42%, transparent); 71 72 /*-- motion ---------------------------------------------------------------------------------*/ 73 74 --shy-ease: cubic-bezier(0.22, 1, 0.36, 1); /* reveals: fast out, gentle settle */ 75 --shy-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); 76 --shy-dur-fast: 110ms; 77 --shy-dur: 190ms; 78 --shy-dur-slow: 260ms; 79 80 /* ShyFox's shared transition, re-timed. Same properties and duration as shy-variables.css so 81 panel geometry and the reveal timing do not change. backdrop-filter is deliberately absent: 82 transitioning it re-rasterizes the blurred backdrop on every frame of every panel reveal. */ 83 --transition: 84 top var(--trans-dur) var(--shy-ease), left var(--trans-dur) var(--shy-ease), 85 right var(--trans-dur) var(--shy-ease), bottom var(--trans-dur) var(--shy-ease), 86 margin var(--trans-dur) var(--shy-ease), opacity var(--trans-dur) var(--shy-ease), 87 background-color var(--trans-dur) var(--shy-ease), 88 box-shadow var(--trans-dur) var(--shy-ease), 89 border-color var(--trans-dur) var(--shy-ease); 90 91 /*-- scrollbars (browser chrome only) -------------------------------------------------------*/ 92 93 --shy-scrollbar: color-mix(in srgb, var(--bt-col) 28%, transparent) transparent; 94 } 95 96 /* Blur is the one effect worth turning off on slow hardware. */ 97 @media -moz-pref("shyfox.disable.blur") { 98 :root {--shy-glass-blur: 0px; --shy-surface-opct: 100%;} 99 } 100 101 /*-- shared keyframes -------------------------------------------------------------------------*/ 102 103 @keyframes shy-fade-in {from {opacity: 0} to {opacity: 1}} 104 105 @keyframes shy-pop-in { 106 from {opacity: 0; scale: 0.97;} 107 to {opacity: 1; scale: 1;} 108 } 109 110 @keyframes shy-drop-in { 111 from {opacity: 0; translate: 0 -6px;} 112 to {opacity: 1; translate: 0 0;} 113 } 114 115 @keyframes shy-shimmer { 116 from {background-position: -140% 0;} 117 to {background-position: 240% 0;} 118 } 119 120 /*-- graceful degradation --------------------------------------------------------------------- 121 122 These come last on purpose: the polish layer is imported after shy-compat.css, so it has to 123 restate the reduced-motion and forced-colours contracts rather than inherit them. 124 125 ---------------------------------------------------------------------------------------------*/ 126 127 @media (prefers-reduced-motion: reduce) { 128 :root { 129 --transition: none; 130 --shy-dur-fast: 0s; 131 --shy-dur: 0s; 132 --shy-dur-slow: 0s; 133 } 134 } 135 136 @media (forced-colors: active) { 137 :root { 138 --shy-glass-blur: 0px; 139 --shy-surface: Canvas; 140 --shy-surface-deep: Canvas; 141 --shy-surface-popup: Canvas; 142 --shy-surface-raised: Canvas; 143 --shy-hairline: CanvasText; 144 --shy-hairline-strong: CanvasText; 145 --shy-elev-1: none; 146 --shy-elev-2: none; 147 --shy-elev-3: none; 148 --shy-accent-glow: none; 149 --shy-focus-ring: 0 0 0 2px Highlight; 150 --shy-hover-tint: Highlight; 151 --shy-active-tint: Highlight; 152 --shy-selected-tint: Highlight; 153 --shy-text-dim: CanvasText; 154 --shy-text-faint: CanvasText; 155 } 156 } 157 158 } /* shyfox.disable.polish */