From d7a5364c4037bf3ceaf9068b64a67c4870b69918 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Sat, 10 Sep 2022 22:33:46 -0700 Subject: [PATCH] Fix modal close icon color --- .../tokens/color/antd-overrides.yaml | 2 + web/styles/ant-overrides.scss | 4 + web/styles/theme.less | 4 +- web/styles/variables.css | 76 +++++-------------- 4 files changed, 30 insertions(+), 56 deletions(-) diff --git a/web/style-definitions/tokens/color/antd-overrides.yaml b/web/style-definitions/tokens/color/antd-overrides.yaml index 3360f17cc..2fe4cf575 100644 --- a/web/style-definitions/tokens/color/antd-overrides.yaml +++ b/web/style-definitions/tokens/color/antd-overrides.yaml @@ -22,6 +22,8 @@ border-radius-base: value: 'var(--theme-rounded-corners)' background-color-light: value: 'var(--theme-color-background-main)' +modal-close-color: + value: 'var(--theme-color-background-main)' # This values need to be statically assigned at build time and cannot be # overridden by the user at runtime. diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss index 646eb85df..eb7d5138f 100644 --- a/web/styles/ant-overrides.scss +++ b/web/styles/ant-overrides.scss @@ -151,3 +151,7 @@ .ant-tabs-nav:before { border-bottom-color: var(--theme-color-components-menu-item-focus-bg) !important; } + +.ant-modal-close:hover { + color: var(--theme-color-components-modal-header-text); +} diff --git a/web/styles/theme.less b/web/styles/theme.less index c0b011f2e..9d2fa3815 100644 --- a/web/styles/theme.less +++ b/web/styles/theme.less @@ -1,6 +1,6 @@ // Do not edit directly -// Generated on Sun, 11 Sep 2022 01:48:18 GMT +// Generated on Sun, 11 Sep 2022 05:30:09 GMT // // How to edit these values: // Edit the corresponding token file under the style-definitions directory @@ -16,6 +16,8 @@ @tag-default-color: var(--theme-color-action); @border-radius-base: var(--theme-rounded-corners); @background-color-light: var(--theme-color-background-main); +@modal-close-color: var(--theme-color-background-main); +@modal-close-hover: var(--theme-color-action); @primary-color: #7a5cf3; // Text link/secondary light text @primary-color-hover: #2386e2; // Fun color 1 @primary-color-active: #5d38f3; // Text link hover diff --git a/web/styles/variables.css b/web/styles/variables.css index 6a996c7ac..7855eefae 100644 --- a/web/styles/variables.css +++ b/web/styles/variables.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sun, 11 Sep 2022 01:48:18 GMT + * Generated on Sun, 11 Sep 2022 05:30:09 GMT * * How to edit these values: * Edit the corresponding token file under the style-definitions directory @@ -18,6 +18,8 @@ --tag-default-color: var(--theme-color-action); --border-radius-base: var(--theme-rounded-corners); --background-color-light: var(--theme-color-background-main); + --modal-close-color: var(--theme-color-background-main); + --modal-close-hover: var(--theme-color-action); --primary-color: #7a5cf3; /* Text link/secondary light text */ --primary-color-hover: #2386e2; /* Fun color 1 */ --primary-color-active: #5d38f3; /* Text link hover */ @@ -34,12 +36,8 @@ --theme-rounded-corners: 0.5rem; /* How much corners are rounded in places in the UI. */ --theme-unknown-1: green; /* This should never be used and it means something is wrong. */ --theme-unknown-2: red; /* This should never be used and it means something is wrong. */ - --theme-text-body-font-family: var( - --font-owncast-body - ); /* The font family used for the body text. */ - --theme-text-display-font-family: var( - --font-owncast-display - ); /* The font family used for the display/header text. */ + --theme-text-body-font-family: var(--font-owncast-body); /* The font family used for the body text. */ + --theme-text-display-font-family: var(--font-owncast-display); /* The font family used for the display/header text. */ --theme-color-users-0: var(--color-owncast-user-0); --theme-color-users-1: var(--color-owncast-user-1); --theme-color-users-2: var(--color-owncast-user-2); @@ -73,59 +71,31 @@ --theme-color-warning: var(--theme-color-palette-warning); /* Warning */ --theme-color-components-text-on-light: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-text-on-dark: var(--theme-color-palette-3); /* Light primary */ - --theme-color-components-primary-button-background: var( - --theme-color-action - ); /* Text link/secondary light text */ - --theme-color-components-primary-button-background-disabled: var( - --theme-color-action-disabled - ); /* Disabled background */ + --theme-color-components-primary-button-background: var(--theme-color-action); /* Text link/secondary light text */ + --theme-color-components-primary-button-background-disabled: var(--theme-color-action-disabled); /* Disabled background */ --theme-color-components-primary-button-text: var(--theme-color-palette-4); /* Light secondary */ - --theme-color-components-primary-button-text-disabled: var( - --theme-color-palette-10 - ); /* Neutral gray light */ - --theme-color-components-primary-button-border: var( - --theme-color-palette-4 - ); /* Light secondary */ - --theme-color-components-primary-button-border-disabled: var( - --theme-color-action-disabled - ); /* Disabled background */ - --theme-color-components-secondary-button-background: var( - --theme-color-palette-4 - ); /* Light secondary */ + --theme-color-components-primary-button-text-disabled: var(--theme-color-palette-10); /* Neutral gray light */ + --theme-color-components-primary-button-border: var(--theme-color-palette-4); /* Light secondary */ + --theme-color-components-primary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */ + --theme-color-components-secondary-button-background: var(--theme-color-palette-4); /* Light secondary */ --theme-color-components-secondary-button-background-disabled: transparent; - --theme-color-components-secondary-button-text: var( - --theme-color-action-disabled - ); /* Disabled background */ - --theme-color-components-secondary-button-text-disabled: var( - --theme-color-action-disabled - ); /* Disabled background */ - --theme-color-components-secondary-button-border: var( - --theme-color-action - ); /* Text link/secondary light text */ - --theme-color-components-secondary-button-border-disabled: var( - --theme-color-action-disabled - ); /* Disabled background */ + --theme-color-components-secondary-button-text: var(--theme-color-action-disabled); /* Disabled background */ + --theme-color-components-secondary-button-text-disabled: var(--theme-color-action-disabled); /* Disabled background */ + --theme-color-components-secondary-button-border: var(--theme-color-action); /* Text link/secondary light text */ + --theme-color-components-secondary-button-border-disabled: var(--theme-color-action-disabled); /* Disabled background */ --theme-color-components-chat-background: var(--theme-color-palette-1); /* Dark secondary */ --theme-color-components-chat-text: var(--theme-color-palette-3); /* Light primary */ - --theme-color-components-modal-header-background: var( - --theme-color-palette-1 - ); /* Dark secondary */ + --theme-color-components-modal-header-background: var(--theme-color-palette-1); /* Dark secondary */ --theme-color-components-modal-header-text: var(--theme-color-palette-3); /* Light primary */ - --theme-color-components-modal-content-background: var( - --theme-color-palette-3 - ); /* Light primary */ + --theme-color-components-modal-content-background: var(--theme-color-palette-3); /* Light primary */ --theme-color-components-modal-content-text: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-menu-background: var(--theme-color-palette-3); /* Light primary */ --theme-color-components-menu-item-text: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-menu-item-bg: transparent; --theme-color-components-menu-item-hover-bg: rgba(0, 0, 0, 0.05); --theme-color-components-menu-item-focus-bg: rgba(0, 0, 0, 0.1); - --theme-color-components-form-field-background: var( - --theme-color-palette-4 - ); /* Light secondary */ - --theme-color-components-form-field-placeholder: var( - --theme-color-action-disabled - ); /* Disabled background */ + --theme-color-components-form-field-background: var(--theme-color-palette-4); /* Light secondary */ + --theme-color-components-form-field-placeholder: var(--theme-color-action-disabled); /* Disabled background */ --theme-color-components-form-field-text: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-form-field-border: var(--theme-color-palette-0); /* Dark primary */ --theme-color-components-video-background: var(--theme-color-palette-2); /* Dark alternate */ @@ -156,10 +126,6 @@ --color-owncast-palette-13: #42bea6; /* Fun color 3 */ --color-owncast-palette-error: #ff4b39; /* Error */ --color-owncast-palette-warning: #ffc655; /* Warning */ - --font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; - --font-owncast-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', - Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-owncast-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; }