diff --git a/src/components/root.style.js b/src/components/root.style.js index 9ad614c78..25b2b6653 100644 --- a/src/components/root.style.js +++ b/src/components/root.style.js @@ -3,11 +3,6 @@ export default { selector: ':root', notEditable: true, validInnerComponents: [ - // These are purely for --parent--text et such to work - 'Text', - 'Link', - 'Border', - 'Underlay', 'Modals', 'Popover', diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 04a6dfbbd..9de47a7d8 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -264,7 +264,6 @@ export const init = ({ const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw const dynamicVars = computed[selector] || { - lowerLevelSelector, lowerLevelBackground, lowerLevelVirtualDirectives, lowerLevelVirtualDirectivesRaw @@ -284,8 +283,6 @@ export const init = ({ computed[selector] = computed[selector] || {} computed[selector].computedRule = computedRule computed[selector].dynamicVars = dynamicVars - computed[selector].virtualDirectives = computed[lowerLevelSelector]?.virtualDirectives || {} - computed[selector].virtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw || {} if (virtualComponents.has(combination.component)) { const virtualName = [ @@ -333,8 +330,8 @@ export const init = ({ intendedTextColor, newTextRule.directives.textAuto === 'preserve' ) - const virtualDirectives = { ...(computed[lowerLevelSelector].virtualDirectives || {}) } - const virtualDirectivesRaw = { ...(computed[lowerLevelSelector].virtualDirectivesRaw || {}) } + const virtualDirectives = computed[lowerLevelSelector].virtualDirectives || {} + const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw || {} // Storing color data in lower layer to use as custom css properties virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars) @@ -348,8 +345,12 @@ export const init = ({ selector: cssSelector.split(/ /g).slice(0, -1).join(' '), ...combination, directives: {}, - virtualDirectives, - virtualDirectivesRaw + virtualDirectives: { + [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars) + }, + virtualDirectivesRaw: { + [virtualName]: textColor + } } } else { computed[selector] = computed[selector] || {} diff --git a/static/styles/Breezy DX.piss b/static/styles/Breezy DX.piss index fcaa7a8eb..0203fec24 100644 --- a/static/styles/Breezy DX.piss +++ b/static/styles/Breezy DX.piss @@ -31,26 +31,14 @@ link: #1CA4F3; } -@palette.Panda { - bg: #EFF0F2; - fg: #292C32; - text: #1B1F22; - link: #1CA4F3; - accent: #1CA4F3; - cRed: #f41a51; - cBlue: #1CA4F3; - cGreen: #1af46e; - cOrange: #f4af1a; -} - Root { --badgeNotification: color | --cRed; --buttonDefaultHoverGlow: shadow | inset 0 0 0 1 --accent / 1; --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1; - --buttonDefaultShadow: shadow | inset 0 0 0 1 --parent--text / 0.35, 0 5 5 -5 #000000 / 0.35; + --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35; --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1; --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05; - --defaultInputBevel: shadow | inset 0 0 0 1 --parent--text / 0.35; + --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35; --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1; --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1; } @@ -79,13 +67,8 @@ Button:toggled:hover { background: $blend(--bg 0.3 --accent) } -Button { - background: --parent; -} - Input { - shadow: --defaultInputBevel; - background: --parent; + shadow: --defaultInputBevel } PanelHeader { @@ -95,7 +78,3 @@ PanelHeader { Tab:hover { shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow } - -Tab { - background: --parent; -}