diff --git a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-ai-disabled-ntp-screenshots-dark-darwin.png b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-ai-disabled-ntp-screenshots-dark-darwin.png index cc0a79d2e4..5655972b82 100644 Binary files a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-ai-disabled-ntp-screenshots-dark-darwin.png and b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-ai-disabled-ntp-screenshots-dark-darwin.png differ diff --git a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-ai-enabled-ntp-screenshots-dark-darwin.png b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-ai-enabled-ntp-screenshots-dark-darwin.png index 76d4475b1c..c8afe5de1b 100644 Binary files a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-ai-enabled-ntp-screenshots-dark-darwin.png and b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-ai-enabled-ntp-screenshots-dark-darwin.png differ diff --git a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-hide-ai-setting-ntp-screenshots-dark-darwin.png b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-hide-ai-setting-ntp-screenshots-dark-darwin.png index bba10f1430..658618e1a7 100644 Binary files a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-hide-ai-setting-ntp-screenshots-dark-darwin.png and b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/omnibar-sidebar-hide-ai-setting-ntp-screenshots-dark-darwin.png differ diff --git a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/rmf-big-two-action-ntp-screenshots-dark-darwin.png b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/rmf-big-two-action-ntp-screenshots-dark-darwin.png index 5451b3396f..3174e2b8c8 100644 Binary files a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/rmf-big-two-action-ntp-screenshots-dark-darwin.png and b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/rmf-big-two-action-ntp-screenshots-dark-darwin.png differ diff --git a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/winback-last-day-ntp-screenshots-dark-darwin.png b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/winback-last-day-ntp-screenshots-dark-darwin.png index b002cc9d5b..7e16600a22 100644 Binary files a/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/winback-last-day-ntp-screenshots-dark-darwin.png and b/special-pages/pages/new-tab/integration-tests/new-tab.screenshots.spec.js-snapshots/winback-last-day-ntp-screenshots-dark-darwin.png differ diff --git a/special-pages/shared/components/Button/Button.module.css b/special-pages/shared/components/Button/Button.module.css index cd43eccca4..55c1ecd367 100644 --- a/special-pages/shared/components/Button/Button.module.css +++ b/special-pages/shared/components/Button/Button.module.css @@ -31,13 +31,7 @@ box-shadow: var(--button-shadow--disabled, var(--button-shadow)); color: var(--button-text--disabled, var(--button-text)); opacity: var(--button-opacity--disabled, var(--button-opacity)); - - &:hover { - background: var(--button-bg--disabled, var(--button-bg)); - box-shadow: var(--button-shadow--disabled, var(--button-shadow)); - color: var(--button-text--disabled, var(--button-text)); - opacity: var(--button-opacity--disabled, var(--button-opacity)); - } + cursor: default; } &:focus, @@ -46,16 +40,17 @@ box-shadow: var(--button-shadow--focus, var(--button-shadow)); color: var(--button-text--focus, var(--button-text)); opacity: var(--button-opacity--focus, var(--button-opacity)); + outline: none; } - &:hover { - background: var(--button-bg); + &:hover:not(:disabled) { + background: var(--button-bg--hover, var(--button-bg)); box-shadow: var(--button-shadow--hover, var(--button-shadow)); color: var(--button-text--hover, var(--button-text)); opacity: var(--button-opacity--hover, var(--button-opacity)); } - &:active { + &:active:not(:disabled) { background: var(--button-bg--active, var(--button-bg)); box-shadow: var(--button-shadow--active, var(--button-shadow)); color: var(--button-text--active, var(--button-text)); @@ -74,7 +69,7 @@ padding: 0 var(--sp-6); text-align: center; - &:active { + &:active:not(:disabled) { background: var(--button-bg--active, var(--button-bg)); color: var(--button-text--active, var(--button-text)); } @@ -100,38 +95,48 @@ body:not([data-platform-name]) { line-height: var(--sp-8); padding: 0 var(--sp-4); - &:hover { + &:hover:not(:disabled) { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749db; } - &:active { + &:active:not(:disabled) { background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #1743d1; } } } -/* macOs Design System Button Tokens */ +/* macOS Design System Button Tokens */ [data-platform-name="macos"] { /* Shared among all variants */ - --macos-control-focused-shadow: 0 0 0 3px rgba(57, 105, 239, 0.55), 0 0 0 1px rgba(57, 105, 239, 0.55) inset, 0 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.1); + --macos-control-focused-shadow: 0 0 0 2.5px var(--ds-color-theme-accent-glow-primary, var(--ds-color-theme-default-light-accent-glow-primary)), 0 0 0 1px var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)) inset, 0 0 1px 0 var(--ds-color-theme-shadow-primary, var(--ds-color-theme-default-light-shadow-primary)), 0 1px 1px 0 var(--ds-color-theme-shadow-primary, var(--ds-color-theme-default-light-shadow-primary)); /* Standard button variant */ --macos-control-standard-background-rest: var(--color-white); --macos-control-standard-background-rest--dark: rgba(255, 255, 255, 0.28); --macos-control-standard-background-pressed: #e7e7e7; + --macos-control-standard-background-pressed--dark: rgba(255, 255, 255, 0.4); --macos-control-standard-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 1px 0 rgba(0, 0, 0, 0.2); /* Accent Branded variant */ - --macos-control-accent-branded-background-rest: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB; - --macos-control-accent-branded-background-pressed: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2140C0; - --macos-control-accent-branded-background-hover: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB; - --macos-control-accent-branded-background-disabled: var(--color-white); - --macos-control-accent-branded-background-focus: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.16) 100%), #2749DB; + --macos-accent-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)); + --macos-accent-color-secondary: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary)); + --macos-accent-color-tertiary: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-light-accent-tertiary)); + --macos-control-accent-branded-background-rest: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), var(--macos-accent-color); + --macos-control-accent-branded-background-hover: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), var(--macos-accent-color-secondary); + --macos-control-accent-branded-background-pressed: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), var(--macos-accent-color-tertiary); + --macos-control-accent-branded-background-focus: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 100%), var(--macos-accent-color); --macos-control-accent-branded-shadow-rest: 0 1px 0 0 rgba(255, 255, 255, 0) inset, 0 1px 0 0 rgba(255, 255, 255, 0) inset, 0 0 0 1px rgba(0, 122, 255, 0.05), 0 0 1px 0 rgba(0, 122, 255, 0.05), 0 1px 1px 0 rgba(0, 122, 255, 0.1); --macos-control-accent-branded-shadow-pressed: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 0px 0px 0.5px rgba(0, 122, 255, 0.05), 0px 0px 1px 0px rgba(0, 122, 255, 0.05), 0px 1px 1px 0px rgba(0, 122, 255, 0.10); --macos-control-accent-branded-shadow-hover: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.00) inset, 0px 0px 0px 0.5px rgba(0, 122, 255, 0.05), 0px 0px 1px 0px rgba(0, 122, 255, 0.05), 0px 1px 1px 0px rgba(0, 122, 255, 0.10); --macos-control-accent-branded-shadow-disabled: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset, 0px 0px 0px 0.5px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.20); + + [data-theme="dark"] & { + --macos-control-focused-shadow: 0 0 0 2.5px var(--ds-color-theme-accent-glow-primary, var(--ds-color-theme-default-dark-accent-glow-primary)), 0 0 0 1px var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)) inset, 0 0 1px 0 var(--ds-color-theme-shadow-primary, var(--ds-color-theme-default-dark-shadow-primary)), 0 1px 1px 0 var(--ds-color-theme-shadow-primary, var(--ds-color-theme-default-dark-shadow-primary)); + --macos-accent-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)); + --macos-accent-color-secondary: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary)); + --macos-accent-color-tertiary: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-dark-accent-tertiary)); + } } /* macOS Variables */ @@ -161,13 +166,13 @@ body:not([data-platform-name]) { &.accent, &.accentBrand { --button-bg: var(--macos-control-accent-branded-background-rest); - --button-text: var(--color-white); + --button-text: var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-light-accent-content-primary)); --button-shadow: var(--macos-control-accent-branded-shadow-rest); --button-opacity: 1; /* Active */ --button-bg--active: var(--macos-control-accent-branded-background-pressed); - --button-text--active: var(--color-white-at-80); + --button-text--active: color-mix(in srgb, var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-light-accent-content-primary)) 80%, transparent); --button-shadow--active: var(--macos-control-accent-branded-shadow-pressed); /* Disabled */ @@ -178,12 +183,10 @@ body:not([data-platform-name]) { /* Focus */ --button-bg--focus: var(--macos-control-accent-branded-background-focus); - --button-text--focus: var(--color-white); --button-shadow--focus: var(--macos-control-focused-shadow); /* Hover */ - --button-bg--hover: var(--macos-control-accent-branded-background-hover); - --button-text--hover: var(--color-white); + --button-bg--hover: var(--macos-control-accent-branded-background-rest); --button-shadow--hover: var(--macos-control-accent-branded-shadow-hover); } @@ -191,9 +194,14 @@ body:not([data-platform-name]) { &.standard { --button-bg: var(--macos-control-standard-background-rest--dark); --button-text: var(--color-white-at-84); + --button-bg--active: var(--macos-control-standard-background-pressed--dark); } - /** TODO: Confirm that colors don't change in Dark Mode for accented macOS button */ + &.accent, + &.accentBrand { + --button-text: var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-dark-accent-content-primary)); + --button-text--active: color-mix(in srgb, var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-dark-accent-content-primary)) 80%, transparent); + } } } @@ -258,8 +266,8 @@ body:not([data-platform-name]) { /* Windows Implementation */ [data-platform-name="windows"] { .button { - /* this is the focus ring used on NTP widgets */ - --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--color-black); + /* Focus ring: 2px outline with 1px transparent offset */ + --focus-ring-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)); border-radius: var(--border-radius-sm); height: var(--sp-8); @@ -268,88 +276,76 @@ body:not([data-platform-name]) { padding-right: var(--sp-3); &:focus-visible { - outline: none; - box-shadow: var(--focus-ring); + outline: 2px solid var(--focus-ring-color); + outline-offset: 1px; } &.standard { - background-color: var(--color-black-at-6); + background-color: var(--ds-color-theme-control-fill-primary, var(--ds-color-theme-default-light-control-fill-primary)); + color: var(--ds-color-theme-text-primary, var(--ds-color-theme-default-light-text-primary)); border-width: 0; - &:hover { - background-color: var(--color-black-at-9); + &:hover:not(:disabled) { + background-color: var(--ds-color-theme-control-fill-secondary, var(--ds-color-theme-default-light-control-fill-secondary)); cursor: pointer; } - &:active { - background-color: var(--color-black-at-12); + &:active:not(:disabled) { + background-color: var(--ds-color-theme-control-fill-tertiary, var(--ds-color-theme-default-light-control-fill-tertiary)); } &:disabled { - color: var(--color-black-at-84); - } - - &:disabled:hover { + opacity: 0.8; cursor: not-allowed; - background-color: var(--color-white-at-6); } } &.accent, &.accentBrand { - background-color: var(--ddg-color-primary); - color: var(--color-white); + background-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)); + color: var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-light-accent-content-primary)); - &:hover { - background-color: var(--color-blue-60); + &:hover:not(:disabled) { + background-color: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary)); } - &:active { - background-color: var(--color-blue-70); + &:active:not(:disabled) { + background-color: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-light-accent-tertiary)); + } + + &:disabled { + opacity: 0.8; + cursor: not-allowed; } } [data-theme=dark] & { - --focus-ring: 0px 0px 0px 1px var(--color-black), 0px 0px 0px 3px var(--color-white); + --focus-ring-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)); &.standard { - color: var(--color-white-at-84); - background-color: var(--color-white-at-12); - - &:hover { - background-color: var(--color-white-at-18); - } - - &:active { - background-color: var(--color-white-at-24); - } + color: var(--ds-color-theme-text-primary, var(--ds-color-theme-default-dark-text-primary)); + background-color: var(--ds-color-theme-control-fill-primary, var(--ds-color-theme-default-dark-control-fill-primary)); - &:disabled { - color: var(--color-white-at-12); - opacity: 0.8; + &:hover:not(:disabled) { + background-color: var(--ds-color-theme-control-fill-secondary, var(--ds-color-theme-default-dark-control-fill-secondary)); } - &:disabled:hover { - background-color: var(--color-white-at-12); + &:active:not(:disabled) { + background-color: var(--ds-color-theme-control-fill-tertiary, var(--ds-color-theme-default-dark-control-fill-tertiary)); } } &.accent, &.accentBrand { - color: var(--color-black-at-84); - background-color: var(--color-blue-20); - - &:hover { - background-color: var(--color-blue-30); - } + color: var(--ds-color-theme-accent-content-primary, var(--ds-color-theme-default-dark-accent-content-primary)); + background-color: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)); - &:active { - background-color: var(--color-blue-40); + &:hover:not(:disabled) { + background-color: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary)); } - &:disabled { - background-color: var(--color-white-at-36); - color: var(--color-black-at-84); + &:active:not(:disabled) { + background-color: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-dark-accent-tertiary)); } } } diff --git a/special-pages/shared/components/Switch/Switch.module.css b/special-pages/shared/components/Switch/Switch.module.css index 4be8006420..3f9426f249 100644 --- a/special-pages/shared/components/Switch/Switch.module.css +++ b/special-pages/shared/components/Switch/Switch.module.css @@ -2,37 +2,63 @@ --switch-width: 40px; --switch-height: 20px; --switch-handle-size: 12px; - --switch-handle-color-checked: white; --switch-handle-offset: 4px; - --switch-handle-color: var(--color-black-at-60); --switch-checked-offset: translateX(calc(100% + 8px)); - - --track-bg-color: var(--color-black-at-3); - --track-border: 1px solid var(--track-border-color); - --track-border-color: var(--color-black-at-60); --track-border-radius: 11px; - --track-bg-color-active: var(--color-black-at-9); + --track-border: 1px solid var(--track-border-color); + + /* Off state - Rest */ + --track-border-color: var(--ds-color-theme-control-border-secondary, var(--ds-color-theme-default-light-control-border-secondary)); + --track-bg-color: var(--ds-color-theme-control-fill-primary, var(--ds-color-theme-default-light-control-fill-primary)); + --switch-handle-color: var(--ds-color-theme-icons-secondary, var(--ds-color-theme-default-light-icons-secondary)); - --track-bg-color-checked: var(--ddg-color-primary); - --track-border-color-checked: var(--ddg-color-primary); + /* Off state - Hover */ + --track-border-color-hover: var(--ds-color-theme-control-border-tertiary, var(--ds-color-theme-default-light-control-border-tertiary)); + --track-bg-color-hover: var(--ds-color-theme-control-fill-secondary, var(--ds-color-theme-default-light-control-fill-secondary)); - /* todo(Shane): naming/vars/design tokens */ - --track-bg-color-checked-active: #2B55CA; - --track-border-color-checked-active: #2B55CA; + /* Off state - Pressed */ + --track-border-color-active: var(--ds-color-theme-control-border-quaternary, var(--ds-color-theme-default-light-control-border-quaternary)); + --track-bg-color-active: var(--ds-color-theme-control-fill-tertiary, var(--ds-color-theme-default-light-control-fill-tertiary)); + + /* On state - Rest */ + --track-border-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)); + --track-bg-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)); + --switch-handle-color-checked: var(--ds-color-theme-accent-content-secondary, var(--ds-color-theme-default-light-accent-content-secondary)); + + /* On state - Hover */ + --track-border-color-checked-hover: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary)); + --track-bg-color-checked-hover: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary)); + + /* On state - Pressed */ + --track-border-color-checked-active: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-light-accent-tertiary)); + --track-bg-color-checked-active: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-light-accent-tertiary)); &[data-theme="dark"] { - --track-border-color: var(--color-white-at-60); - --track-bg-color: var(--color-black-at-9); - --track-bg-color-active: var(--color-white-at-9); + /* Off state - Rest */ + --track-border-color: var(--ds-color-theme-control-border-secondary, var(--ds-color-theme-default-dark-control-border-secondary)); + --track-bg-color: var(--ds-color-theme-control-fill-primary, var(--ds-color-theme-default-dark-control-fill-primary)); + --switch-handle-color: var(--ds-color-theme-icons-secondary, var(--ds-color-theme-default-dark-icons-secondary)); - --switch-handle-color: var(--color-white-at-84); - --switch-handle-color-checked: black; + /* Off state - Hover */ + --track-border-color-hover: var(--ds-color-theme-control-border-tertiary, var(--ds-color-theme-default-dark-control-border-tertiary)); + --track-bg-color-hover: var(--ds-color-theme-control-fill-secondary, var(--ds-color-theme-default-dark-control-fill-secondary)); + + /* Off state - Pressed */ + --track-border-color-active: var(--ds-color-theme-control-border-quaternary, var(--ds-color-theme-default-dark-control-border-quaternary)); + --track-bg-color-active: var(--ds-color-theme-control-fill-tertiary, var(--ds-color-theme-default-dark-control-fill-tertiary)); - --track-bg-color-checked: var(--ddg-color-primary-dark); - --track-border-color-checked: var(--ddg-color-primary-dark); + /* On state - Rest */ + --track-border-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)); + --track-bg-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)); + --switch-handle-color-checked: var(--ds-color-theme-accent-content-secondary, var(--ds-color-theme-default-dark-accent-content-secondary)); - --track-bg-color-checked-active: var(--ddg-color-primary); - --track-border-color-checked-active: var(--ddg-color-primary); + /* On state - Hover */ + --track-border-color-checked-hover: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary)); + --track-bg-color-checked-hover: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary)); + + /* On state - Pressed */ + --track-border-color-checked-active: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-dark-accent-tertiary)); + --track-bg-color-checked-active: var(--ds-color-theme-accent-tertiary, var(--ds-color-theme-default-dark-accent-tertiary)); } &[data-platform-name="macos"] { @@ -40,11 +66,29 @@ --switch-height: 15px; --switch-handle-size: 13px; --switch-handle-offset: 1px; - --switch-handle-color: var(--color-white-at-84); --switch-checked-offset: translateX(calc(100% - 2px)); - --track-bg-color: var(--color-black-at-9); - --track-border: 0; --track-border-radius: 10px; + --track-border: 0; + + /* Off state - use system colors */ + --track-bg-color: var(--color-black-at-9); + --switch-handle-color: var(--color-white-at-84); + + /* Disable hover */ + --track-bg-color-hover: var(--track-bg-color); + --track-border-color-hover: var(--track-border-color); + --track-bg-color-checked-hover: var(--track-bg-color-checked); + --track-border-color-checked-hover: var(--track-border-color-checked); + + /* On state - use theme accent for track, system colors for handle */ + --track-bg-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)); + --track-border-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-light-accent-primary)); + --switch-handle-color-checked: white; + + /* Pressed states */ + --track-bg-color-active: var(--track-bg-color); + --track-bg-color-checked-active: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary)); + --track-border-color-checked-active: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-light-accent-secondary)); } &[data-platform-name="macos"][data-size="medium"] { @@ -52,9 +96,20 @@ --switch-height: 18px; --switch-handle-size: 16px; } + &[data-platform-name="macos"][data-theme="dark"] { + /* Off state - use system colors */ --track-bg-color: var(--color-white-at-9); + --switch-handle-color: var(--color-white-at-84); + + /* On state - use theme accent for track, system colors for handle */ + --track-bg-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)); + --track-border-color-checked: var(--ds-color-theme-accent-primary, var(--ds-color-theme-default-dark-accent-primary)); --switch-handle-color-checked: #CECECE; + + /* Pressed states */ + --track-bg-color-checked-active: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary)); + --track-border-color-checked-active: var(--ds-color-theme-accent-secondary, var(--ds-color-theme-default-dark-accent-secondary)); } vertical-align: top; @@ -81,8 +136,14 @@ appearance: auto; background-color: initial; + &:hover + .switch:after { + background-color: var(--track-bg-color-hover); + border-color: var(--track-border-color-hover); + } + &:active + .switch:after { background-color: var(--track-bg-color-active); + border-color: var(--track-border-color-active); } &:checked + .switch:before { @@ -101,10 +162,14 @@ } [data-theme="dark"][data-platform-name="macos"] &:checked + .switch:after { - background: linear-gradient(180deg, #3969EF 0%, #2C4AAC 0.01%, #3152BF 100%); box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.10) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.06) inset; } + &:checked:hover + .switch:after { + background-color: var(--track-bg-color-checked-hover); + border-color: var(--track-border-color-checked-hover); + } + &:checked:active + .switch:after { background-color: var(--track-bg-color-checked-active); border-color: var(--track-border-color-checked-active); @@ -184,6 +249,7 @@ [data-platform-name="macos"] &:after { box-shadow: 0px 0.5px 1px 1px rgba(10, 15, 20, 0.04) inset, 0px 0px 0px 0.5px rgba(10, 15, 20, 0.12) inset; } + [data-platform-name="macos"][data-theme="dark"] &:after { box-shadow: 0px 0px 1px 1px rgba(255, 255, 255, 0.10) inset, 0px 0px 0px 0.5px rgba(255, 255, 255, 0.06) inset; } diff --git a/special-pages/shared/components/Text/Text.module.css b/special-pages/shared/components/Text/Text.module.css index 833c42992a..8e0b8b42ed 100644 --- a/special-pages/shared/components/Text/Text.module.css +++ b/special-pages/shared/components/Text/Text.module.css @@ -1,5 +1,9 @@ a { - color: var(--ddg-color-primary) + color: var(--ds-color-theme-accent-text-primary, var(--ds-color-theme-default-light-accent-text-primary)); + + [data-theme="dark"] & { + color: var(--ds-color-theme-accent-text-primary, var(--ds-color-theme-default-dark-accent-text-primary)); + } } .title-1 { @@ -131,7 +135,7 @@ a { [data-platform-name="windows"] { /* This is a custom style that does not exist in the Design System It's used by the Special Error page on Windows */ - & .custom-title-1 { + & .custom-title-1 { font-size: calc(18 * var(--px-in-rem)); font-weight: 600; line-height: calc(22 * var(--px-in-rem)); @@ -144,4 +148,4 @@ a { line-height: calc(20 * var(--px-in-rem)); letter-spacing: normal; } -} \ No newline at end of file +}