= {
- offline: 'danger',
- failed: 'danger',
+ offline: 'error',
+ failed: 'error',
pending: 'info',
fetching: 'info',
running: 'warning',
- stopped: 'danger',
+ stopped: 'error',
success: 'success',
};
diff --git a/superset-frontend/src/assets/stylesheets/antd/index.less b/superset-frontend/src/assets/stylesheets/antd/index.less
index cf51b165eb998..db2622f186239 100644
--- a/superset-frontend/src/assets/stylesheets/antd/index.less
+++ b/superset-frontend/src/assets/stylesheets/antd/index.less
@@ -10,30 +10,128 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
+ * distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS
+ * OF ANY KIND, either express or implied. See the License
+ * for the specific language governing permissions and
+ * limitations under the License.
*/
+// @ant-prefix: antd4;
-@import '~antd/lib/style/themes/index';
+// Core styles and dependencies
+@import '~antd/lib/style/themes/default.less'; // Use default theme instead of index
@import '~antd/lib/style/mixins/index';
-@import '~antd/lib/style/core/base';
+// Base styles with prefix
+@import '~antd/lib/style/core/base';
@import '~antd/lib/style/core/iconfont';
@import '~antd/lib/style/core/motion';
+
+// All component styles
@import '~antd/lib/style/components.less';
+
/*
Theme variables here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
*/
-@primary-color: #20a7c9;
-@info-color: #66bcfe;
-@success-color: #59c189;
-@processing-color: #66bcfe;
-@error-color: #e04355;
-@highlight-color: #e04355;
-@normal-color: #d9d9d9;
-@white: #fff;
-@black: #000;
+/* Core Colors */
+@primary-color: #1e91ae;
+@info-color: #5aa3db;
+@processing-color: #858585;
+@success-color: #50a777;
+@error-color: #c13c4b;
+@highlight-color: #c13c4b;
+@normal-color: #1f1f1f;
+
+// Menu-related
+@menu-highlight-color: #1e91ae;
+@menu-item-active-bg: ;
+@menu-item-color: #78bdce;
+@menu-popup-bg: #141414;
+@menu-bg: #141414;
+
+@tabs-card-head-background: #1f1f1f;
+@component-background: #141414;
+@select-item-selected-bg: #121f24;
+@select-item-active-bg: #121f24;
+@select-item-hover-bg: #121f24;
+
+@item-hover-bg: #1f1f1f;
+@menu-item-hover-bg: #1f1f1f;
+
+// GPT generated:
+
+/* Backgrounds */
+@layout-body-background: #000000;
+@layout-header-background: #141414;
+@layout-footer-background: #141414;
+@layout-sider-background: #141414;
+@background-color-light: #141414;
+@background-color-base: #141414;
+@background-elevated: #1f1f1f;
+
+/* Text */
+@text-color: rgba(255, 255, 255, 0.85);
+@text-color-secondary: rgba(255, 255, 255, 0.65);
+@text-color-tertiary: rgba(255, 255, 255, 0.45);
+@text-color-quaternary: rgba(255, 255, 255, 0.25);
+@heading-color: #141414;
+@disabled-color: rgba(255, 255, 255, 0.65);
+@input-placeholder-color: rgba(255, 255, 255, 0.65);
+
+/* Borders */
+@border-color-base: #424242;
+@border-color-split: #303030;
+@border-radius-base: 6;
+@border-radius-sm: 4;
+@border-radius-lg: 8;
+
+/* Buttons */
+@btn-primary-bg: #1e91ae;
+@btn-default-bg: #141414;
+@btn-default-border: #424242;
+@btn-danger-bg: #c13c4b;
+@btn-danger-border: #c13c4b;
+
+/* Inputs */
+//@input-bg: ;
+@input-border-color: #424242;
+@input-hover-border-color: #195665;
+
+/* Menus */
+@menu-bg: #141414;
+@menu-popup-bg: #141414;
+@menu-item-color: rgba(255, 255, 255, 0.85);
+@menu-inline-submenu-bg: #141414;
+@menu-highlight-color: rgba(255, 255, 255, 0.85);
+@menu-highlight-danger-color: #c13c4b;
+@menu-item-active-bg: #1e91ae;
+@menu-item-active-danger-bg: #271619;
+@menu-item-group-title-color: rgba(255, 255, 255, 0.85);
+
+/* Typography */
+@font-family: 'Inter', Helvetica, Arial;
+@font-family-code: 'Fira Code', 'Courier New', monospace;
+@font-size-base: 14px;
+@font-size-sm: 12px;
+@font-size-lg: 16px;
+@line-height-base: 1.5714285714285714;
+@line-height-sm: 1.6666666666666667;
+@line-height-lg: 1.5;
+
+/* Tables */
+@table-header-bg: #141414;
+@table-row-hover-bg: #1f1f1f;
+@table-selected-row-bg: #121f24;
+
+/* Motion */
+@motion-duration-fast: 0.1s;
+@motion-duration-mid: 0.2s;
+@motion-duration-slow: 0.3s;
+@motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+@motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+/* headers */
+@heading-color: rgba(255, 255, 255, 0.85);
+@collapse-header-bg: #141414;
+@collapse-header-padding: 4px 4px;
diff --git a/superset-frontend/src/assets/stylesheets/antd/index.less.hbs b/superset-frontend/src/assets/stylesheets/antd/index.less.hbs
new file mode 100644
index 0000000000000..616376c60f3ac
--- /dev/null
+++ b/superset-frontend/src/assets/stylesheets/antd/index.less.hbs
@@ -0,0 +1,137 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS
+ * OF ANY KIND, either express or implied. See the License
+ * for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @ant-prefix: antd4;
+
+// Core styles and dependencies
+@import '~antd/lib/style/themes/default.less'; // Use default theme instead of index
+@import '~antd/lib/style/mixins/index';
+
+// Base styles with prefix
+@import '~antd/lib/style/core/base';
+@import '~antd/lib/style/core/iconfont';
+@import '~antd/lib/style/core/motion';
+
+// All component styles
+@import '~antd/lib/style/components.less';
+
+
+/*
+ Theme variables here: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+*/
+/* Core Colors */
+@primary-color: {{theme.colorPrimary}};
+@info-color: {{theme.colorInfo}};
+@processing-color: {{theme.colors.grayscale.dark2}};
+@success-color: {{theme.colorSuccess}};
+@error-color: {{theme.colorError}};
+@highlight-color: {{theme.colorError}};
+@normal-color: {{theme.colors.grayscale.light3}};
+
+// Menu-related
+@menu-highlight-color: {{theme.colorPrimary}};
+@menu-item-active-bg: {{theme.colorElevated}};
+@menu-item-color: {{theme.colors.primary.dark3}};
+@menu-popup-bg: {{theme.colorBgContainer}};
+@menu-bg: {{theme.colorBgContainer}};
+
+@tabs-card-head-background: {{theme.colorBgElevated}};
+@component-background: {{theme.colorBgContainer}};
+@select-item-selected-bg: {{theme.colorPrimaryBg}};
+@select-item-active-bg: {{theme.colorPrimaryBg}};
+@select-item-hover-bg: {{theme.colorPrimaryBg}};
+
+@item-hover-bg: {{theme.colorBgElevated}};
+@menu-item-hover-bg: {{theme.colorBgElevated}};
+
+// GPT generated:
+
+/* Backgrounds */
+@layout-body-background: {{theme.colorBgLayout}};
+@layout-header-background: {{theme.colorBgContainer}};
+@layout-footer-background: {{theme.colorBgContainer}};
+@layout-sider-background: {{theme.colorBgContainer}};
+@background-color-light: {{theme.colorBgContainer}};
+@background-color-base: {{theme.colorBgContainer}};
+@background-elevated: {{theme.colorBgElevated}};
+
+/* Text */
+@text-color: {{theme.colorText}};
+@text-color-secondary: {{theme.colorTextSecondary}};
+@text-color-tertiary: {{theme.colorTextTertiary}};
+@text-color-quaternary: {{theme.colorTextQuaternary}};
+@heading-color: {{theme.colorBgContainer}};
+@disabled-color: {{theme.colorTextSecondary}};
+@input-placeholder-color: {{theme.colorTextSecondary}};
+
+/* Borders */
+@border-color-base: {{theme.colorBorder}};
+@border-color-split: {{theme.colorBorderSecondary}};
+@border-radius-base: {{theme.borderRadius}};
+@border-radius-sm: {{theme.borderRadiusSM}};
+@border-radius-lg: {{theme.borderRadiusLG}};
+
+/* Buttons */
+@btn-primary-bg: {{theme.colorPrimary}};
+@btn-default-bg: {{theme.colorBgContainer}};
+@btn-default-border: {{theme.colorBorder}};
+@btn-danger-bg: {{theme.colorError}};
+@btn-danger-border: {{theme.colorError}};
+
+/* Inputs */
+//@input-bg: {{theme.colorBgInput}};
+@input-border-color: {{theme.colorBorder}};
+@input-hover-border-color: {{theme.colorPrimaryBorderHover}};
+
+/* Menus */
+@menu-bg: {{theme.colorBgContainer}};
+@menu-popup-bg: {{theme.colorBgContainer}};
+@menu-item-color: {{theme.colorText}};
+@menu-inline-submenu-bg: {{theme.colorBgContainer}};
+@menu-highlight-color: {{theme.colorText}};
+@menu-highlight-danger-color: {{theme.colorError}};
+@menu-item-active-bg: {{theme.colorPrimary}};
+@menu-item-active-danger-bg: {{theme.colorErrorBg}};
+@menu-item-group-title-color: {{theme.colorText}};
+
+/* Typography */
+@font-family: {{theme.fontFamily}};
+@font-family-code: {{theme.fontFamilyCode}};
+@font-size-base: {{theme.fontSize}}px;
+@font-size-sm: {{theme.fontSizeSM}}px;
+@font-size-lg: {{theme.fontSizeLG}}px;
+@line-height-base: {{theme.lineHeight}};
+@line-height-sm: {{theme.lineHeightSM}};
+@line-height-lg: {{theme.lineHeightLG}};
+
+/* Tables */
+@table-header-bg: {{theme.colorBgContainer}};
+@table-row-hover-bg: {{theme.colorBgElevated}};
+@table-selected-row-bg: {{theme.colorPrimaryBg}};
+
+/* Motion */
+@motion-duration-fast: {{theme.motionDurationFast}};
+@motion-duration-mid: {{theme.motionDurationMid}};
+@motion-duration-slow: {{theme.motionDurationSlow}};
+@motion-ease-out: {{theme.motionEaseOut}};
+@motion-ease-in-out: {{theme.motionEaseInOut}};
+
+/* headers */
+@heading-color: {{theme.colorText}};
+@collapse-header-bg: {{theme.colorBgContainer}};
+@collapse-header-padding: {{theme.sizeUnit}}px {{theme.sizeUnit}}px;
diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs
new file mode 100644
index 0000000000000..c9ece15bb6639
--- /dev/null
+++ b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs
@@ -0,0 +1,509 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+// Forked Cosmo 3.3.7
+// Bootswatch
+// -----------------------------------------------------
+
+// Navbar =====================================================================
+
+.navbar {
+ border: none;
+
+ li > a:focus {
+ outline: 0;
+ }
+
+ &-inverse {
+ .badge {
+ background-color: @lightest;
+ color: @brand-primary;
+ }
+ }
+
+ .caret {
+ display: inline-block;
+ padding: 0 5px 18px 5px;
+ }
+}
+
+.navbar-inverse {
+ border: none;
+}
+
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .active > a:hover,
+.navbar-inverse .navbar-nav > .active > a:focus {
+ background: transparent;
+}
+
+.navbar-nav > li > a {
+ padding-top: 18px;
+}
+
+// Buttons ====================================================================
+
+.btn:focus,
+.btn:active:focus {
+ outline: none;
+}
+
+.nav-tabs {
+ .dropdown-toggle.btn,
+ .btn-group.open .dropdown-toggle.btn {
+ &,
+ &:hover,
+ &:active,
+ &:focus {
+ border-color: transparent;
+ background-color: transparent;
+ box-shadow: none;
+ }
+ }
+}
+
+.caret {
+ border: none;
+ color: @gray;
+
+ &:hover {
+ color: @gray-darker;
+ }
+
+ &:before {
+ font-family: 'FontAwesome';
+ font-size: @font-size-xs;
+ content: '\f078';
+ }
+}
+
+// Typography =================================================================
+
+body {
+ -webkit-font-smoothing: antialiased;
+}
+
+.text-primary,
+.text-primary:hover {
+ color: @brand-primary;
+}
+
+.text-success,
+.text-success:hover {
+ color: @success;
+}
+
+.text-danger,
+.text-danger:hover {
+ color: @brand-danger;
+}
+
+.text-warning,
+.text-warning:hover {
+ color: @brand-warning;
+}
+
+.text-info,
+.text-info:hover {
+ color: @brand-info;
+}
+
+// Tables =====================================================================
+
+table,
+.table {
+ .dropdown-menu a {
+ text-decoration: none;
+ }
+
+ .success,
+ .warning,
+ .danger,
+ .info {
+ color: @lightest;
+
+ a {
+ color: @lightest;
+ }
+
+ .btn-default {
+ color: @gray;
+ }
+ }
+}
+
+// Forms ======================================================================
+
+.form-control {
+ box-shadow: none;
+}
+
+.has-warning {
+ .help-block,
+ .control-label,
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline,
+ &.radio label,
+ &.checkbox label,
+ &.radio-inline label,
+ &.checkbox-inline label,
+ .form-control-feedback {
+ color: @brand-warning;
+ }
+
+ .form-control,
+ .form-control:focus,
+ .input-group-addon {
+ border: 1px solid @brand-warning;
+ }
+}
+
+.has-error {
+ .help-block,
+ .control-label,
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline,
+ &.radio label,
+ &.checkbox label,
+ &.radio-inline label,
+ &.checkbox-inline label,
+ .form-control-feedback {
+ color: @brand-danger;
+ }
+
+ .form-control,
+ .form-control:focus,
+ .input-group-addon {
+ border: 1px solid @brand-danger;
+ }
+}
+
+.has-success {
+ .help-block,
+ .control-label,
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline,
+ &.radio label,
+ &.checkbox label,
+ &.radio-inline label,
+ &.checkbox-inline label,
+ .form-control-feedback {
+ color: @brand-success;
+ }
+
+ .form-control,
+ .form-control:focus,
+ .input-group-addon {
+ border: 1px solid @brand-success;
+ }
+}
+
+// Navs =======================================================================
+
+.nav-pills {
+ & > li > a {
+ border-radius: @border-radius-normal;
+ }
+}
+
+.dropdown-menu {
+ & > li > a:hover,
+ & > li > a:focus {
+ background-image: none;
+ text-decoration: none;
+ }
+}
+
+// Indicators =================================================================
+
+.close {
+ text-decoration: none;
+ text-shadow: none;
+ opacity: 0.4;
+
+ &:hover,
+ &:focus {
+ opacity: 1;
+ }
+}
+
+.alert {
+ border: none;
+}
+
+.alert-link {
+ text-decoration: underline;
+}
+
+.alert-info .alert-link {
+ color: @alert-info-text;
+}
+
+.alert-danger .alert-link {
+ color: @alert-danger-text;
+}
+
+.alert-warning .alert-link {
+ color: @alert-warning-text;
+}
+
+.alert-success .alert-link {
+ color: @alert-success-text;
+}
+
+.label {
+ border-radius: 21px;
+ padding: 0.35em 0.8em 0.35em;
+ font-weight: @font-weight-normal;
+ font-size: @font-size-s;
+}
+.label-default:hover {
+ background-color: darken(@label-default-bg, 5%);
+}
+.label-warning:hover {
+ background-color: darken(@label-warning-bg, 5%);
+}
+.label-danger:hover {
+ background-color: darken(@label-danger-bg, 5%);
+}
+.label-primary:hover {
+ background-color: darken(@label-primary-bg, 5%);
+}
+
+label {
+ font-weight: @font-weight-normal;
+ font-size: @font-size-s;
+}
+
+// Progress bars ==============================================================
+
+.progress {
+ height: 14px;
+ .box-shadow(none);
+
+ .progress-bar {
+ font-size: @font-size-s;
+ line-height: @line-height-tight;
+ padding-top: 2px;
+ }
+}
+
+// Containers =================================================================
+
+.panel {
+ border: none;
+
+ &-heading,
+ &-footer {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+ &-default {
+ .panel-heading {
+ padding: 15px 15px 0 15px;
+ background-color: transparent;
+ }
+
+ .panel-title {
+ color: @text-color;
+ padding-bottom: 5px;
+ border-bottom: 1px solid @gray-light;
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin: 10px 0 0 0;
+ font-weight: @font-weight-bold;
+ }
+ }
+
+ .close {
+ color: @text-color;
+ }
+ }
+
+ &-primary {
+ .panel-heading {
+ padding: 15px 15px 0 15px;
+ background-color: transparent;
+ }
+
+ .panel-title {
+ color: @text-color;
+ padding-bottom: 5px;
+ border-bottom: 1px solid @gray-light;
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ margin: 10px 0 0 0;
+ font-weight: @font-weight-bold;
+ }
+ }
+
+ .close {
+ color: @text-color;
+ }
+ }
+
+ .accordion-toggle {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ .caret {
+ display: flex;
+ width: auto;
+ height: auto;
+ margin-left: 5px;
+
+ &:hover {
+ color: @gray;
+ }
+ }
+ }
+}
+
+.panel-title-large {
+ font-size: 24px;
+}
+
+.list-group-item {
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+a.list-group-item {
+ &-success {
+ &.active {
+ background-color: @state-success-bg;
+ }
+
+ &.active:hover,
+ &.active:focus {
+ background-color: darken(@state-success-bg, 5%);
+ }
+ }
+
+ &-warning {
+ &.active {
+ background-color: @state-warning-bg;
+ }
+
+ &.active:hover,
+ &.active:focus {
+ background-color: darken(@state-warning-bg, 5%);
+ }
+ }
+
+ &-danger {
+ &.active {
+ background-color: @state-danger-bg;
+ }
+
+ &.active:hover,
+ &.active:focus {
+ background-color: darken(@state-danger-bg, 5%);
+ }
+ }
+}
+
+.modal {
+ .close {
+ color: @text-color;
+ }
+}
+
+.popover {
+ color: @text-color;
+}
+
+// Tabs ==============================================================
+
+.nav-tabs > li > a {
+ border-top: 3px solid transparent;
+ color: @text-color;
+}
+
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+ background-color: @lightest;
+ font-weight: @font-weight-bold;
+ border-top: 3px solid @brand-primary;
+}
+
+// Tables ==============================================================
+
+.table {
+ .info {
+ color: @state-info-text;
+ }
+
+ .danger {
+ color: @state-danger-text;
+ }
+
+ .warning {
+ color: @state-warning-text;
+ }
+
+ .success {
+ color: @state-success-text;
+ }
+}
+
+// Utils ==============================================================
+hr {
+ margin: 10px 0;
+}
+
+// generate space-n classes for vertical spacing
+.space-loop(@counter) when (@counter > 0) {
+ .space-loop((@counter - 1)); // next iteration
+ .space-@{counter} {
+ margin-bottom: (10px * @counter); // code for each iteration
+ }
+}
+.space-loop(6);
+
+a {
+ cursor: pointer;
+}
+
+.control-label {
+ color: @gray;
+ font-size: @font-size-s;
+}
diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less
index a3c74f712cb0a..0d3bcf63b3e5c 100644
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less
+++ b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less
@@ -24,7 +24,7 @@
//
// ## Gray and brand colors for use across Bootstrap.
-@gray-base: @darkest; // superset-var
+@gray-base: #e0e0e0; // superset-var
@gray-darker: lighten(@gray-base, 13.5%);
@gray-dark: lighten(@gray-base, 20%);
@bs-gray: lighten(@gray-base, 33.5%);
@@ -42,9 +42,9 @@
// ## Settings for some of the most global styles.
// ** Background color for ``.
-@body-bg: @gray-bg; // superset-var
+@body-bg: #141414;
// ** Global text color on ``.
-@text-color: @gray-dark;
+@text-color: #a3a3a3;
// ** Global textual link color.
@link-color: @link;
@@ -514,9 +514,9 @@
// ** Tooltip max width
@tooltip-max-width: 200px;
// ** Tooltip text color
-@tooltip-color: @lightest; // superset-var
+@tooltip-color: #525252; // superset-var
// ** Tooltip background color
-@tooltip-bg: @darkest; // superset-var
+@tooltip-bg: rgba(255, 255, 255, 0.85);
@tooltip-opacity: 0.9;
// ** Tooltip arrow width
@@ -812,7 +812,7 @@
//
// ##
-@code-color: darken(@info, @colorstop-one);
+@code-color: darken(@info, 10%);
@code-bg: @gray-bg; // superset-var
@kbd-color: @lightest; // superset-var
diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs
new file mode 100644
index 0000000000000..4ba7da9ce62b5
--- /dev/null
+++ b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs
@@ -0,0 +1,851 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+// Forked Cosmo 3.3.7
+// Variables
+// --------------------------------------------------
+
+// == Colors
+//
+// ## Gray and brand colors for use across Bootstrap.
+
+@gray-base: {{theme.colors.grayscale.dark5}}; // superset-var
+@gray-darker: lighten(@gray-base, 13.5%);
+@gray-dark: lighten(@gray-base, 20%);
+@bs-gray: lighten(@gray-base, 33.5%);
+@bs-gray-light: lighten(@gray-base, 60%);
+@gray-lighter: lighten(@gray-base, 95%);
+
+@brand-primary: @primary-color; // superset-var
+@brand-success: @success; // superset-var
+@brand-info: @info; // superset-var
+@brand-warning: @warning; // superset-var
+@brand-danger: @danger; // superset-var
+
+// == Scaffolding
+//
+// ## Settings for some of the most global styles.
+
+// ** Background color for ``.
+@body-bg: {{theme.colorBgContainer}};
+// ** Global text color on ``.
+@text-color: {{theme.colors.grayscale.dark3}};
+
+// ** Global textual link color.
+@link-color: @link;
+// ** Link hover color set via `darken()` function.
+@link-hover-color: @link-hover;
+// ** Link hover decoration.
+@link-hover-decoration: underline;
+
+// == Typography
+//
+// ## Font, line-height, and color for body text, headings, and more.
+
+@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
+
+@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5: @font-size-base;
+@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
+
+// ** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed: floor((@font-size-base * @line-height-base));
+
+// ** By default, this inherits from the ``.
+@headings-font-family: @font-family-base;
+@headings-font-weight: @font-weight-normal; // superset-var
+@headings-line-height: @line-height-tight;
+@headings-color: inherit;
+
+// == Iconography
+//
+// ## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+// ** Load fonts from this directory.
+@icon-font-path: '../fonts/';
+// ** File name for all font files.
+@icon-font-name: 'glyphicons-halflings-regular';
+// ** Element ID within SVG icon file.
+@icon-font-svg-id: 'glyphicons_halflingsregular';
+
+// == Components
+//
+// ## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+@padding-base-vertical: 6.5px;
+@padding-base-horizontal: 18px;
+
+@padding-large-vertical: 18px;
+@padding-large-horizontal: 30px;
+
+@padding-small-vertical: 5px;
+@padding-small-horizontal: 10px;
+
+@padding-xs-vertical: 1px;
+@padding-xs-horizontal: 5px;
+
+@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
+@line-height-small: 1.5;
+
+@border-radius-base: @border-radius-normal;
+@border-radius-large: 4px;
+@border-radius-small: 4px;
+
+// ** Global color for active items (e.g., navs or dropdowns).
+@component-active-color: @lightest; // superset-var
+// ** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg: @brand-primary;
+
+// ** Width of the `border` for generating carets that indicate dropdowns.
+@caret-width-base: 4px;
+// ** Carets increase slightly in size for larger components.
+@caret-width-large: 5px;
+
+// == Tables
+//
+// ## Customizes the `.table` component with basic values, each used across all table variations.
+
+// ** Padding for ``s and ` `s.
+@table-cell-padding: 8px;
+// ** Padding for cells in `.table-condensed`.
+@table-condensed-cell-padding: 5px;
+
+// ** Default background color used for all tables.
+@table-bg: transparent;
+// ** Background color used for `.table-striped`.
+@table-bg-accent: fade(@gray-bg, @opacity-medium-light); // superset-var
+// ** Background color used for `.table-hover`.
+@table-bg-hover: @gray-bg; // superset-var
+@table-bg-active: @table-bg-hover;
+
+// ** Border color for table and cell borders.
+@table-border-color: @gray-light; // superset-var
+
+// == Buttons
+//
+// ## For each of Bootstrap's buttons, define text, background and border color.
+
+@btn-font-weight: normal;
+
+@btn-primary-color: @lightest;
+@btn-primary-bg: @brand-primary;
+@btn-primary-border: @brand-primary;
+
+@btn-default-color: @bs-gray;
+@btn-default-bg: @lightest;
+@btn-default-border: @gray-light;
+
+@btn-success-color: @btn-primary-color;
+@btn-success-bg: @brand-success;
+@btn-success-border: @btn-success-bg;
+
+@btn-info-color: @btn-primary-color;
+@btn-info-bg: @brand-info;
+@btn-info-border: @btn-info-bg;
+
+@btn-warning-color: @btn-primary-color;
+@btn-warning-bg: @brand-warning;
+@btn-warning-border: @btn-warning-bg;
+
+@btn-danger-color: @btn-primary-color;
+@btn-danger-bg: @brand-danger;
+@btn-danger-border: @btn-danger-bg;
+
+@btn-link-disabled-color: @bs-gray-light;
+
+// Allows for customizing button radius independently from global border radius
+@btn-border-radius-base: @border-radius-base;
+@btn-border-radius-large: @border-radius-large;
+@btn-border-radius-small: @border-radius-small;
+
+// == Forms
+//
+// ##
+
+// ** ``s in some browsers, due to the limited stylability of ``s in CSS.
+@input-border-radius: @border-radius-base;
+// ** Large `.form-control` border radius
+@input-border-radius-large: @border-radius-large;
+// ** Small `.form-control` border radius
+@input-border-radius-small: @border-radius-small;
+
+// ** Border color for inputs on focus
+@input-border-focus: @indicator-color; // superset-var
+
+// ** Placeholder text color
+@input-color-placeholder: @bs-gray-light;
+
+// ** Default `.form-control` height
+@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
+// ** Large `.form-control` height
+@input-height-large: (
+ ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) +
+ 2
+);
+// ** Small `.form-control` height
+@input-height-small: (
+ floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) +
+ 2
+);
+
+// ** `.form-group` margin
+@form-group-margin-bottom: 16px;
+
+@legend-color: @text-color;
+@legend-border-color: @gray-bg;
+
+// ** Background color for textual input addons
+@input-group-addon-bg: @gray-lighter;
+// ** Border color for textual input addons
+@input-group-addon-border-color: @input-border;
+
+// ** Disabled cursor for form controls and buttons.
+@cursor-disabled: not-allowed;
+
+// == Dropdowns
+//
+// ## Dropdown menu container and contents.
+
+// ** Background for the dropdown menu.
+@dropdown-bg: @lightest; // superset-var
+// ** Dropdown menu `border-color`.
+@dropdown-border: fade(@darkest, @opacity-light); // superset-var
+// ** Dropdown menu `border-color` **for IE8**.
+@dropdown-fallback-border: @gray-light; // superset-var
+// ** Divider color for between dropdown items.
+@dropdown-divider-bg: @gray-bg; // superset-var
+
+// ** Dropdown link text color.
+@dropdown-link-color: @gray-dark;
+// ** Hover color for dropdown links.
+@dropdown-link-hover-color: @lightest; // superset-var
+// ** Hover background for dropdown links.
+@dropdown-link-hover-bg: @component-active-bg;
+
+// ** Active dropdown menu item text color.
+@dropdown-link-active-color: @lightest; // superset-var
+// ** Active dropdown menu item background color.
+@dropdown-link-active-bg: @component-active-bg;
+
+// ** Disabled dropdown menu item background color.
+@dropdown-link-disabled-color: @bs-gray-light;
+
+// ** Text color for headers within dropdown menus.
+@dropdown-header-color: @bs-gray-light;
+
+// ** Deprecated `@dropdown-caret-color` as of v3.1.0
+@dropdown-caret-color: @darkest; // superset-var
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+@zindex-navbar: 1000;
+@zindex-dropdown: 1000;
+@zindex-popover: 1060;
+@zindex-tooltip: 1070;
+@zindex-navbar-fixed: 1030;
+@zindex-modal-background: 1040;
+@zindex-modal: 1050;
+
+// == Media queries breakpoints
+//
+// ## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+// ** Deprecated `@screen-xs` as of v3.0.1
+@screen-xs: 480px;
+// ** Deprecated `@screen-xs-min` as of v3.2.0
+@screen-xs-min: @screen-xs;
+// ** Deprecated `@screen-phone` as of v3.0.1
+@screen-phone: @screen-xs-min;
+
+// Small screen / tablet
+// ** Deprecated `@screen-sm` as of v3.0.1
+@screen-sm: 768px;
+@screen-sm-min: @screen-sm;
+// ** Deprecated `@screen-tablet` as of v3.0.1
+@screen-tablet: @screen-sm-min;
+
+// Medium screen / desktop
+// ** Deprecated `@screen-md` as of v3.0.1
+@screen-md: 992px;
+@screen-md-min: @screen-md;
+// ** Deprecated `@screen-desktop` as of v3.0.1
+@screen-desktop: @screen-md-min;
+
+// Large screen / wide desktop
+// ** Deprecated `@screen-lg` as of v3.0.1
+@screen-lg: 1200px;
+@screen-lg-min: @screen-lg;
+// ** Deprecated `@screen-lg-desktop` as of v3.0.1
+@screen-lg-desktop: @screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-xs-max: (@screen-sm-min - 1);
+@screen-sm-max: (@screen-md-min - 1);
+@screen-md-max: (@screen-lg-min - 1);
+
+// == Grid system
+//
+// ## Define your custom responsive grid.
+
+// ** Number of columns in the grid.
+@grid-columns: 12;
+// ** Padding between columns. Gets divided in half for the left and right.
+@grid-gutter-width: 20px;
+// Navbar collapse
+// ** Point at which the navbar becomes uncollapsed.
+@grid-float-breakpoint: @screen-sm-min;
+// ** Point at which the navbar begins collapsing.
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+
+// == Container sizes
+//
+// ## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+@container-tablet: (720px + @grid-gutter-width);
+// ** For `@screen-sm-min` and up.
+@container-sm: @container-tablet;
+
+// Medium screen / desktop
+@container-desktop: (940px + @grid-gutter-width);
+// ** For `@screen-md-min` and up.
+@container-md: @container-desktop;
+
+// Large screen / wide desktop
+@container-large-desktop: (1140px + @grid-gutter-width);
+// ** For `@screen-lg-min` and up.
+@container-lg: @container-large-desktop;
+
+// == Navbar
+//
+// ##
+
+// Basics of a navbar
+@navbar-height: 50px;
+@navbar-margin-bottom: @line-height-computed;
+@navbar-border-radius: @border-radius-base;
+@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
+@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height: 340px;
+
+@navbar-default-color: @lightest; // superset-var
+@navbar-default-bg: @gray-darker;
+@navbar-default-border: darken(@navbar-default-bg, 6.5%);
+
+// Navbar links
+@navbar-default-link-color: @lightest; // superset-var
+@navbar-default-link-hover-color: @lightest; // superset-var
+@navbar-default-link-hover-bg: darken(@navbar-default-bg, 10%);
+@navbar-default-link-active-color: @navbar-default-link-hover-color;
+@navbar-default-link-active-bg: @navbar-default-link-hover-bg;
+@navbar-default-link-disabled-color: @gray-light; // superset-var
+@navbar-default-link-disabled-bg: transparent;
+
+// Navbar brand label
+@navbar-default-brand-color: @navbar-default-link-color;
+@navbar-default-brand-hover-color: @lightest; // superset-var
+@navbar-default-brand-hover-bg: none;
+
+// Navbar toggle
+@navbar-default-toggle-hover-bg: @navbar-default-link-hover-bg;
+@navbar-default-toggle-icon-bar-bg: @lightest; // superset-var
+@navbar-default-toggle-border-color: transparent;
+
+// === Inverted navbar
+// Reset inverted navbar basics
+@navbar-inverse-color: @gray-dark;
+@navbar-inverse-bg: @lightest; // superset-var
+@navbar-inverse-border: transparent;
+
+// Inverted navbar links
+@navbar-inverse-link-color: @gray-dark;
+@navbar-inverse-link-hover-color: @gray-dark;
+@navbar-inverse-link-hover-bg: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg: @navbar-inverse-link-hover-bg;
+@navbar-inverse-link-disabled-color: @gray-lighter;
+@navbar-inverse-link-disabled-bg: transparent;
+
+// Inverted navbar brand label
+@navbar-inverse-brand-color: @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color: @gray-darker;
+@navbar-inverse-brand-hover-bg: none;
+
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg;
+@navbar-inverse-toggle-icon-bar-bg: @lightest; // superset-var
+@navbar-inverse-toggle-border-color: transparent;
+
+// == Navs
+//
+// ##
+
+// === Shared nav styles
+@nav-link-padding: 10px 15px;
+@nav-link-hover-bg: @gray-lighter;
+
+@nav-disabled-link-color: @bs-gray-light;
+@nav-disabled-link-hover-color: @bs-gray-light;
+
+// == Tabs
+@nav-tabs-border-color: @gray-light; // superset-var
+
+@nav-tabs-link-hover-border-color: @gray-lighter;
+
+@nav-tabs-active-link-hover-bg: @body-bg;
+@nav-tabs-active-link-hover-color: @bs-gray;
+@nav-tabs-active-link-hover-border-color: @gray-light; // superset-var
+
+@nav-tabs-justified-link-border-color: @gray-light; // superset-var
+@nav-tabs-justified-active-link-border-color: @body-bg;
+
+// == Pills
+@nav-pills-border-radius: @border-radius-base;
+@nav-pills-active-link-hover-bg: @component-active-bg;
+@nav-pills-active-link-hover-color: @component-active-color;
+
+// == Pagination
+//
+// ##
+
+@pagination-color: @link-color;
+@pagination-bg: @lightest; // superset-var
+@pagination-border: @gray-light; // superset-var
+
+@pagination-hover-color: @link-hover-color;
+@pagination-hover-bg: @gray-lighter;
+@pagination-hover-border: @gray-light; // superset-var
+
+@pagination-active-color: @bs-gray-light;
+@pagination-active-bg: @gray-bg; // superset-var
+@pagination-active-border: @gray-light; // superset-var
+
+@pagination-disabled-color: @bs-gray-light;
+@pagination-disabled-bg: @lightest; // superset-var
+@pagination-disabled-border: @gray-light; // superset-var
+
+// == Pager
+//
+// ##
+
+@pager-bg: @pagination-bg;
+@pager-border: @pagination-border;
+@pager-border-radius: @border-radius-base;
+
+@pager-hover-bg: @pagination-hover-bg;
+
+@pager-active-bg: @pagination-active-bg;
+@pager-active-color: @pagination-active-color;
+
+@pager-disabled-color: @bs-gray-light;
+
+// == Jumbotron
+//
+// ##
+
+@jumbotron-padding: 30px;
+@jumbotron-color: inherit;
+@jumbotron-bg: @gray-lighter;
+@jumbotron-heading-color: inherit;
+@jumbotron-font-size: ceil((@font-size-base * 1.5));
+@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
+
+// == Form states and alerts
+//
+// ## Define colors for form feedback states and, by default, alerts.
+
+@state-success-text: @success-dark2;
+@state-success-bg: @success-light2;
+@state-success-border: @success-light2;
+
+@state-info-text: @info-dark2;
+@state-info-bg: @info-light2;
+@state-info-border: @info-light2;
+
+@state-warning-text: @warning-dark2;
+@state-warning-bg: @warning-light2;
+@state-warning-border: @warning-light2;
+
+@state-danger-text: @danger-dark2;
+@state-danger-bg: @danger-light2;
+@state-danger-border: @danger-light2;
+
+// == Tooltips
+//
+// ##
+
+// ** Tooltip max width
+@tooltip-max-width: 200px;
+// ** Tooltip text color
+@tooltip-color: {{ theme.colors.grayscale.light1}}; // superset-var
+// ** Tooltip background color
+@tooltip-bg: {{theme.colorText}};
+@tooltip-opacity: 0.9;
+
+// ** Tooltip arrow width
+@tooltip-arrow-width: 5px;
+// ** Tooltip arrow color
+@tooltip-arrow-color: @tooltip-bg;
+
+// == Popovers
+//
+// ##
+
+// ** Popover body background color
+@popover-bg: @lightest; // superset-var
+// ** Popover maximum width
+@popover-max-width: 276px;
+// ** Popover border color
+@popover-border-color: fade(@darkest, @opacity-light); // superset-var
+// ** Popover fallback border color
+@popover-fallback-border-color: @gray-light; // superset-var
+
+// ** Popover title background color
+@popover-title-bg: darken(@popover-bg, 3%);
+
+// ** Popover arrow width
+@popover-arrow-width: 10px;
+// ** Popover arrow color
+@popover-arrow-color: @popover-bg;
+
+// ** Popover outer arrow width
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
+// ** Popover outer arrow color
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
+// ** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color: darken(
+ @popover-fallback-border-color,
+ 20%
+);
+
+// == Labels
+//
+// ##
+
+// ** Default label background color
+@label-default-bg: @bs-gray-light;
+// ** Primary label background color
+@label-primary-bg: @brand-primary;
+// ** Success label background color
+@label-success-bg: @brand-success;
+// ** Info label background color
+@label-info-bg: @brand-info;
+// ** Warning label background color
+@label-warning-bg: darken(@brand-warning, 6%);
+// ** Danger label background color
+@label-danger-bg: @brand-danger;
+
+// ** Default label text color
+@label-color: @lightest; // superset-var
+// ** Default text color of a linked label
+@label-link-hover-color: @lightest; // superset-var
+
+// == Modals
+//
+// ##
+
+// ** Padding applied to the modal body
+@modal-inner-padding: 20px;
+
+// ** Padding applied to the modal title
+@modal-title-padding: 15px;
+// ** Modal title line-height
+@modal-title-line-height: @line-height-base;
+
+// ** Background color of modal content area
+@modal-content-bg: @lightest; // superset-var
+// ** Modal content border color
+@modal-content-border-color: transparent;
+// ** Modal content border color **for IE8**
+@modal-content-fallback-border-color: @gray; // superset-var
+
+// ** Modal backdrop background color
+@modal-backdrop-bg: @darkest; // superset-var
+// ** Modal backdrop opacity
+@modal-backdrop-opacity: 0.5;
+// ** Modal header border color
+@modal-header-border-color: @gray-bg; // superset-var
+// ** Modal footer border color
+@modal-footer-border-color: @modal-header-border-color;
+
+@modal-lg: 900px;
+@modal-md: 600px;
+@modal-sm: 300px;
+
+// == Alerts
+//
+// ## Define alert colors, border radius, and padding.
+
+@alert-padding: 15px;
+@alert-border-radius: @border-radius-base;
+@alert-link-font-weight: @font-weight-bold;
+
+@alert-success-bg: @state-success-bg;
+@alert-success-text: @state-success-text;
+@alert-success-border: @state-success-border;
+
+@alert-info-bg: @state-info-bg;
+@alert-info-text: @state-info-text;
+@alert-info-border: @state-info-border;
+
+@alert-warning-bg: @state-warning-bg;
+@alert-warning-text: @state-warning-text;
+@alert-warning-border: @state-warning-border;
+
+@alert-danger-bg: @state-danger-bg;
+@alert-danger-text: @state-danger-text;
+@alert-danger-border: @state-danger-border;
+
+// == Progress bars
+//
+// ##
+
+// ** Background color of the whole progress component
+@progress-bg: @gray-light; // superset-var
+// ** Progress bar text color
+@progress-bar-color: @lightest; // superset-var
+// ** Variable for setting rounded corners on progress bar.
+@progress-border-radius: @border-radius-base;
+
+// ** Default progress bar color
+@progress-bar-bg: @brand-primary;
+// ** Success progress bar color
+@progress-bar-success-bg: @brand-success;
+// ** Warning progress bar color
+@progress-bar-warning-bg: @brand-warning;
+// ** Danger progress bar color
+@progress-bar-danger-bg: @brand-danger;
+// ** Info progress bar color
+@progress-bar-info-bg: @brand-info;
+
+// == List group
+//
+// ##
+
+// ** Background color on `.list-group-item`
+@list-group-bg: @lightest; // superset-var
+// ** `.list-group-item` border color
+@list-group-border: @gray-light; // superset-var
+// ** List group border radius
+@list-group-border-radius: @border-radius-base;
+
+// ** Background color of single list items on hover
+@list-group-hover-bg: @gray-bg; // superset-var
+// ** Text color of active list items
+@list-group-active-color: @component-active-color;
+// ** Background color of active list items
+@list-group-active-bg: @component-active-bg;
+// ** Border color of active list elements
+@list-group-active-border: @list-group-border;
+// ** Text color for content within active list items
+@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
+
+// ** Text color of disabled list items
+@list-group-disabled-color: @bs-gray-light;
+// ** Background color of disabled list items
+@list-group-disabled-bg: @gray-lighter;
+// ** Text color for content within disabled list items
+@list-group-disabled-text-color: @list-group-disabled-color;
+
+@list-group-link-color: #555;
+@list-group-link-hover-color: @list-group-link-color;
+@list-group-link-heading-color: @almost-black; // superset-var
+
+// == Panels
+//
+// ##
+
+@panel-bg: @lightest; // superset-var
+@panel-body-padding: 15px;
+@panel-heading-padding: 10px 15px;
+@panel-footer-padding: @panel-heading-padding;
+@panel-border-radius: @border-radius-base;
+
+// ** Border color for elements within panels
+@panel-inner-border: @gray-light; // superset-var
+@panel-footer-bg: @gray-bg; // superset-var
+
+@panel-default-text: @gray-dark;
+@panel-default-border: transparent;
+@panel-default-heading-bg: @lightest; // superset-var
+
+@panel-primary-text: @lightest; // superset-var
+@panel-primary-border: transparent;
+@panel-primary-heading-bg: @brand-primary;
+
+@panel-success-text: @state-success-text;
+@panel-success-border: transparent;
+@panel-success-heading-bg: @state-success-bg;
+
+@panel-info-text: @state-info-text;
+@panel-info-border: transparent;
+@panel-info-heading-bg: @state-info-bg;
+
+@panel-warning-text: @state-warning-text;
+@panel-warning-border: transparent;
+@panel-warning-heading-bg: @state-warning-bg;
+
+@panel-danger-text: @state-danger-text;
+@panel-danger-border: transparent;
+@panel-danger-heading-bg: @state-danger-bg;
+
+// == Thumbnails
+//
+// ##
+
+// ** Padding around the thumbnail image
+@thumbnail-padding: 4px;
+// ** Thumbnail background color
+@thumbnail-bg: @body-bg;
+// ** Thumbnail border color
+@thumbnail-border: @gray-light; // superset-var
+// ** Thumbnail border radius
+@thumbnail-border-radius: @border-radius-base;
+
+// ** Custom text color for thumbnail captions
+@thumbnail-caption-color: @text-color;
+// ** Padding around the thumbnail caption
+@thumbnail-caption-padding: 9px;
+
+// == Wells
+//
+// ##
+
+@well-bg: @gray-bg; // superset-var
+@well-border: darken(@well-bg, 7%);
+
+// == Badges
+//
+// ##
+
+@badge-color: @lightest; // superset-var
+// ** Linked badge text color on hover
+@badge-link-hover-color: @lightest; // superset-var
+@badge-bg: @brand-primary;
+
+// ** Badge text color in active nav link
+@badge-active-color: @link-color;
+// ** Badge background color in active nav link
+@badge-active-bg: @lightest; // superset-var
+
+@badge-font-weight: @font-weight-bold;
+@badge-line-height: 1;
+@badge-border-radius: 10px;
+
+// == Breadcrumbs
+//
+// ##
+
+@breadcrumb-padding-vertical: 8px;
+@breadcrumb-padding-horizontal: 15px;
+// ** Breadcrumb background color
+@breadcrumb-bg: @gray-bg; // superset-var
+// ** Breadcrumb text color
+@breadcrumb-color: @gray-light; // superset-var
+// ** Text color of current page in the breadcrumb
+@breadcrumb-active-color: @bs-gray-light;
+// ** Textual separator for between breadcrumb elements
+@breadcrumb-separator: '/';
+
+// == Carousel
+//
+// ##
+
+@carousel-text-shadow: 0 1px 2px fade(@darkest, @opacity-light); // superset-var
+
+@carousel-control-color: @lightest; // superset-var
+@carousel-control-width: 15%;
+@carousel-control-opacity: 0.5;
+@carousel-control-font-size: 20px;
+
+@carousel-indicator-active-bg: @lightest; // superset-var
+@carousel-indicator-border-color: @lightest; // superset-var
+
+@carousel-caption-color: @lightest; // superset-var
+
+// == Close
+//
+// ##
+
+@close-font-weight: @font-weight-bold;
+@close-color: @lightest; // superset-var
+@close-text-shadow: 0 1px 0 @lightest; // superset-var
+
+// == Code
+//
+// ##
+
+@code-color: darken(@info, 10%);
+@code-bg: @gray-bg; // superset-var
+
+@kbd-color: @lightest; // superset-var
+@kbd-bg: @almost-black; // superset-var
+
+@pre-bg: @gray-bg; // superset-var
+@pre-color: @gray-dark;
+@pre-border-color: @gray-light; // superset-var
+@pre-scrollable-max-height: 340px;
+
+// == Type
+//
+// ##
+
+// ** Horizontal offset for forms and lists.
+@component-offset-horizontal: 180px;
+// ** Text muted color
+@text-muted: @bs-gray-light;
+// ** Abbreviations and acronyms border color
+@abbr-border-color: @bs-gray-light;
+// ** Headings small color
+@headings-small-color: @bs-gray-light;
+// ** Blockquote small color
+@blockquote-small-color: @bs-gray-light;
+// ** Blockquote font size
+@blockquote-font-size: (@font-size-base * 1.25);
+// ** Blockquote border color
+@blockquote-border-color: @gray-lighter;
+// ** Page header border color
+@page-header-border-color: @gray-lighter;
+// ** Width of horizontal description list titles
+@dl-horizontal-offset: @component-offset-horizontal;
+// ** Point at which .dl-horizontal becomes horizontal
+@dl-horizontal-breakpoint: @grid-float-breakpoint;
+// ** Horizontal line color.
+@hr-border: @gray-lighter;
diff --git a/superset-frontend/src/assets/stylesheets/less/fonts.less b/superset-frontend/src/assets/stylesheets/less/fonts.less
index 5fb41d832ae02..31eec2f516d94 100644
--- a/superset-frontend/src/assets/stylesheets/less/fonts.less
+++ b/superset-frontend/src/assets/stylesheets/less/fonts.less
@@ -27,7 +27,6 @@
@import '~@fontsource/inter/500.css';
@import '~@fontsource/inter/600.css';
-/******************************* Fira Code ********************************/
@import '~@fontsource/fira-code/400.css';
@import '~@fontsource/fira-code/500.css';
@import '~@fontsource/fira-code/600.css';
diff --git a/superset-frontend/src/assets/stylesheets/less/fonts.less.hbs b/superset-frontend/src/assets/stylesheets/less/fonts.less.hbs
new file mode 100644
index 0000000000000..31eec2f516d94
--- /dev/null
+++ b/superset-frontend/src/assets/stylesheets/less/fonts.less.hbs
@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*************************************************************************/
+/* USAGE NOTES : Add font all licenses to LICENSE.text */
+/*************************************************************************/
+
+/******************************* Inter UI ********************************/
+@import '~@fontsource/inter/200.css';
+@import '~@fontsource/inter/400.css';
+@import '~@fontsource/inter/500.css';
+@import '~@fontsource/inter/600.css';
+
+@import '~@fontsource/fira-code/400.css';
+@import '~@fontsource/fira-code/500.css';
+@import '~@fontsource/fira-code/600.css';
diff --git a/superset-frontend/src/assets/stylesheets/less/index.less.hbs b/superset-frontend/src/assets/stylesheets/less/index.less.hbs
new file mode 100644
index 0000000000000..fc91c477dbeb5
--- /dev/null
+++ b/superset-frontend/src/assets/stylesheets/less/index.less.hbs
@@ -0,0 +1,47 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+// Index .less, any imports here will be included in the final css build
+
+@import '~bootstrap/less/bootstrap.less';
+@import './fonts.less';
+@import './variables.less';
+@import './cosmo/bootswatch.less';
+
+html,
+body {
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+}
+
+body {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ flex: 0 1 auto;
+}
+
+#app {
+ flex: 1 1 auto;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
diff --git a/superset-frontend/src/assets/stylesheets/less/variables.less b/superset-frontend/src/assets/stylesheets/less/variables.less
index fe9b8987fd041..a0176905994b5 100644
--- a/superset-frontend/src/assets/stylesheets/less/variables.less
+++ b/superset-frontend/src/assets/stylesheets/less/variables.less
@@ -19,71 +19,73 @@
/************************************************************************/
/* COLORS */
-/* Please attempt to use and standardize on these colors, */
-/* rather than including specific color values in */
-/* component styles. This will allow us to more easily adjust theming */
/************************************************************************/
-@primary-color: #20a7c9;
+@primary-color: #1e91ae;
@indicator-color: @primary-color;
-@brand-primary-dark1: #1a85a0;
-@brand-primary-dark2: #156378;
-@brand-primary-light1: #79cade;
-@brand-primary-light2: #a5dae9;
-@brand-primary-light3: #d2edf4;
-@brand-primary-light4: #e9f6f9;
-@brand-primary-light5: #f3f8fa;
-
-@brand-secondary: #444e7c;
-@brand-secondary-dark1: #363e63;
-@brand-secondary-dark2: #282e4a;
-@brand-secondary-dark3: #1b1f31;
-@brand-secondary-light1: #8e94b0;
-@brand-secondary-light2: #b4b8ca;
-@brand-secondary-light3: #d9dbe4;
-@brand-secondary-light4: #eceef2;
-@brand-secondary-light5: #f5f5f8;
-
-@almost-black: #263238;
-@gray-dark: #484848;
-@gray-light: #e0e0e0;
-@gray-light5: #666666;
-@gray: #879399;
-@gray-bg: #f7f7f7;
-@gray-heading: #a3a3a3;
-@menu-hover: #f2f3f5;
-@lightest: #ffffff;
-@darkest: #000000;
+@brand-primary-dark1: #1e91ae;
+@brand-primary-dark2: #4ba7be;
+@brand-primary-light1: #18748b;
+@brand-primary-light2: #115060;
+@brand-primary-light3: #092c34;
+@brand-primary-light4: #030f11;
+@brand-primary-light5: #020709;
+
+@brand-secondary: #1e91ae;
+@brand-secondary-dark1: #1e91ae;
+@brand-secondary-dark2: #4ba7be;
+@brand-secondary-dark3: #78bdce;
+@brand-secondary-light1: #18748b;
+@brand-secondary-light2: #115060;
+@brand-secondary-light3: #092c34;
+@brand-secondary-light4: #030f11;
+@brand-secondary-light5: #020709;
+
+// TODO line up with theme
+@almost-black: #e0e0e0;
+@gray-dark: #a3a3a3;
+@gray-light: #0a0a0a;
+@gray-light5: #050505;
+@gray: #1e91ae;
+@gray-bg: #0a0a0a;
+@gray-heading: rgba(255, 255, 255, 0.85);
+@menu-hover: rgba(255, 255, 255, 0.85);
+@lightest: #141414;
+@darkest: rgba(255, 255, 255, 0.85);
+
+@body-bg: #141414;
/**************************** text-specific *****************************/
-@link: #1985a0;
-@link-hover: darken(@link, @colorstop-one);
+@text-color: #fff;
+@heading-color: #fff;
+@link: #1e91ae;
+@link-hover: #4ba7be;
/***************************** status colors ****************************/
-@info: #66bcfe;
-@info-dark1: #4d8cbe;
-@info-dark2: #315e7e;
-@info-light1: #b3defe;
-@info-light2: #eff8fe;
-
-@danger: #e04355;
-@danger-dark1: #a7323f;
-@danger-dark2: #6f212a;
-@danger-light1: #efa1aa;
-@danger-light2: #faedee;
-
-@success: #5ac189;
-@success-dark1: #439066;
-@success-dark2: #2b6144;
-@success-light1: #ace1c4;
-@success-light2: #eef8f3;
-
-@warning: #fcc700;
-@warning-dark1: #bc9501;
-@warning-dark2: #7d6300;
-@warning-light1: #fde380;
-@warning-light2: #fef9e6;
+@info: #5aa3db;
+@info-dark1: #6bacdf;
+@info-dark2: #7bb5e2;
+@info-light1: #4882af;
+@info-light2: #325a78;
+
+@danger: #c13c4b;
+@danger-dark1: #c7505d;
+@danger-dark2: #cd636f;
+@danger-light1: #9a303c;
+@danger-light2: #6a2129;
+
+@success: #50a777;
+@success-dark1: #62b085;
+@success-dark2: #73b992;
+@success-light1: #40865f;
+@success-light2: #2c5c41;
+
+@warning: #d9ac03;
+@warning-dark1: #ddb41c;
+@warning-dark2: #e1bd35;
+@warning-light1: #ae8a02;
+@warning-light2: #775f02;
/* general component effects */
@shadow-highlight: @primary-color;
@@ -141,21 +143,18 @@
/* Commonly used font weights, line heights, etc. These should be the */
/* core values used to build more complex styles for headers, etc. */
/************************************************************************/
+@font-size-base: 14px; // Base `rem` units on this, as needed.
-// *************************** Weights **********************************
-@font-weight-light: 200;
+@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 600;
-// ***************************** Font Sizes *****************************
-@font-size-base: 14px; // Base `rem` units on this, as needed.
-
-@font-size-xxs: 9px;
-@font-size-xs: 10px;
+@font-size-xxs: 7px;
+@font-size-xs: 8px;
@font-size-s: 12px;
-@font-size-m: @font-size-base;
+@font-size-m: 14px;
@font-size-l: 16px;
-@font-size-xl: 21px;
+@font-size-xl: 20px;
@font-size-xxl: 28px;
// **************************** Line Heights ****************************
@@ -184,16 +183,16 @@
}
// ****************************** Families ******************************
+
@font-family-sans-serif: 'Inter', Helvetica, Arial;
-@font-family-serif: Georgia, 'Times New Roman', Times, serif;
@font-family-monospace: 'Fira Code', 'Courier New', monospace;
@font-family-base: @font-family-sans-serif;
+@line-height-tight: 1;
/************************************************************************/
/* TRANSITIONS */
-/* Timing and easings presets used in CSS transitions */
/************************************************************************/
-@timing-normal: 0.3s;
+@timing-normal: 0.2s;
/************************************************************************/
/* BORDER RADII */
diff --git a/superset-frontend/src/assets/stylesheets/less/variables.less.hbs b/superset-frontend/src/assets/stylesheets/less/variables.less.hbs
new file mode 100644
index 0000000000000..e6f7d0036a8d9
--- /dev/null
+++ b/superset-frontend/src/assets/stylesheets/less/variables.less.hbs
@@ -0,0 +1,211 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/************************************************************************/
+/* COLORS */
+/************************************************************************/
+
+@primary-color: {{theme.colorPrimary}};
+@indicator-color: @primary-color;
+
+@brand-primary-dark1: {{theme.colorPrimaryText}};
+@brand-primary-dark2: {{theme.colors.primary.dark2}};
+@brand-primary-light1: {{theme.colors.primary.light1}};
+@brand-primary-light2: {{theme.colors.primary.light2}};
+@brand-primary-light3: {{theme.colors.primary.light3}};
+@brand-primary-light4: {{theme.colors.primary.light4}};
+@brand-primary-light5: {{theme.colors.primary.light5}};
+
+@brand-secondary: {{theme.colorPrimary}};
+@brand-secondary-dark1: {{theme.colorPrimaryText}};
+@brand-secondary-dark2: {{theme.colors.primary.dark2}};
+@brand-secondary-dark3: {{theme.colors.primary.dark3}};
+@brand-secondary-light1: {{theme.colors.primary.light1}};
+@brand-secondary-light2: {{theme.colors.primary.light2}};
+@brand-secondary-light3: {{theme.colors.primary.light3}};
+@brand-secondary-light4: {{theme.colors.primary.light4}};
+@brand-secondary-light5: {{theme.colors.primary.light5}};
+
+// TODO line up with theme
+@almost-black: {{theme.colors.grayscale.dark5}};
+@gray-dark: {{theme.colors.grayscale.dark3}};
+@gray-light: {{theme.colors.grayscale.light4}};
+@gray-light5: {{theme.colors.grayscale.light5}};
+@gray: {{theme.colorPrimary}};
+@gray-bg: {{theme.colors.grayscale.light4}};
+@gray-heading: {{theme.colorText}};
+@menu-hover: {{theme.colorText}};
+@lightest: {{theme.colorBgContainer}};
+@darkest: {{theme.colorText}};
+
+@body-bg: {{theme.colorBgContainer}};
+
+/**************************** text-specific *****************************/
+@text-color: {{theme.colorTextBase}};
+@heading-color: {{theme.colorTextBase}};
+@link: {{theme.colorPrimaryText}};
+@link-hover: {{theme.colors.primary.dark2}};
+
+/***************************** status colors ****************************/
+@info: {{theme.colorInfo}};
+@info-dark1: {{theme.colors.info.dark1}};
+@info-dark2: {{theme.colors.info.dark2}};
+@info-light1: {{theme.colors.info.light1}};
+@info-light2: {{theme.colors.info.light2}};
+
+@danger: {{theme.colorError}};
+@danger-dark1: {{theme.colors.error.dark1}};
+@danger-dark2: {{theme.colors.error.dark2}};
+@danger-light1: {{theme.colors.error.light1}};
+@danger-light2: {{theme.colors.error.light2}};
+
+@success: {{theme.colorSuccess}};
+@success-dark1: {{theme.colors.success.dark1}};
+@success-dark2: {{theme.colors.success.dark2}};
+@success-light1: {{theme.colors.success.light1}};
+@success-light2: {{theme.colors.success.light2}};
+
+@warning: {{theme.colorWarning}};
+@warning-dark1: {{theme.colors.warning.dark1}};
+@warning-dark2: {{theme.colors.warning.dark2}};
+@warning-light1: {{theme.colors.warning.light1}};
+@warning-light2: {{theme.colors.warning.light2}};
+
+/* general component effects */
+@shadow-highlight: @primary-color;
+
+/************************************************************************/
+/* OPACITIES */
+/* Used in LESS filters, e.g. fade(@someColorVar, @someOpacityBelow) */
+/************************************************************************/
+@opacity-light: 10%;
+@opacity-medium-light: 35%;
+@opacity-medium-heavy: 60%;
+@opacity-heavy: 80%;
+
+/************************************************************************/
+/* SHADES & TINTS */
+/* Used in LESS filters for shadint/tinting, */
+/* e.g. shade(@someColorVar, @colorstop-one) to darken */
+/* or tint(@someColorVar, @colorstop-one) to lighten */
+/************************************************************************/
+@colorstop-one: 20%;
+@colorstop-two: 40%;
+@colorstop-three: 60%;
+@colorstop-four: 80%;
+
+/************************************************************************/
+/* LAYOUT */
+/* Widths and heights of things, that might be referred to often */
+/************************************************************************/
+
+/* builder component pane */
+@builder-pane-width: 374px;
+
+/************************************************************************/
+/* Z-INDEX */
+/* Think of the site as "layers" rather than an arms race of numbers */
+/* Keep these to a minimum */
+/* Label semantic "layers" and add comments for usage notes */
+/* Use double dash modifiers to step up/down from a base layer */
+/* e.g. z-whatever--modifier */
+/************************************************************************/
+
+/************************ toast messages, popovers **********************/
+@z-index-max: 3000;
+
+/***** filters, dashboard editor widgets, Explore reloading overlay *****/
+@z-index-dropdown: @z-index-above-dashboard-charts + 1;
+@z-index-above-dashboard-charts: 10;
+
+/******************************** charts ********************************/
+@z-index-chart--dragging: @z-index-chart + 1;
+@z-index-chart: 1;
+
+/************************************************************************/
+/* TYPOGRAPHY */
+/* Commonly used font weights, line heights, etc. These should be the */
+/* core values used to build more complex styles for headers, etc. */
+/************************************************************************/
+@font-size-base: 14px; // Base `rem` units on this, as needed.
+
+@font-weight-light: {{theme.fontWeightLight}};
+@font-weight-normal: {{theme.fontWeightNormal}};
+@font-weight-bold: {{theme.fontWeightStrong}};
+
+@font-size-xxs: 7px;
+@font-size-xs: 8px;
+@font-size-s: {{theme.fontSizeSM}}px;
+@font-size-m: {{theme.fontSize}}px;
+@font-size-l: {{theme.fontSizeLG}}px;
+@font-size-xl: {{theme.fontSizeXL}}px;
+@font-size-xxl: 28px;
+
+// **************************** Line Heights ****************************
+@line-height-base: 1.4;
+// Ranged Sizes
+@line-height-tight: 1;
+@line-height-normal: @line-height-base;
+@line-height-loose: 2;
+
+// ****************************** Features *******************************
+@use-ligatures: false;
+
+// setting up OTF settings based on @use-ligatures:
+.set-otf-options(@use-ligatures);
+
+.set-otf-options(true) {
+ @font-feature-settings:
+ 'liga' on,
+ 'calt' on;
+}
+
+.set-otf-options(false) {
+ @font-feature-settings:
+ 'liga' off,
+ 'calt' off;
+}
+
+// ****************************** Families ******************************
+
+@font-family-sans-serif: {{theme.fontFamily}};
+@font-family-monospace: {{theme.fontFamilyCode}};
+@font-family-base: @font-family-sans-serif;
+@line-height-tight: 1;
+
+/************************************************************************/
+/* TRANSITIONS */
+/************************************************************************/
+@timing-normal: {{theme.motionDurationMid}};
+
+/************************************************************************/
+/* BORDER RADII */
+/* Standard border-radius settings */
+/************************************************************************/
+@border-radius-normal: 4px;
+@border-radius-large: (@border-radius-normal * 2);
+
+/************************************************************************/
+/* BOOTSTRAP/BOOTSWATCH/COSMO */
+/* These are the legacy Cosmo theme overrides to Bootswatch's */
+/* overrides to Bootstrap. We should consolidate/deprecate these */
+/* in favor of custom/reusable CSS wherever possible */
+/************************************************************************/
+
+@import '../less/cosmo/variables.less';
diff --git a/superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs b/superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs
new file mode 100644
index 0000000000000..9b48d2143ab8f
--- /dev/null
+++ b/superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs
@@ -0,0 +1,61 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+@import './less/variables.less';
+
+.reactable-pagination td {
+ padding: 15px 0 0 0 !important;
+}
+
+.reactable-pagination a:focus {
+ text-decoration: none;
+ color: @gray-dark;
+ outline: 1;
+}
+
+.reactable-page-button,
+.reactable-next-page,
+.reactable-previous-page {
+ background: @lightest;
+ border-radius: @border-radius-normal;
+ border: 1px solid @gray-light;
+ color: @gray-dark;
+ display: inline-block;
+ font-size: @font-size-s;
+ margin-right: 5px;
+ padding: 5px 10px;
+ text-align: center;
+ text-decoration: none;
+ vertical-align: middle;
+ white-space: nowrap;
+
+ &:hover {
+ background-color: @gray-bg;
+ border-color: @gray;
+ color: @gray-dark;
+ text-decoration: none;
+ }
+}
+
+.reactable-current-page {
+ border: 1px solid @gray-light;
+ color: @gray-dark;
+ font-weight: @font-weight-bold;
+ pointer-events: none;
+ opacity: 0.65;
+}
diff --git a/superset-frontend/src/assets/stylesheets/superset.less.hbs b/superset-frontend/src/assets/stylesheets/superset.less.hbs
new file mode 100644
index 0000000000000..7bf8c27fff60e
--- /dev/null
+++ b/superset-frontend/src/assets/stylesheets/superset.less.hbs
@@ -0,0 +1,552 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+@import './less/index.less';
+@import './less/variables.less';
+@import './less/index.less';
+
+@datasource-sql-expression-width: 315px;
+
+span,
+div,
+i {
+ &:focus {
+ outline: none;
+ }
+}
+
+.alert.alert-danger > .debugger {
+ color: @danger;
+}
+
+.no-wrap {
+ white-space: nowrap;
+}
+
+input.form-control {
+ background-color: @lightest;
+}
+
+.disabledButton {
+ pointer-events: none;
+}
+
+.col-left-fixed {
+ width: 350px;
+ position: absolute;
+ float: left;
+}
+
+.col-offset {
+ margin-left: 365px;
+}
+
+.slice_description {
+ padding: 8px;
+ margin: 5px 0;
+ border: 1px solid @gray-light;
+ background-color: @gray-bg;
+ border-radius: @border-radius-large;
+ font-size: @font-size-s;
+}
+
+.slice_info {
+ cursor: pointer;
+}
+
+.padded {
+ padding: 10px;
+}
+
+.intable-longtext {
+ max-height: 200px;
+ overflow: auto;
+}
+
+.container-fluid {
+ text-align: left;
+ padding-left: 16px;
+ padding-right: 16px;
+}
+
+input[type='checkbox'] {
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+}
+
+.widget-is-cached {
+ display: none;
+}
+
+.header span.label {
+ margin-left: 5px;
+ margin-right: 5px;
+}
+
+.notbtn {
+ cursor: default;
+ box-shadow: none;
+ border: 1px solid @gray;
+}
+
+hr {
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+
+span.title-block {
+ background-color: @gray-bg;
+ border-radius: @border-radius-large;
+ padding: 6px 12px;
+ margin: 0px 10px;
+ font-size: @font-size-xl;
+}
+
+.nvtooltip {
+ table td {
+ font-size: @font-size-s !important;
+ }
+}
+
+div.navbar {
+ .dropdown-menu .fineprint {
+ line-height: 1.5rem;
+ padding: 10px 20px 5px 20px;
+ color: @gray-light;
+ font-size: @font-size-m;
+
+ div {
+ white-space: nowrap;
+ }
+ }
+}
+
+.datasource {
+ form {
+ div.form-control,
+ input.form-control {
+ margin-bottom: 5px !important;
+ }
+ }
+
+ .tooltip-inner {
+ max-width: 350px;
+ }
+}
+
+img.viz-thumb-option {
+ width: 100px;
+ border: 1px solid @gray;
+ margin-right: 5px;
+ border-radius: @border-radius-large;
+}
+
+.select2-drop.bigdrop .select2-results {
+ max-height: 700px;
+}
+
+#is_cached {
+ display: none;
+}
+
+.slice_container.faded {
+ opacity: 0.2;
+}
+
+.navbar .alert {
+ padding: 5px 10px;
+ margin-top: 8px;
+ margin-bottom: 0;
+}
+
+.table-condensed {
+ font-size: @font-size-s;
+}
+
+.table-condensed input[type='checkbox'] {
+ float: left;
+}
+
+table.table-no-hover tr:hover {
+ background-color: initial;
+}
+
+.editable-title input {
+ outline: none;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+ padding: 0;
+ cursor: initial;
+}
+
+.editable-title textarea {
+ outline: none;
+ background: transparent;
+ box-shadow: none;
+ cursor: initial;
+ border: 1px solid @gray;
+ border-radius: @border-radius-normal;
+}
+
+.editable-title input[type='text'] {
+ border: 1px solid @gray;
+ border-radius: @border-radius-normal;
+ padding: 2px;
+}
+
+.editable-title.datasource-sql-expression {
+ font-feature-settings: @font-feature-settings;
+ font-family: @font-family-monospace;
+ display: inline-block;
+ min-width: @datasource-sql-expression-width;
+ width: 100%;
+}
+
+.editable-title.datasource-sql-expression input {
+ width: 95%;
+ padding-bottom: 5px;
+}
+
+.editable-title.datasource-sql-expression textarea {
+ min-height: 100px;
+ width: 95%;
+}
+
+.editable-title input[type='button'] {
+ border-color: transparent;
+ background: transparent;
+ font-size: inherit;
+ white-space: normal;
+ text-align: left;
+ cursor: initial;
+}
+
+.editable-title.editable-title--editable input[type='button'] {
+ cursor: pointer;
+}
+
+.editable-title.editable-title--editing input[type='button'] {
+ cursor: text;
+}
+
+.anchor-link-container {
+ position: absolute;
+
+ .btn.btn-sm,
+ .btn.btn-sm:active {
+ border: none;
+ padding-top: 0;
+ padding-bottom: 0;
+ background: none;
+ box-shadow: none;
+ }
+
+ .fa.fa-link {
+ position: relative;
+ top: 2px;
+ right: 0;
+ visibility: hidden;
+ font-size: @font-size-s;
+ text-align: center;
+ vertical-align: middle;
+ }
+}
+
+.dashboard-component.dashboard-component-header .anchor-link-container {
+ .fa.fa-link {
+ font-size: @font-size-l;
+ }
+}
+
+.dashboard-component.dashboard-component-header:hover {
+ .anchor-link-container {
+ cursor: pointer;
+
+ .fa.fa-link {
+ visibility: visible;
+ }
+ }
+}
+
+.m-r-5 {
+ margin-right: 5px;
+}
+
+.m-r-3 {
+ margin-right: 3px;
+}
+
+.m-t-4 {
+ margin-top: 4px;
+}
+
+.m-t-5 {
+ margin-top: 5px;
+}
+
+.m-t-10 {
+ margin-top: 10px;
+}
+
+.m-t-20 {
+ margin-top: 20px;
+}
+
+.m-b-10 {
+ margin-bottom: 10px;
+}
+
+.m-l-2 {
+ margin-left: 2px;
+}
+
+.m-l-4 {
+ margin-left: 4px;
+}
+
+.m-l-5 {
+ margin-left: 5px;
+}
+
+.m-l-10 {
+ margin-left: 10px;
+}
+
+.m-l-25 {
+ margin-left: 25px;
+}
+
+.p-l-0 {
+ padding-left: 0;
+}
+
+.p-t-8 {
+ padding-top: 8;
+}
+
+.p-r-2 {
+ padding-right: 2;
+}
+
+.list-container {
+ position: relative;
+}
+
+.list-search-container {
+ position: relative;
+}
+
+.list-search-container .dropdown-toggle {
+ position: absolute;
+ top: -43px;
+ right: 25px;
+ border: 0;
+ padding: 0 18px;
+}
+
+.list-search-container .fa-filter {
+ position: relative;
+ left: -8px;
+}
+
+.list-search-container .dropdown-menu {
+ top: -19px;
+ right: 0;
+ left: auto;
+ float: none;
+}
+
+.list-container .pagination-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+ padding-bottom: 20px;
+}
+
+.list-container .pagination-container .pagination {
+ margin: 0 15px;
+}
+
+.list-container .pagination-container strong {
+ margin-right: 5px;
+}
+
+.list-container .list-add-action {
+ position: absolute;
+ top: -30px;
+ right: 15px;
+}
+
+.list-container .form-actions-container {
+ padding: 0 0 20px 10px;
+ display: inline;
+}
+
+.form-actions-container button {
+ display: flex;
+
+ .caret {
+ margin: 0 8px;
+ }
+}
+
+.list-container .filter-action {
+ margin: 10px 10px 0 10px;
+ padding-bottom: 15px;
+}
+
+.list-add-action .btn.btn-sm {
+ padding: 6px 6px;
+ font-size: @font-size-xs;
+ line-height: 2px;
+ border-radius: 50%;
+ box-shadow: 2px 2px 4px -1px fade(@darkest, @opacity-light);
+ i {
+ width: 10px;
+ }
+}
+
+iframe {
+ border: none;
+ width: 100%;
+}
+
+.text-transparent {
+ color: transparent;
+}
+
+.pointer {
+ cursor: pointer;
+}
+
+.popover {
+ max-width: 500px;
+}
+
+.float-left {
+ float: left;
+}
+
+.float-right {
+ float: right;
+}
+
+g.annotation-container {
+ line {
+ stroke: @brand-primary;
+ }
+
+ rect.annotation {
+ stroke: @brand-primary;
+ fill-opacity: 0.1;
+ stroke-width: 1;
+ }
+}
+
+.stroke-primary {
+ stroke: @brand-primary;
+}
+
+.reactable-header-sortable {
+ position: relative;
+ padding-right: 40px;
+
+ &::after {
+ font: normal normal normal 14px/1 FontAwesome;
+ content: '\f0dc';
+ margin-left: 10px;
+ color: @brand-primary;
+ }
+}
+
+.reactable-header-sort-asc::after {
+ content: '\f0de';
+ color: @brand-primary;
+}
+
+.reactable-header-sort-desc::after {
+ content: '\f0dd';
+ color: @brand-primary;
+}
+
+tr.reactable-column-header th.reactable-header-sortable {
+ padding-right: 17px;
+}
+
+.align-right {
+ text-align: right;
+}
+
+td.filtered {
+ background-color: lighten(desaturate(@brand-primary, 50%), 50%);
+}
+
+.table-name {
+ font-size: @font-size-l;
+}
+.select2-container-multi {
+ width: 100% !important;
+}
+
+/*
+Hides the logo while loading the page.
+Emotion styles will take care of the correct styling
+*/
+.navbar-brand {
+ display: none;
+}
+
+// Making native radio buttons use brand color
+input[type='radio']:after {
+ width: 15px;
+ height: 15px;
+ border-radius: 15px;
+ top: -2px;
+ left: -1px;
+ position: relative;
+ background-color: #fff;
+ content: '';
+ display: inline-block;
+ visibility: visible;
+ border: 2px solid @gray;
+}
+
+input[type='radio']:checked:after {
+ width: 15px;
+ height: 15px;
+ border-radius: 15px;
+ top: -2px;
+ left: -1px;
+ position: relative;
+ background-color: #fff;
+ content: '';
+ display: inline-block;
+ visibility: visible;
+ border: 5px solid @brand-primary;
+}
+hr {
+ border-top: 1px solid @gray-light;
+}
+.ace_gutter-cell.ace_error {
+ background-image: url('../images/icons/error_solid_small_red.svg') !important;
+ background-position: -2px center !important;
+}
diff --git a/superset-frontend/src/components/Alert/Alert.test.tsx b/superset-frontend/src/components/Alert/Alert.test.tsx
deleted file mode 100644
index f7cb342a75d54..0000000000000
--- a/superset-frontend/src/components/Alert/Alert.test.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { render, screen, waitFor } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
-import Alert, { AlertProps } from 'src/components/Alert';
-
-type AlertType = Pick;
-type AlertTypeValue = AlertType[keyof AlertType];
-
-test('renders with default props', async () => {
- render(
+
{children}
);
diff --git a/superset-frontend/src/components/AsyncAceEditor/index.tsx b/superset-frontend/src/components/AsyncAceEditor/index.tsx
index c656f4008674b..75a48624b62ab 100644
--- a/superset-frontend/src/components/AsyncAceEditor/index.tsx
+++ b/superset-frontend/src/components/AsyncAceEditor/index.tsx
@@ -192,7 +192,7 @@ export default function AsyncAceEditor(
.ant-tag {
diff --git a/superset-frontend/src/components/Badge/index.tsx b/superset-frontend/src/components/Badge/index.tsx
index 463884e5075bf..171229f601040 100644
--- a/superset-frontend/src/components/Badge/index.tsx
+++ b/superset-frontend/src/components/Badge/index.tsx
@@ -27,9 +27,7 @@ const Badge = styled((props: AntdBadgeProps) => ({
- // 'border-radius': `${theme.gridUnit}px`,
- border: `1px solid ${theme.colors.grayscale.light2}`,
'.antd5-card-body': {
- padding: padded ? theme.gridUnit * 4 : theme.gridUnit,
+ padding: padded ? theme.sizeUnit * 4 : theme.sizeUnit,
},
})}
/>
diff --git a/superset-frontend/src/components/CertifiedBadge/index.tsx b/superset-frontend/src/components/CertifiedBadge/index.tsx
index 65179d046eab2..5dc5ded10f35b 100644
--- a/superset-frontend/src/components/CertifiedBadge/index.tsx
+++ b/superset-frontend/src/components/CertifiedBadge/index.tsx
@@ -47,7 +47,7 @@ function CertifiedBadge({
}
>
- css`
- color: ${color || theme.colors.text.label};
- margin-left: ${theme.gridUnit * 2}px;
+ color: ${color || theme.colorTextLabel};
+ margin-left: ${theme.sizeUnit * 2}px;
&.anticon {
font-size: unset;
.anticon {
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
index 47666db7802f0..4e400bcfc5cae 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
@@ -298,12 +298,7 @@ export const DrillByMenuItems = ({
{showSearch && (
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx
index 987003f16d250..55f5b5b2f879b 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx
@@ -136,7 +136,7 @@ const ModalFooter = ({ formData, closeModal }: ModalFooterProps) => {
onClick={closeModal}
data-test="close-drill-by-modal"
css={css`
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
`}
>
{t('Close')}
@@ -439,8 +439,8 @@ export default function DrillByModal({
responsive
resizable
resizableConfig={{
- minHeight: theme.gridUnit * 128,
- minWidth: theme.gridUnit * 128,
+ minHeight: theme.sizeUnit * 128,
+ minWidth: theme.sizeUnit * 128,
defaultSize: {
width: 'auto',
height: '80vh',
diff --git a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx
index bd2729633e645..3dcb613b4e9dd 100644
--- a/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/useDisplayModeToggle.tsx
@@ -31,7 +31,7 @@ export const useDisplayModeToggle = () => {
() => (
css`
- margin-bottom: ${theme.gridUnit * 6}px;
+ margin-bottom: ${theme.sizeUnit * 6}px;
.ant-radio-button-wrapper-checked:not(
.ant-radio-button-wrapper-disabled
):focus-within {
diff --git a/superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.tsx b/superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.tsx
index c815f4b5653a4..66f23249f484b 100644
--- a/superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/useDrillByBreadcrumbs.tsx
@@ -41,12 +41,12 @@ const BreadcrumbItem = styled(AntdBreadcrumb.Item)<{
${({ theme, isClickable, isHidden }) => css`
cursor: ${isClickable ? 'pointer' : 'auto'};
color: ${theme.colors.grayscale.light1};
- transition: color ease-in ${theme.transitionTiming}s;
+ transition: color ease-in ${theme.motionDurationMid};
.ant-breadcrumb > span:last-child > & {
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorText};
}
&:hover {
- color: ${isClickable ? theme.colors.grayscale.dark1 : 'inherit'};
+ color: ${isClickable ? theme.colorText : 'inherit'};
}
visibility: ${isHidden ? 'hidden' : 'visible'};
`}
@@ -78,7 +78,7 @@ export const useDrillByBreadcrumbs = (
return (
css`
- margin: ${theme.gridUnit * 2}px 0 ${theme.gridUnit * 4}px;
+ margin: ${theme.sizeUnit * 2}px 0 ${theme.sizeUnit * 4}px;
`}
>
{breadcrumbsData
diff --git a/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx b/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx
index 4d85f949b294c..5b01a5fad6af9 100644
--- a/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx
@@ -25,7 +25,7 @@ const DATA_SIZE = 15;
const PaginationContainer = styled.div`
${({ theme }) => css`
& .pagination-container {
- bottom: ${-theme.gridUnit * 4}px;
+ bottom: ${-theme.sizeUnit * 4}px;
}
`}
`;
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.tsx
index e20bc0290f777..a05f4c69ad49d 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.tsx
@@ -89,8 +89,8 @@ const Filter = ({
const StyledFilter = styled(Filter)`
${({ theme }) => `
- font-weight: ${theme.typography.weights.bold};
- color: ${theme.colors.primary.base};
+ font-weight: ${theme.fontWeightStrong};
+ color: ${theme.colorPrimary};
`}
`;
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailModal.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailModal.tsx
index fa8f22262cbdf..240acdc45c681 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailModal.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailModal.tsx
@@ -69,7 +69,7 @@ const ModalFooter = ({
onClick={closeModal}
data-test="close-drilltodetail-modal"
css={css`
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
`}
>
{t('Close')}
@@ -130,8 +130,8 @@ export default function DrillDetailModal({
responsive
resizable
resizableConfig={{
- minHeight: theme.gridUnit * 128,
- minWidth: theme.gridUnit * 128,
+ minHeight: theme.sizeUnit * 128,
+ minWidth: theme.sizeUnit * 128,
defaultSize: {
width: 'auto',
height: '75vh',
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
index bcab733f48c00..74cbe81bc62d7 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
@@ -273,7 +273,7 @@ export default function DrillDetailPane({
tableContent = (
{responseError}
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx
index cdf74c6f67f2e..4cdac34090e1f 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx
@@ -81,15 +81,15 @@ export default function TableControls({
css={css`
display: flex;
justify-content: space-between;
- padding: ${theme.gridUnit / 2}px 0;
- margin-bottom: ${theme.gridUnit * 2}px;
+ padding: ${theme.sizeUnit / 2}px 0;
+ margin-bottom: ${theme.sizeUnit * 2}px;
`}
>
{filterTags.map(({ colName, val }) => (
@@ -98,19 +98,19 @@ export default function TableControls({
onClose={removeFilter.bind(null, colName)}
key={colName}
css={css`
- height: ${theme.gridUnit * 6}px;
+ height: ${theme.sizeUnit * 6}px;
display: flex;
align-items: center;
- padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
- margin-right: ${theme.gridUnit * 4}px;
- margin-bottom: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit / 2}px ${theme.sizeUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
line-height: 1.2;
`}
data-test="filter-col"
>
{colName}
diff --git a/superset-frontend/src/components/Checkbox/CheckboxIcons.tsx b/superset-frontend/src/components/Checkbox/CheckboxIcons.tsx
index 2ad2d0f8d83df..9eb1bc5d5ea07 100644
--- a/superset-frontend/src/components/Checkbox/CheckboxIcons.tsx
+++ b/superset-frontend/src/components/Checkbox/CheckboxIcons.tsx
@@ -30,7 +30,7 @@ export const CheckboxChecked = () => {
>
{
const arrowStyle = window.getComputedStyle(arrow);
expect(headerStyle.fontWeight).toBe(
- supersetTheme.typography.weights.bold.toString(),
- );
- expect(headerStyle.fontSize).toBe(`${supersetTheme.gridUnit * 4}px`);
- expect(headerStyle.color).toBe(
- hexToRgb(supersetTheme.colors.grayscale.light4),
+ supersetTheme.fontWeightStrong.toString(),
);
+ expect(headerStyle.fontSize).toBe(`${supersetTheme.sizeUnit * 4}px`);
expect(arrowStyle.transition).toBe('transform 0.24s');
});
diff --git a/superset-frontend/src/components/Collapse/index.tsx b/superset-frontend/src/components/Collapse/index.tsx
index b2e0e206b6cde..00fe9484d09d7 100644
--- a/superset-frontend/src/components/Collapse/index.tsx
+++ b/superset-frontend/src/components/Collapse/index.tsx
@@ -35,11 +35,9 @@ const Collapse = Object.assign(
.ant-collapse-item {
.ant-collapse-header {
font-weight: ${({ bold, theme }) =>
- bold
- ? theme.typography.weights.bold
- : theme.typography.weights.normal};
+ bold ? theme.fontWeightStrong : theme.fontWeightNormal};
font-size: ${({ bigger, theme }) =>
- bigger ? `${theme.gridUnit * 4}px` : 'inherit'};
+ bigger ? `${theme.sizeUnit * 4}px` : 'inherit'};
.ant-collapse-arrow svg {
transition: ${({ animateArrows }) =>
@@ -58,9 +56,9 @@ const Collapse = Object.assign(
${({ light, theme }) =>
light &&
`
- color: ${theme.colors.grayscale.light4};
+ color: ${theme.colorTextSecondary};
.ant-collapse-arrow svg {
- color: ${theme.colors.grayscale.light4};
+ color: ${theme.colorTextSecondary};
}
`}
@@ -68,13 +66,13 @@ const Collapse = Object.assign(
ghost &&
bordered &&
`
- border-bottom: 1px solid ${theme.colors.grayscale.light3};
+ border-bottom: 1px solid ${theme.colorBorderSecondary};
`}
}
.ant-collapse-content {
.ant-collapse-content-box {
.loading.inline {
- margin: ${({ theme }) => theme.gridUnit * 12}px auto;
+ margin: ${({ theme }) => theme.sizeUnit * 12}px auto;
display: block;
}
}
diff --git a/superset-frontend/src/components/CronPicker/CronPicker.tsx b/superset-frontend/src/components/CronPicker/CronPicker.tsx
index 9c65106e18ca5..7b0528b1c1862 100644
--- a/superset-frontend/src/components/CronPicker/CronPicker.tsx
+++ b/superset-frontend/src/components/CronPicker/CronPicker.tsx
@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { ConfigProvider } from 'antd';
import { styled, t } from '@superset-ui/core';
import ReactCronPicker, { Locale, CronProps } from 'react-js-cron';
@@ -103,11 +102,7 @@ export const LOCALE: Locale = {
};
export const CronPicker = styled((props: CronProps) => (
- trigger.parentElement as HTMLElement}
- >
-
+ = ({
({ marginBottom: theme.gridUnit * 4 })}
+ css={theme => ({ marginBottom: theme.sizeUnit * 4 })}
message={
<>
{t('Warning!')} {CHANGE_WARNING_MSG}
diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx b/superset-frontend/src/components/Datasource/CollectionTable.tsx
index 2345931f8c725..73631b72337ef 100644
--- a/superset-frontend/src/components/Datasource/CollectionTable.tsx
+++ b/superset-frontend/src/components/Datasource/CollectionTable.tsx
@@ -121,20 +121,20 @@ const CrudTableWrapper = styled.div<{ stickyHeader?: boolean }>`
`}
${({ theme }) => `
th span {
- vertical-align: ${theme.gridUnit * -2}px;
+ vertical-align: ${theme.sizeUnit * -2}px;
}
.text-right {
text-align: right;
}
.empty-collection {
- padding: ${theme.gridUnit * 2 + 2}px;
+ padding: ${theme.sizeUnit * 2 + 2}px;
}
.tiny-cell {
- width: ${theme.gridUnit + 1}px;
+ width: ${theme.sizeUnit + 1}px;
}
i.fa-caret-down,
i.fa-caret-up {
- width: ${theme.gridUnit + 1}px;
+ width: ${theme.sizeUnit + 1}px;
}
td.expanded {
border-top: 0;
@@ -145,13 +145,13 @@ const CrudTableWrapper = styled.div<{ stickyHeader?: boolean }>`
const CrudButtonWrapper = styled.div`
text-align: right;
- ${({ theme }) => `margin-bottom: ${theme.gridUnit * 2}px`}
+ ${({ theme }) => `margin-bottom: ${theme.sizeUnit * 2}px`}
`;
const StyledButtonWrapper = styled.span`
${({ theme }) => `
- margin-top: ${theme.gridUnit * 3}px;
- margin-left: ${theme.gridUnit * 3}px;
+ margin-top: ${theme.sizeUnit * 3}px;
+ margin-left: ${theme.sizeUnit * 3}px;
`}
`;
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index d30b67ad2a751..1820418634ce1 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -61,11 +61,11 @@ import Field from './Field';
const DatasourceContainer = styled.div`
.change-warning {
margin: 16px 10px 0;
- color: ${({ theme }) => theme.colors.warning.base};
+ color: ${({ theme }) => theme.colorWarning};
}
.change-warning .bold {
- font-weight: ${({ theme }) => theme.typography.weights.bold};
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
}
.form-group.has-feedback > .help-block {
@@ -82,7 +82,7 @@ const FlexRowContainer = styled.div`
display: flex;
svg {
- margin-right: ${({ theme }) => theme.gridUnit}px;
+ margin-right: ${({ theme }) => theme.sizeUnit}px;
}
`;
@@ -95,14 +95,14 @@ const StyledTableTabs = styled(Tabs)`
const StyledBadge = styled(Badge)`
.antd5-badge-count {
- line-height: ${({ theme }) => theme.gridUnit * 4}px;
- height: ${({ theme }) => theme.gridUnit * 4}px;
- margin-left: ${({ theme }) => theme.gridUnit}px;
+ line-height: ${({ theme }) => theme.sizeUnit * 4}px;
+ height: ${({ theme }) => theme.sizeUnit * 4}px;
+ margin-left: ${({ theme }) => theme.sizeUnit}px;
}
`;
const EditLockContainer = styled.div`
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
display: flex;
align-items: center;
a {
@@ -112,14 +112,14 @@ const EditLockContainer = styled.div`
const ColumnButtonWrapper = styled.div`
text-align: right;
- ${({ theme }) => `margin-bottom: ${theme.gridUnit * 2}px`}
+ ${({ theme }) => `margin-bottom: ${theme.sizeUnit * 2}px`}
`;
const StyledLabelWrapper = styled.div`
display: flex;
align-items: center;
span {
- margin-right: ${({ theme }) => theme.gridUnit}px;
+ margin-right: ${({ theme }) => theme.sizeUnit}px;
}
`;
@@ -129,14 +129,14 @@ const StyledColumnsTabWrapper = styled.div`
}
.ant-tag {
- margin-top: ${({ theme }) => theme.gridUnit}px;
+ margin-top: ${({ theme }) => theme.sizeUnit}px;
}
`;
const StyledButtonWrapper = styled.span`
${({ theme }) => `
- margin-top: ${theme.gridUnit * 3}px;
- margin-left: ${theme.gridUnit * 3}px;
+ margin-top: ${theme.sizeUnit * 3}px;
+ margin-left: ${theme.sizeUnit * 3}px;
`}
`;
@@ -1224,7 +1224,7 @@ class DatasourceEditor extends PureComponent {
if (this.state.errors.length > 0) {
return (
({ marginBottom: theme.gridUnit * 4 })}
+ css={theme => ({ marginBottom: theme.sizeUnit * 4 })}
type="error"
message={
<>
@@ -1408,7 +1408,7 @@ class DatasourceEditor extends PureComponent {
{this.renderErrors()}
({ marginBottom: theme.gridUnit * 4 })}
+ css={theme => ({ marginBottom: theme.sizeUnit * 4 })}
type="warning"
message={
<>
diff --git a/superset-frontend/src/components/Datasource/DatasourceModal.tsx b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
index a6f812786f2e4..a422fc83ff4a6 100644
--- a/superset-frontend/src/components/Datasource/DatasourceModal.tsx
+++ b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
@@ -245,8 +245,8 @@ const DatasourceModal: FunctionComponent = ({
({
- marginTop: theme.gridUnit * 4,
- marginBottom: theme.gridUnit * 4,
+ marginTop: theme.sizeUnit * 4,
+ marginBottom: theme.sizeUnit * 4,
})}
type="warning"
showIcon
diff --git a/superset-frontend/src/components/Datasource/Field.tsx b/superset-frontend/src/components/Datasource/Field.tsx
index 3751e414b1d97..5f1babe93ac60 100644
--- a/superset-frontend/src/components/Datasource/Field.tsx
+++ b/superset-frontend/src/components/Datasource/Field.tsx
@@ -80,7 +80,7 @@ export default function Field({
({
color: theme.colors.grayscale.base,
- [inline ? 'marginLeft' : 'marginTop']: theme.gridUnit,
+ [inline ? 'marginLeft' : 'marginTop']: theme.sizeUnit,
})}
>
{description}
diff --git a/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx b/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx
index 563f48f07f7f6..0ea5c8dfb14a5 100644
--- a/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx
+++ b/superset-frontend/src/components/DatePicker/DatePicker.stories.tsx
@@ -87,9 +87,11 @@ InteractiveDatePicker.args = {
InteractiveDatePicker.argTypes = interactiveTypes;
-export const InteractiveRangePicker = (args: RangePickerProps) => (
-
-);
+export const InteractiveRangePicker = (
+ args: Omit
& {
+ picker?: 'date';
+ },
+) => {
{label}
{selectedKeys?.includes(key) && (
= {}) => ({
title: 'Chart title',
diff --git a/superset-frontend/src/components/DynamicEditableTitle/index.tsx b/superset-frontend/src/components/DynamicEditableTitle/index.tsx
index dd439194383ad..695a4071ab17e 100644
--- a/superset-frontend/src/components/DynamicEditableTitle/index.tsx
+++ b/superset-frontend/src/components/DynamicEditableTitle/index.tsx
@@ -41,8 +41,8 @@ export type DynamicEditableTitleProps = {
const titleStyles = (theme: SupersetTheme) => css`
display: flex;
- font-size: ${theme.typography.sizes.xl}px;
- font-weight: ${theme.typography.weights.bold};
+ font-size: ${theme.fontSizeXL}px;
+ font-weight: ${theme.fontWeightStrong};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -63,9 +63,11 @@ const titleStyles = (theme: SupersetTheme) => css`
border: none;
padding: 0;
outline: none;
+ color: ${theme.colorText};
+ background-color: ${theme.colorBgContainer};
&::placeholder {
- color: ${theme.colors.grayscale.light1};
+ color: ${theme.colorTextTertiary};
}
}
@@ -77,7 +79,7 @@ const titleStyles = (theme: SupersetTheme) => css`
}
`;
-export const DynamicEditableTitle = memo(
+const DynamicEditableTitle = memo(
({
title,
placeholder,
@@ -224,3 +226,4 @@ export const DynamicEditableTitle = memo(
);
},
);
+export default DynamicEditableTitle;
diff --git a/superset-frontend/src/components/EditableTitle/index.tsx b/superset-frontend/src/components/EditableTitle/index.tsx
index fc01fb9f63b99..73047e2b84e84 100644
--- a/superset-frontend/src/components/EditableTitle/index.tsx
+++ b/superset-frontend/src/components/EditableTitle/index.tsx
@@ -224,7 +224,7 @@ export default function EditableTitle({
to={url}
data-test="editable-title-input"
css={(theme: SupersetTheme) => css`
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorText};
text-decoration: none;
:hover {
text-decoration: underline;
diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx
index a083b6cdcfaa8..d1c973619d619 100644
--- a/superset-frontend/src/components/EmptyState/index.tsx
+++ b/superset-frontend/src/components/EmptyState/index.tsx
@@ -74,10 +74,10 @@ const EmptyStateContainer = styled.div`
flex-direction: column;
width: 100%;
height: 100%;
- color: ${theme.colors.grayscale.light2};
+ color: ${theme.colorTextQuaternary};
align-items: center;
justify-content: center;
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
text-align: center;
& .antd5-empty-image svg {
@@ -97,28 +97,24 @@ const EmptyStateContainer = styled.div`
const Title = styled.p<{ size: EmptyStateSize }>`
${({ theme, size }) => css`
- font-size: ${size === 'large'
- ? theme.typography.sizes.l
- : theme.typography.sizes.m}px;
+ font-size: ${size === 'large' ? theme.fontSizeLG : theme.fontSize}px;
color: ${theme.colors.grayscale.light1};
- margin-top: ${size === 'large' ? theme.gridUnit * 4 : theme.gridUnit * 2}px;
- font-weight: ${theme.typography.weights.bold};
+ margin-top: ${size === 'large' ? theme.sizeUnit * 4 : theme.sizeUnit * 2}px;
+ font-weight: ${theme.fontWeightStrong};
`}
`;
const Description = styled.p<{ size: EmptyStateSize }>`
${({ theme, size }) => css`
- font-size: ${size === 'large'
- ? theme.typography.sizes.m
- : theme.typography.sizes.s}px;
+ font-size: ${size === 'large' ? theme.fontSize : theme.fontSizeSM}px;
color: ${theme.colors.grayscale.light1};
- margin-top: ${theme.gridUnit * 2}px;
+ margin-top: ${theme.sizeUnit * 2}px;
`}
`;
const ActionButton = styled(Button)`
${({ theme }) => css`
- margin-top: ${theme.gridUnit * 4}px;
+ margin-top: ${theme.sizeUnit * 4}px;
z-index: 1;
`}
`;
@@ -175,8 +171,8 @@ export const EmptyState: React.FC = ({
css`
max-width: ${size === 'large'
- ? theme.gridUnit * 150
- : theme.gridUnit * 100}px;
+ ? theme.sizeUnit * 150
+ : theme.sizeUnit * 100}px;
`}
>
{title &&
{title} }
diff --git a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx
index 9a2b0f103ce07..5e1a2ecce3c84 100644
--- a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx
+++ b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.test.tsx
@@ -70,7 +70,7 @@ test('should render with warning theme', () => {
render(
);
expect(screen.getByRole('alert')).toHaveStyle(
`
- backgroundColor: ${supersetTheme.colors.warning.light2};
+ color: ${supersetTheme.colorWarningText};
`,
);
});
@@ -83,7 +83,7 @@ test('should render with error theme', () => {
render(
);
expect(screen.getByRole('alert')).toHaveStyle(
`
- backgroundColor: ${supersetTheme.colors.error.light2};
+ color: ${supersetTheme.colorErrorText};
`,
);
});
diff --git a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
index 39ae748970072..26f147bb738dd 100644
--- a/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/BasicErrorAlert.tsx
@@ -16,30 +16,18 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { ErrorLevel, styled, useTheme } from '@superset-ui/core';
+import { ErrorLevel, styled, themeObject, useTheme } from '@superset-ui/core';
import Icons from 'src/components/Icons';
-const StyledContainer = styled.div<{ level: ErrorLevel }>`
- display: flex;
- flex-direction: row;
- background-color: ${({ level, theme }) => theme.colors[level].light2};
- border-radius: ${({ theme }) => theme.borderRadius}px;
- border: 1px solid ${({ level, theme }) => theme.colors[level].base};
- color: ${({ level, theme }) => theme.colors[level].dark2};
- padding: ${({ theme }) => theme.gridUnit * 2}px;
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
- width: 100%;
-`;
-
const StyledContent = styled.div`
display: flex;
flex-direction: column;
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
overflow: hidden;
`;
const StyledTitle = styled.span`
- font-weight: ${({ theme }) => theme.typography.weights.bold};
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
`;
interface BasicErrorAlertProps {
@@ -54,19 +42,30 @@ export default function BasicErrorAlert({
title,
}: BasicErrorAlertProps) {
const theme = useTheme();
- const iconColor = theme.colors[level].base;
+ const variants = themeObject.getColorVariants(level);
+ const style: React.CSSProperties = {
+ backgroundColor: variants.bg,
+ borderColor: variants.border,
+ color: variants.text,
+ display: 'flex',
+ flexDirection: 'row',
+ borderRadius: `${theme.borderRadius}px`,
+ padding: `${theme.sizeUnit * 2}px`,
+ marginBottom: `${theme.sizeUnit}px`,
+ width: '100%',
+ };
return (
-
+
{level === 'error' ? (
-
+
) : (
-
+
)}
{title}
{body}
-
+
{children}
-);
-
export default {
title: 'Components/ErrorAlert',
component: ErrorAlert,
@@ -47,12 +43,12 @@ export const Gallery: StoryFn = () => (
Non-Compact Errors
+
+
+
(
descriptionDetails={detailsExample}
descriptionDetailsCollapsed
/>
-
+
+
(
descriptionDetailsCollapsed
descriptionPre
/>
-
+
+
(
descriptionDetails={detailsExample}
descriptionDetailsCollapsed={false}
/>
-
+
+
(
descriptionDetailsCollapsed={false}
descriptionPre={false}
/>
-
+
+
+
+
+
Compact Errors (with Modal)
+
(
description={sqlErrorDescription}
descriptionDetails={detailsExample}
/>
-
+
+
(
descriptionDetails={detailsExample}
descriptionDetailsCollapsed
/>
-
+
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
index a46b966072188..706d59f12190e 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.test.tsx
@@ -17,7 +17,8 @@
* under the License.
*/
-import { screen, fireEvent, render } from 'spec/helpers/testing-library';
+import { screen, fireEvent } from '@testing-library/react';
+import { render } from 'spec/helpers/testing-library';
import ErrorAlert from './ErrorAlert';
describe('ErrorAlert', () => {
diff --git a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
index 50f21bf0fd411..898742c493844 100644
--- a/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
+++ b/superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx
@@ -64,7 +64,7 @@ const ErrorAlert: React.FC = ({
const icon =
type === 'warning' ?
{icon}
@@ -74,7 +74,7 @@ const ErrorAlert: React.FC
= ({
};
const preStyle = {
whiteSpace: 'pre-wrap',
- fontFamily: theme.typography.families.sansSerif,
+ fontFamily: theme.fontFamilyCode,
};
const renderDescription = () => (
diff --git a/superset-frontend/src/components/ErrorMessage/MarshmallowErrorMessage.tsx b/superset-frontend/src/components/ErrorMessage/MarshmallowErrorMessage.tsx
index 566e9d00d6f56..8949ab22269be 100644
--- a/superset-frontend/src/components/ErrorMessage/MarshmallowErrorMessage.tsx
+++ b/superset-frontend/src/components/ErrorMessage/MarshmallowErrorMessage.tsx
@@ -33,8 +33,8 @@ interface MarshmallowErrorExtra {
}
const StyledUl = styled.ul`
- padding-left: ${({ theme }) => theme.gridUnit * 5}px;
- padding-top: ${({ theme }) => theme.gridUnit * 4}px;
+ padding-left: ${({ theme }) => theme.sizeUnit * 5}px;
+ padding-top: ${({ theme }) => theme.sizeUnit * 4}px;
`;
const collapseStyle = (theme: SupersetTheme) => css`
@@ -42,7 +42,7 @@ const collapseStyle = (theme: SupersetTheme) => css`
left: 0px !important;
}
.ant-collapse-header {
- padding-left: ${theme.gridUnit * 4}px !important;
+ padding-left: ${theme.sizeUnit * 4}px !important;
}
.ant-collapse-content-box {
padding: 0px !important;
diff --git a/superset-frontend/src/components/FaveStar/index.tsx b/superset-frontend/src/components/FaveStar/index.tsx
index 49c7a71cd07a7..33345bf1a45d1 100644
--- a/superset-frontend/src/components/FaveStar/index.tsx
+++ b/superset-frontend/src/components/FaveStar/index.tsx
@@ -33,9 +33,9 @@ export interface FaveStarProps {
const StyledLink = styled.a`
${({ theme }) => css`
- font-size: ${theme.typography.sizes.xl}px;
+ font-size: ${theme.fontSizeXL}px;
display: flex;
- padding: 0 0 0 ${theme.gridUnit * 2}px;
+ padding: 0 0 0 ${theme.sizeUnit * 2}px;
`};
`;
diff --git a/superset-frontend/src/components/FilterableTable/index.tsx b/superset-frontend/src/components/FilterableTable/index.tsx
index f77f4aede0eb7..6139e5037f548 100644
--- a/superset-frontend/src/components/FilterableTable/index.tsx
+++ b/superset-frontend/src/components/FilterableTable/index.tsx
@@ -41,7 +41,7 @@ const StyledFilterableTable = styled.div`
overflow: hidden;
.ant-table-cell {
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
background-color: ${theme.colors.grayscale.light5};
}
@@ -49,7 +49,7 @@ const StyledFilterableTable = styled.div`
.virtual-table-cell {
min-width: 0px;
align-self: center;
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
.even-row {
@@ -61,8 +61,8 @@ const StyledFilterableTable = styled.div`
}
.cell-text-for-measuring {
- font-family: ${theme.typography.families.sansSerif};
- font-size: ${theme.typography.sizes.s}px;
+ font-family: ${theme.fontFamily};
+ font-size: ${theme.fontSizeSM}px;
}
`}
`;
diff --git a/superset-frontend/src/components/Form/Form.tsx b/superset-frontend/src/components/Form/Form.tsx
index 143f0494bb870..c7731a2cde928 100644
--- a/superset-frontend/src/components/Form/Form.tsx
+++ b/superset-frontend/src/components/Form/Form.tsx
@@ -21,10 +21,10 @@ import { styled } from '@superset-ui/core';
const StyledForm = styled(AntdForm)`
&.ant-form label {
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
}
.ant-form-item {
- margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
}
`;
diff --git a/superset-frontend/src/components/Form/FormItem.tsx b/superset-frontend/src/components/Form/FormItem.tsx
index dd829cd1e4867..35b86301b2377 100644
--- a/superset-frontend/src/components/Form/FormItem.tsx
+++ b/superset-frontend/src/components/Form/FormItem.tsx
@@ -22,9 +22,9 @@ import { styled } from '@superset-ui/core';
const StyledItem = styled(Form.Item)`
${({ theme }) => `
.ant-form-item-label {
- padding-bottom: ${theme.gridUnit}px;
+ padding-bottom: ${theme.sizeUnit}px;
& > label {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.base};
&.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
@@ -33,8 +33,8 @@ const StyledItem = styled(Form.Item)`
}
&::after {
display: inline-block;
- color: ${theme.colors.error.base};
- font-size: ${theme.typography.sizes.s}px;
+ color: ${theme.colorError};
+ font-size: ${theme.fontSizeSM}px;
content: '*';
}
}
diff --git a/superset-frontend/src/components/Form/FormLabel.tsx b/superset-frontend/src/components/Form/FormLabel.tsx
index bf52dacb82bd1..e14b56c94b2fc 100644
--- a/superset-frontend/src/components/Form/FormLabel.tsx
+++ b/superset-frontend/src/components/Form/FormLabel.tsx
@@ -27,20 +27,20 @@ export type FormLabelProps = {
};
const Label = styled.label`
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
- color: ${({ theme }) => theme.colors.grayscale.base};
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
+ color: ${({ theme }) => theme.colors.grayscale.dark2};
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
`;
const RequiredLabel = styled.label`
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
- color: ${({ theme }) => theme.colors.grayscale.base};
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
+ color: ${({ theme }) => theme.colors.grayscale.dark2};
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
&::after {
display: inline-block;
- margin-left: ${({ theme }) => theme.gridUnit}px;
- color: ${({ theme }) => theme.colors.error.base};
- font-size: ${({ theme }) => theme.typography.sizes.m}px;
+ margin-left: ${({ theme }) => theme.sizeUnit}px;
+ color: ${({ theme }) => theme.colorError};
+ font-size: ${({ theme }) => theme.fontSize}px;
content: '*';
}
`;
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
index bb05168078008..2fd1cbdfba8a3 100644
--- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
+++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -42,11 +42,11 @@ export interface LabeledErrorBoundInputProps {
}
const StyledInput = styled(Input)`
- margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
+ margin: ${({ theme }) => `${theme.sizeUnit}px 0 ${theme.sizeUnit * 2}px`};
`;
const StyledInputPassword = styled(Input.Password)`
- margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
+ margin: ${({ theme }) => `${theme.sizeUnit}px 0 ${theme.sizeUnit * 2}px`};
`;
const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
@@ -59,14 +59,14 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
&:after {
content: ' ';
display: inline-block;
- background: ${theme.colors.error.base};
+ background: ${theme.colorError};
mask: url(${errorIcon});
mask-size: cover;
- width: ${theme.gridUnit * 4}px;
- height: ${theme.gridUnit * 4}px;
+ width: ${theme.sizeUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
position: absolute;
- right: ${theme.gridUnit * 1.25}px;
- top: ${theme.gridUnit * 2.75}px;
+ right: ${theme.sizeUnit * 1.25}px;
+ top: ${theme.sizeUnit * 2.75}px;
}
}`}
`;
@@ -77,7 +77,7 @@ const StyledFormGroup = styled('div')`
-webkit-appearance: none;
margin: 0;
}
- margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 3}px;
.ant-form-item {
margin-bottom: 0;
}
diff --git a/superset-frontend/src/components/IconButton/index.tsx b/superset-frontend/src/components/IconButton/index.tsx
index 654e4089f5a9c..338e6207d4472 100644
--- a/superset-frontend/src/components/IconButton/index.tsx
+++ b/superset-frontend/src/components/IconButton/index.tsx
@@ -35,13 +35,13 @@ const StyledButton = styled(Button)`
`;
const StyledImage = styled.div`
- padding: ${({ theme }) => theme.gridUnit * 4}px;
- height: ${({ theme }) => theme.gridUnit * 18}px;
- margin: ${({ theme }) => theme.gridUnit * 3}px 0;
+ padding: ${({ theme }) => theme.sizeUnit * 4}px;
+ height: ${({ theme }) => theme.sizeUnit * 18}px;
+ margin: ${({ theme }) => theme.sizeUnit * 3}px 0;
.default-db-icon {
font-size: 36px;
- color: ${({ theme }) => theme.colors.grayscale.base};
+ color: ${({ theme }) => theme.colorIcon};
margin-right: 0;
span:first-of-type {
margin-right: 0;
@@ -53,8 +53,8 @@ const StyledImage = styled.div`
}
img {
- width: ${({ theme }) => theme.gridUnit * 10}px;
- height: ${({ theme }) => theme.gridUnit * 10}px;
+ width: ${({ theme }) => theme.sizeUnit * 10}px;
+ height: ${({ theme }) => theme.sizeUnit * 10}px;
margin: 0;
&:first-of-type {
margin-right: 0;
@@ -83,10 +83,10 @@ const StyledInner = styled.div`
`;
const StyledBottom = styled.div`
- padding: ${({ theme }) => theme.gridUnit * 4}px 0;
+ padding: ${({ theme }) => theme.sizeUnit * 4}px 0;
border-radius: 0 0 ${({ theme }) => theme.borderRadius}px
${({ theme }) => theme.borderRadius}px;
- background-color: ${({ theme }) => theme.colors.grayscale.light4};
+ background-color: ${({ theme }) => theme.colorBgContainer};
width: 100%;
line-height: 1.5em;
overflow: hidden;
@@ -125,19 +125,19 @@ const IconButton = styled(
),
)`
text-transform: none;
- background-color: ${({ theme }) => theme.colors.grayscale.light5};
- font-weight: ${({ theme }) => theme.typography.weights.normal};
- color: ${({ theme }) => theme.colors.grayscale.dark2};
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+ background-color: ${({ theme }) => theme.colorBgContainer};
+ font-weight: ${({ theme }) => theme.fontWeightNormal};
+ color: ${({ theme }) => theme.colorText};
+ border: 1px solid ${({ theme }) => theme.colorBorder};
margin: 0;
width: 100%;
&:hover,
&:focus {
- background-color: ${({ theme }) => theme.colors.grayscale.light5};
- color: ${({ theme }) => theme.colors.grayscale.dark2};
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- box-shadow: 4px 4px 20px ${({ theme }) => theme.colors.grayscale.light2};
+ background-color: ${({ theme }) => theme.colorBgTextHover};
+ color: ${({ theme }) => theme.colorText};
+ border: 1px solid ${({ theme }) => theme.colorBorder};
+ box-shadow: ${({ theme }) => theme.boxShadowSecondary};
}
`;
diff --git a/superset-frontend/src/components/IconTooltip/index.tsx b/superset-frontend/src/components/IconTooltip/index.tsx
index 376d8aa13b0e3..bb8c5bb7015d5 100644
--- a/superset-frontend/src/components/IconTooltip/index.tsx
+++ b/superset-frontend/src/components/IconTooltip/index.tsx
@@ -42,7 +42,7 @@ export interface Props {
}
const StyledSpan = styled.span`
- color: ${({ theme }) => theme.colors.primary.dark1};
+ color: ${({ theme }) => theme.colorPrimaryText};
&: hover {
color: ${({ theme }) => theme.colors.primary.dark2};
}
diff --git a/superset-frontend/src/components/Icons/Icon.tsx b/superset-frontend/src/components/Icons/Icon.tsx
index 39e5627235ae8..466943a8c0b62 100644
--- a/superset-frontend/src/components/Icons/Icon.tsx
+++ b/superset-frontend/src/components/Icons/Icon.tsx
@@ -16,17 +16,14 @@
* specific language governing permissions and limitations
* under the License.
*/
-
import { FC, SVGProps, useEffect, useRef, useState } from 'react';
import AntdIcon from '@ant-design/icons';
-import { styled } from '@superset-ui/core';
import TransparentIcon from 'src/assets/images/icons/transparent.svg';
+import { themeObject, styled } from '@superset-ui/core';
import IconType from './IconType';
const AntdIconComponent = ({
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
iconColor,
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
iconSize,
viewBox,
...rest
@@ -37,13 +34,10 @@ const AntdIconComponent = ({
export const StyledIcon = styled(AntdIconComponent)
`
${({ iconColor }) => iconColor && `color: ${iconColor};`};
span {
- // Fixing alignement on some of the icons
+ // Fixing alignment on some of the icons
line-height: 0px;
}
- font-size: ${({ iconSize, theme }) =>
- iconSize
- ? `${theme.typography.sizes[iconSize] || theme.typography.sizes.m}px`
- : '24px'};
+ font-size: ${({ iconSize, theme }) => themeObject.getFontSize(iconSize)}px;
`;
export interface IconProps extends IconType {
diff --git a/superset-frontend/src/components/Icons/Icons.stories.tsx b/superset-frontend/src/components/Icons/Icons.stories.tsx
index 1774176767da5..d384456ee9a4d 100644
--- a/superset-frontend/src/components/Icons/Icons.stories.tsx
+++ b/superset-frontend/src/components/Icons/Icons.stories.tsx
@@ -30,36 +30,38 @@ export default {
const palette = { Default: null };
Object.entries(supersetTheme.colors).forEach(([familyName, family]) => {
- Object.entries(family).forEach(([colorName, colorValue]) => {
- palette[`${familyName} / ${colorName}`] = colorValue;
- });
+ Object.entries(family as Record).forEach(
+ ([colorName, colorValue]) => {
+ palette[`${familyName} / ${colorName}`] = colorValue;
+ },
+ );
});
const IconSet = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, 180px);
grid-auto-rows: 90px;
- margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const IconBlock = styled.div`
display: flex;
flex-direction: column;
align-items: center;
- padding: ${({ theme }) => theme.gridUnit * 2}px;
+ padding: ${({ theme }) => theme.sizeUnit * 2}px;
span {
margin-top: ${({ theme }) =>
- 2 * theme.gridUnit}px; // Add spacing between icon and name
+ 2 * theme.sizeUnit}px; // Add spacing between icon and name
font-size: ${({ theme }) =>
- theme.typography.sizes.s}; // Optional: adjust font size for elegance
+ theme.fontSizeSM}; // Optional: adjust font size for elegance
color: ${({ theme }) =>
theme.colors.grayscale.base}; // Optional: subtle color for the name
}
`;
const SearchBox = styled(Input.Search)`
- margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
width: 100%;
max-width: 400px;
`;
diff --git a/superset-frontend/src/components/ImportModal/ImportErrorAlert.tsx b/superset-frontend/src/components/ImportModal/ImportErrorAlert.tsx
new file mode 100644
index 0000000000000..62de6e0710c85
--- /dev/null
+++ b/superset-frontend/src/components/ImportModal/ImportErrorAlert.tsx
@@ -0,0 +1,68 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FunctionComponent } from 'react';
+import { t } from '@superset-ui/core';
+
+import { getDatabaseDocumentationLinks } from 'src/views/CRUD/hooks';
+import ErrorAlert from 'src/components/ErrorMessage/ErrorAlert';
+
+const supersetTextDocs = getDatabaseDocumentationLinks();
+export const DOCUMENTATION_LINK = supersetTextDocs
+ ? supersetTextDocs.support
+ : 'https://superset.apache.org/docs/databases/installing-database-drivers';
+
+export interface IProps {
+ errorMessage: string;
+ showDbInstallInstructions: boolean;
+}
+
+const ImportErrorAlert: FunctionComponent = ({
+ errorMessage,
+ showDbInstallInstructions,
+}) => (
+
+
+ {t('here')}
+
+ .
+
+ ) : (
+ ''
+ )
+ }
+ />
+);
+
+export default ImportErrorAlert;
diff --git a/superset-frontend/src/components/ImportModal/index.tsx b/superset-frontend/src/components/ImportModal/index.tsx
index 69d8f3a751331..207fd72c12e65 100644
--- a/superset-frontend/src/components/ImportModal/index.tsx
+++ b/superset-frontend/src/components/ImportModal/index.tsx
@@ -26,20 +26,20 @@ import Modal from 'src/components/Modal';
import { Upload } from 'src/components';
import { useImportResource } from 'src/views/CRUD/hooks';
import { ImportResourceName } from 'src/views/CRUD/types';
-import ErrorAlert from './ErrorAlert';
+import ImportErrorAlert from './ImportErrorAlert';
const HelperMessage = styled.div`
display: block;
color: ${({ theme }) => theme.colors.grayscale.base};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
`;
const StyledInputContainer = styled.div`
- padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
- padding-top: ${({ theme }) => theme.gridUnit * 2}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
+ padding-top: ${({ theme }) => theme.sizeUnit * 2}px;
& > div {
- margin: ${({ theme }) => theme.gridUnit}px 0;
+ margin: ${({ theme }) => theme.sizeUnit}px 0;
}
&.extra-container {
@@ -47,7 +47,7 @@ const StyledInputContainer = styled.div`
}
.confirm-overwrite {
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
.input-container {
@@ -56,11 +56,11 @@ const StyledInputContainer = styled.div`
label {
display: flex;
- margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * 2}px;
}
i {
- margin: 0 ${({ theme }) => theme.gridUnit}px;
+ margin: 0 ${({ theme }) => theme.sizeUnit}px;
}
}
@@ -82,11 +82,11 @@ const StyledInputContainer = styled.div`
textarea,
input[type='text'],
input[type='number'] {
- padding: ${({ theme }) => theme.gridUnit * 1.5}px
- ${({ theme }) => theme.gridUnit * 2}px;
+ padding: ${({ theme }) => theme.sizeUnit * 1.5}px
+ ${({ theme }) => theme.sizeUnit * 2}px;
border-style: none;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
&[name='name'] {
flex: 0 1 auto;
@@ -94,7 +94,7 @@ const StyledInputContainer = styled.div`
}
&[name='sqlalchemy_uri'] {
- margin-right: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * 3}px;
}
}
`;
@@ -447,7 +447,7 @@ const ImportModelsModal: FunctionComponent = ({
{errorMessage && (
- 0 ||
diff --git a/superset-frontend/src/components/ImportModal/styles.ts b/superset-frontend/src/components/ImportModal/styles.ts
index f0120f62398bf..859ff7093e835 100644
--- a/superset-frontend/src/components/ImportModal/styles.ts
+++ b/superset-frontend/src/components/ImportModal/styles.ts
@@ -20,7 +20,7 @@
import { css, SupersetTheme } from '@superset-ui/core';
export const antdWarningAlertStyles = (theme: SupersetTheme) => css`
- margin: ${theme.gridUnit * 4}px 0;
+ margin: ${theme.sizeUnit * 4}px 0;
.antd5-alert-message {
margin: 0;
diff --git a/superset-frontend/src/components/IndeterminateCheckbox/index.tsx b/superset-frontend/src/components/IndeterminateCheckbox/index.tsx
index bfe85989ada27..baad62bd1f070 100644
--- a/superset-frontend/src/components/IndeterminateCheckbox/index.tsx
+++ b/superset-frontend/src/components/IndeterminateCheckbox/index.tsx
@@ -44,7 +44,7 @@ const CheckboxLabel = styled.label`
`;
const CheckboxHalf = styled(Icons.CheckboxHalf)`
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
cursor: pointer;
`;
@@ -54,7 +54,7 @@ const CheckboxOff = styled(Icons.CheckboxOff)`
`;
const CheckboxOn = styled(Icons.CheckboxOn)`
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
cursor: pointer;
`;
diff --git a/superset-frontend/src/components/Input/Input.stories.tsx b/superset-frontend/src/components/Input/Input.stories.tsx
index 4023c53d97e0f..737c1a859cb76 100644
--- a/superset-frontend/src/components/Input/Input.stories.tsx
+++ b/superset-frontend/src/components/Input/Input.stories.tsx
@@ -19,7 +19,6 @@
import { InputProps, TextAreaProps } from 'antd-v5/lib/input';
import { InputNumberProps } from 'antd-v5/lib/input-number';
-import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
import { Input, TextArea, InputNumber } from '.';
export default {
@@ -27,22 +26,14 @@ export default {
component: Input,
};
-export const InteractiveInput = (args: InputProps) => (
-
-
-);
+export const InteractiveInput = (args: InputProps) =>
-
+
-
-
+
);
InteractiveInput.args = {
diff --git a/superset-frontend/src/components/Label/Label.stories.tsx b/superset-frontend/src/components/Label/Label.stories.tsx
index b19666e1fccc2..0cd515fa6fa09 100644
--- a/superset-frontend/src/components/Label/Label.stories.tsx
+++ b/superset-frontend/src/components/Label/Label.stories.tsx
@@ -33,9 +33,8 @@ export const options: Type[] = [
'info',
'success',
'warning',
- 'danger',
+ 'error',
'primary',
- 'secondary',
];
// Define the props for the `LabelGallery` component
diff --git a/superset-frontend/src/components/Label/index.tsx b/superset-frontend/src/components/Label/index.tsx
index 13766fec86625..c13034ad4d099 100644
--- a/superset-frontend/src/components/Label/index.tsx
+++ b/superset-frontend/src/components/Label/index.tsx
@@ -24,7 +24,7 @@ import {
} from 'react';
import { Tag } from 'src/components';
-import { useTheme } from '@superset-ui/core';
+import { useTheme, themeObject } from '@superset-ui/core';
import DatasetTypeLabel from 'src/components/Label/reusable/DatasetTypeLabel';
import PublishedLabel from 'src/components/Label/reusable/PublishedLabel';
@@ -33,11 +33,10 @@ export type OnClickHandler = MouseEventHandler;
export type Type =
| 'success'
| 'warning'
- | 'danger'
+ | 'error'
| 'info'
| 'default'
- | 'primary'
- | 'secondary';
+ | 'primary';
export interface LabelProps extends HTMLAttributes {
key?: string;
@@ -53,7 +52,7 @@ export interface LabelProps extends HTMLAttributes {
export default function Label(props: LabelProps) {
const theme = useTheme();
- const { colors, transitionTiming } = theme;
+ const { transitionTiming } = theme;
const {
type = 'default',
monospace = false,
@@ -63,44 +62,14 @@ export default function Label(props: LabelProps) {
icon,
...rest
} = props;
- const { primary, secondary, grayscale, success, warning, error, info } =
- colors;
- let baseColor;
- if (type === 'primary') {
- baseColor = primary;
- } else if (type === 'secondary') {
- baseColor = secondary;
- } else if (type === 'success') {
- baseColor = success;
- } else if (type === 'warning') {
- baseColor = warning;
- } else if (type === 'danger') {
- baseColor = error;
- } else if (type === 'info') {
- baseColor = info;
- } else {
- baseColor = grayscale;
- }
- const color = baseColor.dark2;
- let borderColor = baseColor.light1;
- let backgroundColor = baseColor.light2;
-
- // TODO - REMOVE IF BLOCK LOGIC WHEN shades are fixed to be aligned in terms of brightness
- // currently shades for >=light2 are not aligned for primary, default and secondary
- if (['default', 'primary', 'secondary'].includes(type)) {
- // @ts-ignore
- backgroundColor = baseColor.light4;
- borderColor = baseColor.light2;
- }
+ const baseColor = themeObject.getColorVariants(type);
+ const color = baseColor.active;
+ const borderColor = baseColor.border;
+ const backgroundColor = baseColor.bg;
- const backgroundColorHover = onClick ? baseColor.light1 : backgroundColor;
- const borderColorHover = onClick ? baseColor.base : borderColor;
-
- if (type === 'default') {
- // Lighter for default
- backgroundColor = grayscale.light3;
- }
+ const backgroundColorHover = onClick ? baseColor.bgHover : backgroundColor;
+ const borderColorHover = onClick ? baseColor.borderHover : borderColor;
const css = {
transition: `background-color ${transitionTiming}s`,
@@ -125,7 +94,7 @@ export default function Label(props: LabelProps) {
},
};
if (monospace) {
- css['font-family'] = theme.typography.families.monospace;
+ css['font-family'] = theme.fontFamilyCode;
}
return (
= ({ datasetType }) => {
) : (
diff --git a/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx b/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
index a73be8609e6ea..9a1d0c20bff23 100644
--- a/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
+++ b/superset-frontend/src/components/Label/reusable/PublishedLabel.tsx
@@ -36,7 +36,7 @@ const PublishedLabel: React.FC = ({
) : (
diff --git a/superset-frontend/src/components/LastUpdated/index.tsx b/superset-frontend/src/components/LastUpdated/index.tsx
index db7618dcf8e28..ed0110e14ca3e 100644
--- a/superset-frontend/src/components/LastUpdated/index.tsx
+++ b/superset-frontend/src/components/LastUpdated/index.tsx
@@ -50,12 +50,12 @@ const TextStyles = styled.span`
`;
const Refresh = styled(Icons.Refresh)`
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
width: auto;
- height: ${({ theme }) => theme.gridUnit * 5}px;
+ height: ${({ theme }) => theme.sizeUnit * 5}px;
position: relative;
- top: ${({ theme }) => theme.gridUnit}px;
- left: ${({ theme }) => theme.gridUnit}px;
+ top: ${({ theme }) => theme.sizeUnit}px;
+ left: ${({ theme }) => theme.sizeUnit}px;
cursor: pointer;
`;
diff --git a/superset-frontend/src/components/Layout/index.tsx b/superset-frontend/src/components/Layout/index.tsx
new file mode 100644
index 0000000000000..4b5f0bb40b1f3
--- /dev/null
+++ b/superset-frontend/src/components/Layout/index.tsx
@@ -0,0 +1,21 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Layout } from 'antd-v5';
+
+export default Layout;
diff --git a/superset-frontend/src/components/ListView/ActionsBar.tsx b/superset-frontend/src/components/ListView/ActionsBar.tsx
index 2fd04d5cb552f..0e679d0094bc9 100644
--- a/superset-frontend/src/components/ListView/ActionsBar.tsx
+++ b/superset-frontend/src/components/ListView/ActionsBar.tsx
@@ -42,7 +42,7 @@ const StyledActions = styled.span`
&:hover {
path {
- fill: ${({ theme }) => theme.colors.primary.base};
+ fill: ${({ theme }) => theme.colorPrimary};
}
}
}
diff --git a/superset-frontend/src/components/ListView/CardCollection.tsx b/superset-frontend/src/components/ListView/CardCollection.tsx
index 550cb84c39033..174d1f0b7ee9a 100644
--- a/superset-frontend/src/components/ListView/CardCollection.tsx
+++ b/superset-frontend/src/components/ListView/CardCollection.tsx
@@ -33,13 +33,13 @@ interface CardCollectionProps {
const CardContainer = styled.div<{ showThumbnails?: boolean }>`
${({ theme, showThumbnails }) => `
display: grid;
- grid-gap: ${theme.gridUnit * 12}px ${theme.gridUnit * 4}px;
+ grid-gap: ${theme.sizeUnit * 12}px ${theme.sizeUnit * 4}px;
grid-template-columns: repeat(auto-fit, 300px);
- margin-top: ${theme.gridUnit * -6}px;
+ margin-top: ${theme.sizeUnit * -6}px;
padding: ${
showThumbnails
- ? `${theme.gridUnit * 8 + 3}px ${theme.gridUnit * 9}px`
- : `${theme.gridUnit * 8 + 1}px ${theme.gridUnit * 9}px`
+ ? `${theme.sizeUnit * 8 + 3}px ${theme.sizeUnit * 9}px`
+ : `${theme.sizeUnit * 8 + 1}px ${theme.sizeUnit * 9}px`
};
`}
`;
@@ -47,7 +47,7 @@ const CardContainer = styled.div<{ showThumbnails?: boolean }>`
const CardWrapper = styled.div`
border: 2px solid transparent;
&.card-selected {
- border: 2px solid ${({ theme }) => theme.colors.primary.base};
+ border: 2px solid ${({ theme }) => theme.colorPrimary};
}
&.bulk-select {
cursor: pointer;
diff --git a/superset-frontend/src/components/ListView/CardSortSelect.tsx b/superset-frontend/src/components/ListView/CardSortSelect.tsx
index f46809fe62b85..5d201b4eb76b8 100644
--- a/superset-frontend/src/components/ListView/CardSortSelect.tsx
+++ b/superset-frontend/src/components/ListView/CardSortSelect.tsx
@@ -25,7 +25,7 @@ import { CardSortSelectOption, SortColumn } from './types';
const SortContainer = styled.div`
display: inline-flex;
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
align-items: center;
text-align: left;
width: ${SELECT_WIDTH}px;
diff --git a/superset-frontend/src/components/ListView/CrossLinks.tsx b/superset-frontend/src/components/ListView/CrossLinks.tsx
index 25f2ba82721b0..12cff55222836 100644
--- a/superset-frontend/src/components/ListView/CrossLinks.tsx
+++ b/superset-frontend/src/components/ListView/CrossLinks.tsx
@@ -54,7 +54,7 @@ const StyledCrossLinks = styled.div`
.count {
cursor: pointer;
color: ${theme.colors.grayscale.base};
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
}
}
`}
diff --git a/superset-frontend/src/components/ListView/Filters/Base.ts b/superset-frontend/src/components/ListView/Filters/Base.ts
index 6baca649ffa16..3434773075dc9 100644
--- a/superset-frontend/src/components/ListView/Filters/Base.ts
+++ b/superset-frontend/src/components/ListView/Filters/Base.ts
@@ -27,7 +27,7 @@ export interface BaseFilter {
export const FilterContainer = styled.div`
display: inline-flex;
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
align-items: center;
width: ${SELECT_WIDTH}px;
`;
diff --git a/superset-frontend/src/components/ListView/Filters/Search.tsx b/superset-frontend/src/components/ListView/Filters/Search.tsx
index c2365ae20644b..ae3f1da40bb26 100644
--- a/superset-frontend/src/components/ListView/Filters/Search.tsx
+++ b/superset-frontend/src/components/ListView/Filters/Search.tsx
@@ -48,7 +48,7 @@ const SearchIcon = styled(Icons.Search)`
`;
const StyledInput = styled(AntdInput)`
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
`;
function SearchFilter(
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index cfa060f11da63..b608219ea421c 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@@ -45,17 +45,17 @@ const ListViewStyles = styled.div`
.superset-list-view {
text-align: left;
border-radius: 4px 0;
- margin: 0 ${({ theme }) => theme.gridUnit * 4}px;
+ margin: 0 ${({ theme }) => theme.sizeUnit * 4}px;
.header {
display: flex;
- padding-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
& .controls {
display: flex;
flex-wrap: wrap;
- column-gap: ${({ theme }) => theme.gridUnit * 6}px;
- row-gap: ${({ theme }) => theme.gridUnit * 4}px;
+ column-gap: ${({ theme }) => theme.sizeUnit * 6}px;
+ row-gap: ${({ theme }) => theme.sizeUnit * 4}px;
}
}
@@ -78,11 +78,11 @@ const ListViewStyles = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
- margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
}
.row-count-container {
- margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 2}px;
color: ${({ theme }) => theme.colors.grayscale.base};
}
`;
@@ -91,33 +91,33 @@ const BulkSelectWrapper = styled(Alert)`
${({ theme }) => `
border-radius: 0;
margin-bottom: 0;
- color: ${theme.colors.grayscale.dark1};
- background-color: ${theme.colors.primary.light4};
+ color: ${theme.colorText};
+ background-color: ${theme.colorPrimaryBg};
.selectedCopy {
display: inline-block;
- padding: ${theme.gridUnit * 2}px 0;
+ padding: ${theme.sizeUnit * 2}px 0;
}
.deselect-all, .tag-btn {
- color: ${theme.colors.primary.base};
- margin-left: ${theme.gridUnit * 4}px;
+ color: ${theme.colorPrimary};
+ margin-left: ${theme.sizeUnit * 4}px;
}
.divider {
- margin: ${`${-theme.gridUnit * 2}px 0 ${-theme.gridUnit * 2}px ${
- theme.gridUnit * 4
+ margin: ${`${-theme.sizeUnit * 2}px 0 ${-theme.sizeUnit * 2}px ${
+ theme.sizeUnit * 4
}px`};
width: 1px;
- height: ${theme.gridUnit * 8}px;
- box-shadow: inset -1px 0px 0px ${theme.colors.grayscale.light2};
+ height: ${theme.sizeUnit * 8}px;
+ box-shadow: inset -1px 0px 0px ${theme.colorBorder};
display: inline-flex;
vertical-align: middle;
position: relative;
}
.ant-alert-close-icon {
- margin-top: ${theme.gridUnit * 1.5}px;
+ margin-top: ${theme.sizeUnit * 1.5}px;
}
`}
`;
@@ -137,35 +137,35 @@ const bulkSelectColumnConfig = {
};
const ViewModeContainer = styled.div`
- padding-right: ${({ theme }) => theme.gridUnit * 4}px;
- margin-top: ${({ theme }) => theme.gridUnit * 5 + 1}px;
+ padding-right: ${({ theme }) => theme.sizeUnit * 4}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 5 + 1}px;
white-space: nowrap;
display: inline-block;
.toggle-button {
display: inline-block;
- border-radius: ${({ theme }) => theme.gridUnit / 2}px;
- padding: ${({ theme }) => theme.gridUnit}px;
- padding-bottom: ${({ theme }) => theme.gridUnit * 0.5}px;
+ border-radius: ${({ theme }) => theme.sizeUnit / 2}px;
+ padding: ${({ theme }) => theme.sizeUnit}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit * 0.5}px;
&:first-of-type {
- margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * 2}px;
}
}
.active {
background-color: ${({ theme }) => theme.colors.grayscale.base};
svg {
- color: ${({ theme }) => theme.colors.grayscale.light5};
+ color: ${({ theme }) => theme.colorBgLayout};
}
}
`;
const EmptyWrapper = styled.div`
- padding: ${({ theme }) => theme.gridUnit * 40}px 0;
+ padding: ${({ theme }) => theme.sizeUnit * 40}px 0;
&.table {
- background: ${({ theme }) => theme.colors.grayscale.light5};
+ background: ${({ theme }) => theme.colorBgContainer};
}
`;
diff --git a/superset-frontend/src/components/ListViewCard/index.tsx b/superset-frontend/src/components/ListViewCard/index.tsx
index b785961dbbd67..269f8033fed8e 100644
--- a/superset-frontend/src/components/ListViewCard/index.tsx
+++ b/superset-frontend/src/components/ListViewCard/index.tsx
@@ -20,8 +20,6 @@ import { ReactNode, ComponentType, ReactElement, FC } from 'react';
import { styled, useTheme } from '@superset-ui/core';
import { Skeleton, Card } from 'src/components';
import { Tooltip } from 'src/components/Tooltip';
-import { theme as supersetTheme } from 'src/preamble';
-import { ConfigProvider } from 'antd-v5';
import ImageLoader, { BackgroundPosition } from './ImageLoader';
import CertifiedBadge from '../CertifiedBadge';
@@ -31,15 +29,6 @@ const ActionsWrapper = styled.div`
justify-content: flex-end;
`;
-// Styling part 1: Override Card tokens when possible
-const listViewCardTheme = {
- components: {
- Card: {
- colorBgContainer: supersetTheme.colors.grayscale.light5,
- },
- },
-};
-
// Styling part 2: Use CSS when necessary
const StyledCard = styled(Card)`
${({ theme }) => `
@@ -51,7 +40,7 @@ const StyledCard = styled(Card)`
}
&:hover {
box-shadow: 8px 8px 28px 0px ${theme.colors.grayscale.light1};
- transition: box-shadow ${theme.transitionTiming}s ease-in-out;
+ transition: box-shadow ${theme.motionDurationMid} ease-in-out;
.cover-footer {
transform: translateY(0);
@@ -66,8 +55,8 @@ const Cover = styled.div`
overflow: hidden;
.cover-footer {
- transform: translateY(${({ theme }) => theme.gridUnit * 9}px);
- transition: ${({ theme }) => theme.transitionTiming}s ease-out;
+ transform: translateY(${({ theme }) => theme.sizeUnit * 9}px);
+ transition: ${({ theme }) => theme.motionDurationMid} ease-out;
}
`;
@@ -79,7 +68,7 @@ const TitleContainer = styled.div`
.card-actions {
margin-left: auto;
align-self: flex-end;
- padding-left: ${({ theme }) => theme.gridUnit}px;
+ padding-left: ${({ theme }) => theme.sizeUnit}px;
span[role='img'] {
display: flex;
align-items: center;
@@ -97,7 +86,7 @@ const TitleLink = styled.span`
overflow: hidden;
text-overflow: ellipsis;
& a {
- color: ${({ theme }) => theme.colors.grayscale.dark1} !important;
+ color: ${({ theme }) => theme.colorText} !important;
}
`;
@@ -105,14 +94,14 @@ const TitleRight = styled.span`
position: absolute;
right: -1px;
font-weight: 400;
- bottom: ${({ theme }) => theme.gridUnit}px;
+ bottom: ${({ theme }) => theme.sizeUnit}px;
`;
const CoverFooter = styled.div`
display: flex;
flex-wrap: nowrap;
position: relative;
- top: -${({ theme }) => theme.gridUnit * 9}px;
+ top: -${({ theme }) => theme.sizeUnit * 9}px;
padding: 0 8px;
`;
@@ -131,7 +120,7 @@ const CoverFooterRight = styled.div`
const ThinSkeleton = styled(Skeleton)`
h3 {
- margin: ${({ theme }) => theme.gridUnit}px 0;
+ margin: ${({ theme }) => theme.sizeUnit}px 0;
}
ul {
@@ -192,101 +181,99 @@ function ListViewCard({
const Link = url && linkComponent ? linkComponent : AnchorLink;
const theme = useTheme();
return (
-
-
-
-
-
-
- {!loading && coverLeft && (
- {coverLeft}
- )}
- {!loading && coverRight && (
- {coverRight}
- )}
-
-
- )
- }
- >
- {loading && (
-
-
-
+
+
+
+
+ {!loading && coverLeft && (
+ {coverLeft}
+ )}
+ {!loading && coverRight && (
+ {coverRight}
+ )}
+
+
+ )
+ }
+ >
+ {loading && (
+
+
+
+
{' '}
+
-
-
-
-
- }
- description={
-
- }
- />
- )}
- {!loading && (
-
- {subtitle || null}
-
-
-
- {certifiedBy && (
- <>
-
-
- {titleRight &&
{titleRight} }
-
- {actions}
-
+ {subtitle || null}
+
+
+
+ {certifiedBy && (
+ <>
+
+
+ {titleRight &&
{titleRight} }
+
+ {actions}
+
+
`
right: 0px;
margin-right: 50px;
margin-bottom: 50px;
- z-index: ${({ theme }) => theme.zIndex.max};
+ z-index: ${({ theme }) => theme.zIndexPopupBase};
word-break: break-word;
.toast {
- background: ${({ theme }) => theme.colors.grayscale.dark1};
+ background: ${({ theme }) => theme.colorText};
border-radius: ${({ theme }) => theme.borderRadius};
box-shadow: 0 2px 4px 0
- fade(
- ${({ theme }) => theme.colors.grayscale.dark2},
- ${({ theme }) => theme.opacity.mediumLight}
- );
+ fade(${({ theme }) => theme.colors.grayscale.dark2}, 35%);
color: ${({ theme }) => theme.colors.grayscale.light5};
opacity: 0;
position: relative;
@@ -49,8 +46,8 @@ const StyledToastPresenter = styled.div`
white-space: pre-line;
will-change: transform, opacity;
transition:
- transform ${({ theme }) => theme.transitionTiming}s,
- opacity ${({ theme }) => theme.transitionTiming}s;
+ transform ${({ theme }) => theme.motionDurationMid},
+ opacity ${({ theme }) => theme.motionDurationMid};
&:after {
content: '';
diff --git a/superset-frontend/src/components/MetadataBar/ContentConfig.tsx b/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
index de23e654a792f..180235870e679 100644
--- a/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
+++ b/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
@@ -21,7 +21,7 @@ import Icons from 'src/components/Icons';
import { ContentType, MetadataType } from '.';
const Header = styled.div`
- font-weight: ${({ theme }) => theme.typography.weights.bold};
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
`;
const Info = ({
diff --git a/superset-frontend/src/components/MetadataBar/MetadataBar.tsx b/superset-frontend/src/components/MetadataBar/MetadataBar.tsx
index 3503021f87977..5b6ff16583939 100644
--- a/superset-frontend/src/components/MetadataBar/MetadataBar.tsx
+++ b/superset-frontend/src/components/MetadataBar/MetadataBar.tsx
@@ -41,9 +41,9 @@ const Bar = styled.div<{ count: number }>`
display: flex;
align-items: center;
padding: ${VERTICAL_PADDING}px ${HORIZONTAL_PADDING}px;
- background-color: ${theme.colors.grayscale.light4};
- color: ${theme.colors.grayscale.base};
- font-size: ${theme.typography.sizes.s}px;
+ background-color: ${theme.colorBgElevated};
+ color: ${theme.colorTextTertiary};
+ font-size: ${theme.fontSizeSM}px;
min-width: ${
HORIZONTAL_PADDING * 2 +
(ICON_WIDTH + SPACE_BETWEEN_ITEMS) * count -
@@ -80,9 +80,7 @@ const StyledItem = styled.div<{
cursor: ${onClick ? 'pointer' : 'default'};
& .metadata-icon {
color: ${
- onClick && collapsed
- ? theme.colors.primary.base
- : theme.colors.grayscale.base
+ onClick && collapsed ? theme.colorPrimary : theme.colors.grayscale.base
};
padding-right: ${collapsed ? 0 : ICON_PADDING}px;
& .anticon {
diff --git a/superset-frontend/src/components/Modal/Modal.tsx b/superset-frontend/src/components/Modal/Modal.tsx
index 4678e29ce477f..04fa197f68298 100644
--- a/superset-frontend/src/components/Modal/Modal.tsx
+++ b/superset-frontend/src/components/Modal/Modal.tsx
@@ -105,18 +105,19 @@ export const StyledModal = styled(BaseModal)`
responsive &&
css`
max-width: ${maxWidth ?? '900px'};
- padding-left: ${theme.gridUnit * 3}px;
- padding-right: ${theme.gridUnit * 3}px;
+ padding-left: ${theme.sizeUnit * 3}px;
+ padding-right: ${theme.sizeUnit * 3}px;
padding-bottom: 0;
top: 0;
`}
.antd5-modal-content {
+ background-color: ${({ theme }) => theme.colorBgContainer};
display: flex;
flex-direction: column;
- max-height: ${({ theme }) => `calc(100vh - ${theme.gridUnit * 8}px)`};
- margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
- margin-top: ${({ theme }) => theme.gridUnit * 4}px;
+ max-height: ${({ theme }) => `calc(100vh - ${theme.sizeUnit * 8}px)`};
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 4}px;
padding: 0;
}
@@ -124,11 +125,11 @@ export const StyledModal = styled(BaseModal)`
flex: 0 0 auto;
border-radius: ${({ theme }) => theme.borderRadius}px
${({ theme }) => theme.borderRadius}px 0 0;
- padding: ${({ theme }) => theme.gridUnit * 4}px
- ${({ theme }) => theme.gridUnit * 6}px;
+ padding: ${({ theme }) => theme.sizeUnit * 4}px
+ ${({ theme }) => theme.sizeUnit * 6}px;
.antd5-modal-title {
- font-weight: ${({ theme }) => theme.typography.weights.medium};
+ font-weight: ${({ theme }) => theme.fontWeightMedium};
}
.antd5-modal-title h4 {
@@ -139,8 +140,8 @@ export const StyledModal = styled(BaseModal)`
}
.antd5-modal-close {
- width: ${({ theme }) => theme.gridUnit * 14}px;
- height: ${({ theme }) => theme.gridUnit * 14}px;
+ width: ${({ theme }) => theme.sizeUnit * 14}px;
+ height: ${({ theme }) => theme.sizeUnit * 14}px;
top: 0;
right: 0;
}
@@ -155,24 +156,24 @@ export const StyledModal = styled(BaseModal)`
.close {
flex: 1 1 auto;
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
- color: ${({ theme }) => theme.colors.secondary.dark1};
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
+ color: ${({ theme }) => theme.colorPrimaryText};
font-size: 32px;
- font-weight: ${({ theme }) => theme.typography.weights.light};
+ font-weight: ${({ theme }) => theme.fontWeightLight};
}
}
.antd5-modal-body {
flex: 0 1 auto;
- padding: ${({ theme }) => theme.gridUnit * 4}px;
+ padding: ${({ theme }) => theme.sizeUnit * 4}px;
overflow: auto;
${({ resizable, height }) => !resizable && height && `height: ${height};`}
}
.antd5-modal-footer {
flex: 0 0 1;
- border-top: ${({ theme }) => theme.gridUnit / 4}px solid
+ border-top: ${({ theme }) => theme.sizeUnit / 4}px solid
${({ theme }) => theme.colors.grayscale.light2};
- padding: ${({ theme }) => theme.gridUnit * 4}px;
+ padding: ${({ theme }) => theme.sizeUnit * 4}px;
margin-top: 0;
.btn {
@@ -180,7 +181,7 @@ export const StyledModal = styled(BaseModal)`
}
.btn + .btn {
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
}
}
@@ -188,7 +189,7 @@ export const StyledModal = styled(BaseModal)`
// Aaron note 20-11-19: this seems to be exclusively here for the Edit Database modal.
// TODO: remove this as it is a special case.
.ant-tabs-top {
- margin-top: -${({ theme }) => theme.gridUnit * 4}px;
+ margin-top: -${({ theme }) => theme.sizeUnit * 4}px;
}
&.no-content-padding .antd5-modal-body {
@@ -202,7 +203,7 @@ export const StyledModal = styled(BaseModal)`
padding: 0;
.draggable-trigger {
cursor: move;
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
width: 100%;
}
}
diff --git a/superset-frontend/src/components/ModalTrigger/ModalTrigger.test.tsx b/superset-frontend/src/components/ModalTrigger/ModalTrigger.test.tsx
index 1fdcf4313b21a..76b63dbc9ffb4 100644
--- a/superset-frontend/src/components/ModalTrigger/ModalTrigger.test.tsx
+++ b/superset-frontend/src/components/ModalTrigger/ModalTrigger.test.tsx
@@ -85,6 +85,6 @@ test('renders with theme', () => {
render( onChange(key)}>
{options.map(option => (
@@ -112,7 +112,7 @@ const PopoverDropdown = (props: PopoverDropdownProps) => {
{selected && renderButton(selected)}
{title}
{info && (
-
+
{children}
diff --git a/superset-frontend/src/components/Radio/index.tsx b/superset-frontend/src/components/Radio/index.tsx
index f06392d27879e..740051b96b885 100644
--- a/superset-frontend/src/components/Radio/index.tsx
+++ b/superset-frontend/src/components/Radio/index.tsx
@@ -23,31 +23,31 @@ const StyledRadio = styled(AntdRadio)`
.ant-radio-inner {
top: -1px;
left: 2px;
- width: ${({ theme }) => theme.gridUnit * 4}px;
- height: ${({ theme }) => theme.gridUnit * 4}px;
+ width: ${({ theme }) => theme.sizeUnit * 4}px;
+ height: ${({ theme }) => theme.sizeUnit * 4}px;
border-width: 2px;
border-color: ${({ theme }) => theme.colors.grayscale.light2};
}
.ant-radio.ant-radio-checked {
.ant-radio-inner {
- border-width: ${({ theme }) => theme.gridUnit + 1}px;
- border-color: ${({ theme }) => theme.colors.primary.base};
+ border-width: ${({ theme }) => theme.sizeUnit + 1}px;
+ border-color: ${({ theme }) => theme.colorPrimary};
}
.ant-radio-inner::after {
background-color: ${({ theme }) => theme.colors.grayscale.light5};
top: 0;
left: 0;
- width: ${({ theme }) => theme.gridUnit + 2}px;
- height: ${({ theme }) => theme.gridUnit + 2}px;
+ width: ${({ theme }) => theme.sizeUnit + 2}px;
+ height: ${({ theme }) => theme.sizeUnit + 2}px;
}
}
.ant-radio:hover,
.ant-radio:focus {
.ant-radio-inner {
- border-color: ${({ theme }) => theme.colors.primary.dark1};
+ border-color: ${({ theme }) => theme.colorPrimaryText};
}
}
`;
diff --git a/superset-frontend/src/components/RefreshLabel/index.tsx b/superset-frontend/src/components/RefreshLabel/index.tsx
index 03e0bee13ef15..9badf1e6e1259 100644
--- a/superset-frontend/src/components/RefreshLabel/index.tsx
+++ b/superset-frontend/src/components/RefreshLabel/index.tsx
@@ -40,7 +40,7 @@ const RefreshLabel = ({ onClick, tooltipContent }: RefreshLabelProps) => {
css={(theme: SupersetTheme) => ({
cursor: 'pointer',
color: theme.colors.grayscale.base,
- '&:hover': { color: theme.colors.primary.base },
+ '&:hover': { color: theme.colorPrimary },
})}
/>
diff --git a/superset-frontend/src/components/ResizableSidebar/index.tsx b/superset-frontend/src/components/ResizableSidebar/index.tsx
index c7f64f462b73d..f19bae62b9bba 100644
--- a/superset-frontend/src/components/ResizableSidebar/index.tsx
+++ b/superset-frontend/src/components/ResizableSidebar/index.tsx
@@ -26,7 +26,7 @@ const ResizableWrapper = styled.div`
height: 100%;
:hover .sidebar-resizer::after {
- background-color: ${({ theme }) => theme.colors.primary.base};
+ background-color: ${({ theme }) => theme.colorPrimary};
}
.sidebar-resizer {
diff --git a/superset-frontend/src/components/Select/CustomTag.tsx b/superset-frontend/src/components/Select/CustomTag.tsx
index 5a0f4a791f1e8..293b05774e0b4 100644
--- a/superset-frontend/src/components/Select/CustomTag.tsx
+++ b/superset-frontend/src/components/Select/CustomTag.tsx
@@ -29,7 +29,7 @@ const StyledTag = styled(AntdTag)`
& .ant-tag-close-icon {
display: inline-flex;
align-items: center;
- margin-left: ${({ theme }) => theme.gridUnit}px;
+ margin-left: ${({ theme }) => theme.sizeUnit}px;
}
& .tag-content {
diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx
index d68b391593ca3..c7a553b9d71f8 100644
--- a/superset-frontend/src/components/Select/styles.tsx
+++ b/superset-frontend/src/components/Select/styles.tsx
@@ -26,7 +26,7 @@ export const StyledHeader = styled.span<{ headerPosition: string }>`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- margin-right: ${headerPosition === 'left' ? theme.gridUnit * 2 : 0}px;
+ margin-right: ${headerPosition === 'left' ? theme.sizeUnit * 2 : 0}px;
`}
`;
@@ -45,7 +45,7 @@ export const StyledSelect = styled(AntdSelect, {
${({ theme, headerPosition, oneLine }) => `
flex: ${headerPosition === 'left' ? 1 : 0};
&& .ant-select-selector {
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
}
// Open the dropdown when clicking on the suffix
// This is fixed in version 4.16
@@ -64,7 +64,7 @@ export const StyledSelect = styled(AntdSelect, {
.ant-select-selection-overflow-item:not(.ant-select-selection-overflow-item-rest):not(.ant-select-selection-overflow-item-suffix) {
flex-shrink: 1;
- min-width: ${theme.gridUnit * 13}px;
+ min-width: ${theme.sizeUnit * 13}px;
}
.ant-select-selection-overflow-item-suffix {
@@ -83,7 +83,7 @@ export const NoElement = styled.span`
export const StyledTag = styled(Tag)`
${({ theme }) => `
background: ${theme.colors.grayscale.light3};
- font-size: ${theme.typography.sizes.m}px;
+ font-size: ${theme.fontSize}px;
border: none;
`}
`;
@@ -97,22 +97,22 @@ export const StyledCheckOutlined = styled(Icons.CheckOutlined)`
`;
export const StyledSpin = styled(Spin)`
- margin-top: ${({ theme }) => -theme.gridUnit}px;
+ margin-top: ${({ theme }) => -theme.sizeUnit}px;
`;
export const StyledLoadingText = styled.div`
${({ theme }) => `
- margin-left: ${theme.gridUnit * 3}px;
- line-height: ${theme.gridUnit * 8}px;
+ margin-left: ${theme.sizeUnit * 3}px;
+ line-height: ${theme.sizeUnit * 8}px;
color: ${theme.colors.grayscale.light1};
`}
`;
export const StyledHelperText = styled.div`
${({ theme }) => `
- padding: ${theme.gridUnit * 2}px ${theme.gridUnit * 3}px;
+ padding: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 3}px;
color: ${theme.colors.grayscale.base};
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
cursor: default;
border-bottom: 1px solid ${theme.colors.grayscale.light2};
`}
@@ -124,10 +124,10 @@ export const StyledError = styled.div`
justify-content: center;
align-items: flex-start;
width: 100%;
- padding: ${theme.gridUnit * 2}px;
- color: ${theme.colors.error.base};
+ padding: ${theme.sizeUnit * 2}px;
+ color: ${theme.colorError};
& svg {
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
}
`}
`;
diff --git a/superset-frontend/src/components/Table/VirtualTable.tsx b/superset-frontend/src/components/Table/VirtualTable.tsx
index 4eb4842e83843..73ade9d6aebe6 100644
--- a/superset-frontend/src/components/Table/VirtualTable.tsx
+++ b/superset-frontend/src/components/Table/VirtualTable.tsx
@@ -39,8 +39,8 @@ const StyledCell = styled('div')<{ height?: number }>(
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- padding-left: ${theme.gridUnit * 2}px;
- padding-right: ${theme.gridUnit}px;
+ padding-left: ${theme.sizeUnit * 2}px;
+ padding-right: ${theme.sizeUnit}px;
border-bottom: 1px solid ${theme.colors.grayscale.light3};
transition: background 0.3s;
line-height: ${height}px;
@@ -50,20 +50,23 @@ const StyledCell = styled('div')<{ height?: number }>(
const StyledTable = styled(AntTable)<{ height?: number }>(
({ theme }) => `
+ color: ${theme.colorText};
+ background-color: ${theme.colorBgContainer};
th.ant-table-cell {
- font-weight: ${theme.typography.weights.bold};
- color: ${theme.colors.grayscale.dark1};
+ font-weight: ${theme.fontWeightStrong};
+ color: ${theme.colorText};
+ user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ant-pagination-item-active {
- border-color: ${theme.colors.primary.base};
+ border-color: ${theme.colorPrimary};
}
}
.ant-table.ant-table-small {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
`,
);
@@ -91,7 +94,7 @@ const VirtualTable =
(
const theme = useTheme();
// If a column definition has no width, react-window will use this as the default column width
- const DEFAULT_COL_WIDTH = theme?.gridUnit * 37 || 150;
+ const DEFAULT_COL_WIDTH = theme?.sizeUnit * 37 || 150;
const widthColumnCount = columns!.filter(({ width }) => !width).length;
let staticColWidthTotal = 0;
columns?.forEach(column => {
diff --git a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
index b80d5445f58b0..ed7a7b1d353f4 100644
--- a/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
+++ b/superset-frontend/src/components/Table/header-renderers/HeaderWithRadioGroup.tsx
@@ -50,8 +50,8 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) {
{groupTitle}
@@ -81,7 +81,7 @@ function HeaderWithRadioGroup(props: HeaderWithRadioGroupProps) {
iconColor={theme.colors.grayscale.light1}
css={css`
margin-top: 3px; // we need exactly 3px to align the icon
- margin-right: ${theme.gridUnit}px;
+ margin-right: ${theme.sizeUnit}px;
`}
onClick={() => setPopoverVisible(true)}
/>
diff --git a/superset-frontend/src/components/Table/index.tsx b/superset-frontend/src/components/Table/index.tsx
index 11a803893b92c..23275e3d6718d 100644
--- a/superset-frontend/src/components/Table/index.tsx
+++ b/superset-frontend/src/components/Table/index.tsx
@@ -167,8 +167,8 @@ const StyledTable = styled(AntTable)<{ height?: number }>(
}
th.ant-table-cell {
- font-weight: ${theme.typography.weights.bold};
- color: ${theme.colors.grayscale.dark1};
+ font-weight: ${theme.fontWeightStrong};
+ color: ${theme.colorText};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -182,11 +182,11 @@ const StyledTable = styled(AntTable)<{ height?: number }>(
}
.ant-pagination-item-active {
- border-color: ${theme.colors.primary.base};
+ border-color: ${theme.colorPrimary};
}
.ant-table.ant-table-small {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
`,
);
@@ -198,7 +198,7 @@ const StyledVirtualTable = styled(VirtualTable)(
}
.virtual-table-cell {
box-sizing: border-box;
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
diff --git a/superset-frontend/src/components/TableCollection/index.tsx b/superset-frontend/src/components/TableCollection/index.tsx
index 5644db53b728d..16df7ecb90a1a 100644
--- a/superset-frontend/src/components/TableCollection/index.tsx
+++ b/superset-frontend/src/components/TableCollection/index.tsx
@@ -36,7 +36,7 @@ interface TableCollectionProps {
export const Table = styled.table`
${({ theme }) => `
- background-color: ${theme.colors.grayscale.light5};
+ background-color: ${theme.colorBgContainer};
border-collapse: separate;
border-radius: ${theme.borderRadius}px;
@@ -50,12 +50,11 @@ export const Table = styled.table`
}
}
th {
- background: ${theme.colors.grayscale.light5};
position: sticky;
top: 0;
&:first-of-type {
- padding-left: ${theme.gridUnit * 4}px;
+ padding-left: ${theme.sizeUnit * 4}px;
}
&.xs {
@@ -115,7 +114,7 @@ export const Table = styled.table`
position: relative;
.loading-bar {
- background-color: ${theme.colors.secondary.light4};
+ background-color: ${theme.colorBgTextHover};
border-radius: 7px;
span {
@@ -140,7 +139,7 @@ export const Table = styled.table`
&:hover {
path {
- fill: ${theme.colors.primary.base};
+ fill: ${theme.colorPrimary};
}
}
}
@@ -149,25 +148,25 @@ export const Table = styled.table`
.table-row {
.actions {
opacity: 0;
- font-size: ${theme.typography.sizes.xl}px;
+ font-size: ${theme.fontSizeXL}px;
display: flex;
}
&:hover {
- background-color: ${theme.colors.secondary.light5};
+ background-color: ${theme.colorBgTextHover};
.actions {
opacity: 1;
- transition: opacity ease-in ${theme.transitionTiming}s;
+ transition: opacity ease-in ${theme.motionDurationMid};
}
}
}
.table-row-selected {
- background-color: ${theme.colors.secondary.light4};
+ background-color: ${theme.colorPrimaryBgHover};
&:hover {
- background-color: ${theme.colors.secondary.light4};
+ background-color: ${theme.colorPrimaryBgHover};
}
}
@@ -179,7 +178,7 @@ export const Table = styled.table`
line-height: 1;
vertical-align: middle;
&:first-of-type {
- padding-left: ${theme.gridUnit * 4}px;
+ padding-left: ${theme.sizeUnit * 4}px;
}
&__wrap {
white-space: normal;
diff --git a/superset-frontend/src/components/TableSelector/index.tsx b/superset-frontend/src/components/TableSelector/index.tsx
index 940f42cb3dc8d..3fad6391d8c0b 100644
--- a/superset-frontend/src/components/TableSelector/index.tsx
+++ b/superset-frontend/src/components/TableSelector/index.tsx
@@ -51,8 +51,8 @@ const TableSelectorWrapper = styled.div`
display: flex;
align-items: center;
width: ${REFRESH_WIDTH}px;
- margin-left: ${theme.gridUnit}px;
- margin-top: ${theme.gridUnit * 5}px;
+ margin-left: ${theme.sizeUnit}px;
+ margin-top: ${theme.sizeUnit * 5}px;
}
.section {
@@ -62,7 +62,7 @@ const TableSelectorWrapper = styled.div`
}
.divider {
- border-bottom: 1px solid ${theme.colors.secondary.light5};
+ border-bottom: 1px solid ${theme.colorPrimaryBorder};
margin: 15px 0;
}
@@ -72,7 +72,7 @@ const TableSelectorWrapper = styled.div`
.select {
flex: 1;
- max-width: calc(100% - ${theme.gridUnit + REFRESH_WIDTH}px)
+ max-width: calc(100% - ${theme.sizeUnit + REFRESH_WIDTH}px)
}
`}
`;
@@ -84,7 +84,7 @@ const TableLabel = styled.span`
svg,
small {
- margin-right: ${({ theme }) => theme.gridUnit}px;
+ margin-right: ${({ theme }) => theme.sizeUnit}px;
}
`;
diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx
index ff5e00337e726..b8e1e21015e23 100644
--- a/superset-frontend/src/components/TableView/TableView.tsx
+++ b/superset-frontend/src/components/TableView/TableView.tsx
@@ -55,7 +55,7 @@ export interface TableViewProps {
}
const EmptyWrapper = styled.div`
- margin: ${({ theme }) => theme.gridUnit * 40}px 0;
+ margin: ${({ theme }) => theme.sizeUnit * 40}px 0;
`;
const TableViewStyles = styled.div<{
@@ -67,19 +67,19 @@ const TableViewStyles = styled.div<{
scrollTable &&
`
flex: 1 1 auto;
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
overflow: auto;
`}
.table-row {
- ${({ theme, small }) => !small && `height: ${theme.gridUnit * 11 - 1}px;`}
+ ${({ theme, small }) => !small && `height: ${theme.sizeUnit * 11 - 1}px;`}
.table-cell {
${({ theme, small }) =>
small &&
`
- padding-top: ${theme.gridUnit + 1}px;
- padding-bottom: ${theme.gridUnit + 1}px;
+ padding-top: ${theme.sizeUnit + 1}px;
+ padding-bottom: ${theme.sizeUnit + 1}px;
line-height: 1.45;
`}
}
@@ -88,7 +88,7 @@ const TableViewStyles = styled.div<{
th[role='columnheader'] {
z-index: 1;
border-bottom: ${({ theme }) =>
- `${theme.gridUnit - 2}px solid ${theme.colors.grayscale.light2}`};
+ `${theme.sizeUnit - 2}px solid ${theme.colors.grayscale.light2}`};
${({ small }) => small && `padding-bottom: 0;`}
}
`;
@@ -111,7 +111,7 @@ const PaginationStyles = styled.div<{
`};
.row-count-container {
- margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 2}px;
color: ${({ theme }) => theme.colors.grayscale.base};
}
`;
diff --git a/superset-frontend/src/components/Tabs/Tabs.tsx b/superset-frontend/src/components/Tabs/Tabs.tsx
index 3af2ecec36b75..078bc04b09f7c 100644
--- a/superset-frontend/src/components/Tabs/Tabs.tsx
+++ b/superset-frontend/src/components/Tabs/Tabs.tsx
@@ -54,7 +54,7 @@ const StyledTabs = ({
}
}
.short-link-trigger.btn {
- padding: 0 ${theme.gridUnit}px;
+ padding: 0 ${theme.sizeUnit}px;
& > .fa.fa-link {
top: 0;
}
@@ -72,16 +72,16 @@ const StyledTabs = ({
flex: 1 1 auto;
align-items: center;
justify-content: center;
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
text-align: center;
user-select: none;
.required {
- margin-left: ${theme.gridUnit / 2}px;
- color: ${theme.colors.error.base};
+ margin-left: ${theme.sizeUnit / 2}px;
+ color: ${theme.colorError};
}
}
.ant-tabs-ink-bar {
- background: ${theme.colors.secondary.base};
+ background: ${theme.colorPrimary};
}
`}
/>
@@ -106,7 +106,7 @@ const StyledEditableTabs = styled(StyledTabs)`
.ant-tabs-tab-remove {
padding-top: 0;
padding-bottom: 0;
- height: ${theme.gridUnit * 6}px;
+ height: ${theme.sizeUnit * 6}px;
}
${
@@ -140,8 +140,8 @@ EditableTabs.TabPane.defaultProps = {
export const StyledLineEditableTabs = styled(EditableTabs)`
&.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
- margin: 0 ${({ theme }) => theme.gridUnit * 4}px;
- padding: ${({ theme }) => `${theme.gridUnit * 3}px ${theme.gridUnit}px`};
+ margin: 0 ${({ theme }) => theme.sizeUnit * 4}px;
+ padding: ${({ theme }) => `${theme.sizeUnit * 3}px ${theme.sizeUnit}px`};
background: transparent;
border: none;
}
@@ -151,7 +151,7 @@ export const StyledLineEditableTabs = styled(EditableTabs)`
}
.ant-tabs-tab-btn {
- font-size: ${({ theme }) => theme.typography.sizes.m}px;
+ font-size: ${({ theme }) => theme.fontSize}px;
}
.ant-tabs-tab-remove {
diff --git a/superset-frontend/src/components/Tags/Tag.tsx b/superset-frontend/src/components/Tags/Tag.tsx
index 75a3c3e91ebe2..93dec1853760a 100644
--- a/superset-frontend/src/components/Tags/Tag.tsx
+++ b/superset-frontend/src/components/Tags/Tag.tsx
@@ -26,8 +26,8 @@ import { CloseOutlined } from '@ant-design/icons';
const StyledTag = styled(AntdTag)`
${({ theme }) => `
- margin-top: ${theme.gridUnit}px;
- margin-bottom: ${theme.gridUnit}px;
+ margin-top: ${theme.sizeUnit}px;
+ margin-bottom: ${theme.sizeUnit}px;
`};
`;
diff --git a/superset-frontend/src/components/Timer/index.tsx b/superset-frontend/src/components/Timer/index.tsx
index f0ae3cf059ad1..2bccbea4ef41a 100644
--- a/superset-frontend/src/components/Timer/index.tsx
+++ b/superset-frontend/src/components/Timer/index.tsx
@@ -32,7 +32,7 @@ export interface TimerProps {
const TimerLabel = styled(Label)`
text-align: left;
- font-family: ${({ theme }) => theme.typography.families.monospace};
+ font-family: ${({ theme }) => theme.fontFamilyCode};
`;
export default function Timer({
diff --git a/superset-frontend/src/components/Tooltip/Tooltip.test.tsx b/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
index f38d945240fa6..81b45d8c65d54 100644
--- a/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
+++ b/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
@@ -18,7 +18,6 @@
*/
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
-import { supersetTheme } from '@superset-ui/core';
import Button from 'src/components/Button';
import Icons from 'src/components/Icons';
import { Tooltip } from '.';
@@ -42,18 +41,6 @@ test('renders on hover', async () => {
expect(await screen.findByRole('tooltip')).toBeInTheDocument();
});
-test('renders with theme', () => {
- render(
-
- Hover me
- ,
- );
- const tooltip = screen.getByRole('tooltip');
- expect(tooltip).toHaveStyle({
- 'background-color': `${supersetTheme.colors.grayscale.dark2}e6`,
- });
-});
-
test('renders with icon child', async () => {
render(
diff --git a/superset-frontend/src/components/TruncatedList/index.tsx b/superset-frontend/src/components/TruncatedList/index.tsx
index ec764bfb299fe..1ffd1bcc99c58 100644
--- a/superset-frontend/src/components/TruncatedList/index.tsx
+++ b/superset-frontend/src/components/TruncatedList/index.tsx
@@ -88,8 +88,8 @@ const StyledTooltipItem = styled.div`
const StyledPlus = styled.span`
${({ theme }) => `
cursor: pointer;
- color: ${theme.colors.primary.dark1};
- font-weight: ${theme.typography.weights.normal};
+ color: ${theme.colorPrimaryText};
+ font-weight: ${theme.fontWeightNormal};
`}
`;
diff --git a/superset-frontend/src/components/WarningIconWithTooltip/index.tsx b/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
index 546047728ca54..c89b7a57a7e53 100644
--- a/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
+++ b/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
@@ -38,9 +38,9 @@ function WarningIconWithTooltip({
title={
);
diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
index 42852fef4d900..7755fe5fbd67b 100644
--- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
@@ -83,18 +83,18 @@ const MetadataItem: FC<{
}> = ({ label, value, tooltipText }) => (
css`
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
display: flex;
justify-content: space-between;
&:not(:last-child) {
- margin-bottom: ${theme.gridUnit}px;
+ margin-bottom: ${theme.sizeUnit}px;
}
`}
>
css`
- margin-right: ${theme.gridUnit * 4}px;
+ margin-right: ${theme.sizeUnit * 4}px;
color: ${theme.colors.grayscale.base};
`}
>
@@ -120,13 +120,13 @@ const SliceAddedBadgePlaceholder: FC<{
ref={placeholderRef}
css={(theme: Theme) => css`
/* Display styles */
- border: 1px solid ${theme.colors.primary.dark1};
- border-radius: ${theme.gridUnit}px;
- color: ${theme.colors.primary.dark1};
- font-size: ${theme.typography.sizes.xs}px;
+ border: 1px solid ${theme.colorPrimaryText};
+ border-radius: ${theme.sizeUnit}px;
+ color: ${theme.colorPrimaryText};
+ font-size: ${theme.fontSizeXS}px;
letter-spacing: 0.02em;
- padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
- margin-left: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit / 2}px ${theme.sizeUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 4}px;
pointer-events: none;
/* Position styles */
@@ -146,13 +146,13 @@ const SliceAddedBadge: FC<{ placeholder?: HTMLDivElement }> = ({
css`
/* Display styles */
- border: 1px solid ${theme.colors.primary.dark1};
- border-radius: ${theme.gridUnit}px;
- color: ${theme.colors.primary.dark1};
- font-size: ${theme.typography.sizes.xs}px;
+ border: 1px solid ${theme.colorPrimaryText};
+ border-radius: ${theme.sizeUnit}px;
+ color: ${theme.colorPrimaryText};
+ font-size: ${theme.fontSizeXS}px;
letter-spacing: 0.02em;
- padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
- margin-left: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit / 2}px ${theme.sizeUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 4}px;
pointer-events: none;
/* Position styles */
@@ -201,20 +201,19 @@ const AddSliceCard: FC<{
data-test="chart-card"
css={(theme: Theme) => css`
border: 1px solid ${theme.colors.grayscale.light2};
- border-radius: ${theme.gridUnit}px;
- background: ${theme.colors.grayscale.light5};
- padding: ${theme.gridUnit * 4}px;
- margin: 0 ${theme.gridUnit * 3}px ${theme.gridUnit * 3}px
- ${theme.gridUnit * 3}px;
+ border-radius: ${theme.sizeUnit}px;
+ padding: ${theme.sizeUnit * 4}px;
+ margin: 0 ${theme.sizeUnit * 3}px ${theme.sizeUnit * 3}px
+ ${theme.sizeUnit * 3}px;
position: relative;
cursor: ${isSelected ? 'not-allowed' : 'move'};
white-space: nowrap;
overflow: hidden;
line-height: 1.3;
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorText};
&:hover {
- background: ${theme.colors.grayscale.light4};
+ //background: ${theme.colors.grayscale.light4};
}
opacity: ${isSelected ? 0.4 : 'unset'};
@@ -257,8 +256,8 @@ const AddSliceCard: FC<{
css`
- margin-bottom: ${theme.gridUnit * 2}px;
- font-weight: ${theme.typography.weights.bold};
+ margin-bottom: ${theme.sizeUnit * 2}px;
+ font-weight: ${theme.fontWeightStrong};
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx
index 9b7623fd0a06a..0751caf71b3e1 100644
--- a/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx
+++ b/superset-frontend/src/dashboard/components/BuilderComponentPane/index.tsx
@@ -57,7 +57,7 @@ const BuilderComponentPane = ({ topOffset = 0 }) => (
id="tabs"
css={(theme: SupersetTheme) => css`
line-height: inherit;
- margin-top: ${theme.gridUnit * 2}px;
+ margin-top: ${theme.sizeUnit * 2}px;
height: 100%;
& .ant-tabs-content-holder {
diff --git a/superset-frontend/src/dashboard/components/CssEditor/index.tsx b/superset-frontend/src/dashboard/components/CssEditor/index.tsx
index e2748c8b0b1d7..c3c97e9034b39 100644
--- a/superset-frontend/src/dashboard/components/CssEditor/index.tsx
+++ b/superset-frontend/src/dashboard/components/CssEditor/index.tsx
@@ -45,10 +45,10 @@ const StyledWrapper = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
- margin-bottom: ${theme.gridUnit * 2}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
h5 {
- margin-top: ${theme.gridUnit}px;
+ margin-top: ${theme.sizeUnit}px;
}
}
.css-editor {
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index cdd59b459a091..78db1aa034af7 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -113,12 +113,12 @@ const StyledHeader = styled.div`
position: absolute;
content: '';
display: none;
- width: calc(100% - ${theme.gridUnit * 2}px);
- height: calc(100% - ${theme.gridUnit * 2}px);
- left: ${theme.gridUnit}px;
- top: ${theme.gridUnit}px;
+ width: calc(100% - ${theme.sizeUnit * 2}px);
+ height: calc(100% - ${theme.sizeUnit * 2}px);
+ left: ${theme.sizeUnit}px;
+ top: ${theme.sizeUnit}px;
border: 1px dashed transparent;
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
opacity: 0.5;
}
`}
@@ -144,17 +144,14 @@ const DashboardContentWrapper = styled.div`
/* drop shadow for top-level tabs only */
& .dashboard-component-tabs {
- box-shadow: 0 ${theme.gridUnit}px ${theme.gridUnit}px 0
- ${addAlpha(
- theme.colors.grayscale.dark2,
- parseFloat(theme.opacity.light) / 100,
- )};
- padding-left: ${theme.gridUnit *
+ box-shadow: 0 ${theme.sizeUnit}px ${theme.sizeUnit}px 0
+ ${addAlpha(theme.colors.grayscale.dark2, 0.1)};
+ padding-left: ${theme.sizeUnit *
2}px; /* note this is added to tab-level padding, to match header */
}
.dropdown-toggle.btn.btn-primary .caret {
- color: ${theme.colors.grayscale.light5};
+ color: ${theme.colorText};
}
.background--transparent {
@@ -162,7 +159,7 @@ const DashboardContentWrapper = styled.div`
}
.background--white {
- background-color: ${theme.colors.grayscale.light5};
+ background-color: ${theme.colorBgContainer};
}
}
&.dashboard--editing {
@@ -181,7 +178,7 @@ const DashboardContentWrapper = styled.div`
.grid-row.grid-row--hovered:after,
.dashboard-component-tabs > .grid-row--hovered:after {
- border: 2px dashed ${theme.colors.primary.base};
+ border: 2px dashed ${theme.colorPrimary};
}
.resizable-container {
@@ -206,7 +203,7 @@ const DashboardContentWrapper = styled.div`
&:hover,
&.resizable-container--resizing:hover {
& > .dashboard-component-chart-holder:after {
- border: 1px dashed ${theme.colors.primary.base};
+ border: 1px dashed ${theme.colorPrimary};
}
}
}
@@ -214,7 +211,7 @@ const DashboardContentWrapper = styled.div`
.resizable-container--resizing:hover > .grid-row:after,
.hover-menu:hover + .grid-row:after,
.dashboard-component-tabs > .hover-menu:hover + div:after {
- border: 1px dashed ${theme.colors.primary.base};
+ border: 1px dashed ${theme.colorPrimary};
z-index: 2;
}
@@ -226,7 +223,7 @@ const DashboardContentWrapper = styled.div`
/* provide hit area in case row contents is edge to edge */
.dashboard-component-tabs-content {
> .dragdroppable-row {
- padding-top: ${theme.gridUnit * 4}px;
+ padding-top: ${theme.sizeUnit * 4}px;
}
}
@@ -244,7 +241,7 @@ const DashboardContentWrapper = styled.div`
}
&:hover:after {
- border: 1px dashed ${theme.colors.primary.base};
+ border: 1px dashed ${theme.colorPrimary};
z-index: 2;
}
}
@@ -256,7 +253,7 @@ const DashboardContentWrapper = styled.div`
& .dashboard-component-tabs-content {
& > div:not(:last-child):not(.empty-droptarget) {
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
}
& > .empty-droptarget {
@@ -266,13 +263,13 @@ const DashboardContentWrapper = styled.div`
}
& > .empty-droptarget:first-child:not(.empty-droptarget--full) {
- height: ${theme.gridUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
top: 0;
}
& > .empty-droptarget:last-child {
- height: ${theme.gridUnit * 4}px;
- bottom: ${-theme.gridUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
+ bottom: ${-theme.sizeUnit * 4}px;
}
}
`}
@@ -299,15 +296,15 @@ const StyledDashboardContent = styled.div<{
width: 0;
flex: 1;
position: relative;
- margin-top: ${theme.gridUnit * 6}px;
- margin-right: ${theme.gridUnit * 8}px;
- margin-bottom: ${theme.gridUnit * 6}px;
+ margin-top: ${theme.sizeUnit * 6}px;
+ margin-right: ${theme.sizeUnit * 8}px;
+ margin-bottom: ${theme.sizeUnit * 6}px;
margin-left: ${marginLeft}px;
${editMode &&
`
max-width: calc(100% - ${
- BUILDER_SIDEPANEL_WIDTH + theme.gridUnit * 16
+ BUILDER_SIDEPANEL_WIDTH + theme.sizeUnit * 16
}px);
`}
@@ -325,26 +322,22 @@ const StyledDashboardContent = styled.div<{
.dashboard-component-chart-holder {
width: 100%;
height: 100%;
- background-color: ${theme.colors.grayscale.light5};
+ background-color: ${theme.colorBgContainer};
position: relative;
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
overflow-y: visible;
// transitionable traits to show filter relevance
transition:
- opacity ${theme.transitionTiming}s ease-in-out,
- border-color ${theme.transitionTiming}s ease-in-out,
- box-shadow ${theme.transitionTiming}s ease-in-out;
+ opacity ${theme.motionDurationMid} ease-in-out,
+ border-color ${theme.motionDurationMid} ease-in-out,
+ box-shadow ${theme.motionDurationMid} ease-in-out;
&.fade-in {
border-radius: ${theme.borderRadius}px;
box-shadow:
- inset 0 0 0 2px ${theme.colors.primary.base},
- 0 0 0 3px
- ${addAlpha(
- theme.colors.primary.base,
- parseFloat(theme.opacity.light) / 100,
- )};
+ inset 0 0 0 2px ${theme.colorPrimary},
+ 0 0 0 3px ${addAlpha(theme.colorPrimary, 0.1)};
}
&.fade-out {
@@ -360,7 +353,7 @@ const StyledDashboardContent = styled.div<{
justify-content: center;
.missing-chart-body {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
position: relative;
display: flex;
}
@@ -582,7 +575,7 @@ const DashboardBuilder = () => {
nativeFiltersEnabled &&
filterBarOrientation !== FilterBarOrientation.Horizontal
? 0
- : theme.gridUnit * 8;
+ : theme.sizeUnit * 8;
const renderChild = useCallback(
adjustedWidth => {
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx
index 1cb8746598a5d..ace04c0757d62 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardWrapper.tsx
@@ -58,9 +58,9 @@ const StyledDiv = styled.div`
/* A row within a column has inset hover menu */
.dragdroppable-column .dragdroppable-row .hover-menu--left {
- left: ${theme.gridUnit * -3}px;
- background: ${theme.colors.grayscale.light5};
- border: 1px solid ${theme.colors.grayscale.light2};
+ left: ${theme.sizeUnit * -3}px;
+ background-color: ${theme.colorBgContainer};
+ border: 1px solid ${theme.colorBorder};
}
.dashboard-component-tabs {
@@ -70,9 +70,9 @@ const StyledDiv = styled.div`
/* A column within a column or tabs has inset hover menu */
.dragdroppable-column .dragdroppable-column .hover-menu--top,
.dashboard-component-tabs .dragdroppable-column .hover-menu--top {
- top: ${theme.gridUnit * -3}px;
- background: ${theme.colors.grayscale.light5};
- border: 1px solid ${theme.colors.grayscale.light2};
+ top: ${theme.sizeUnit * -3}px;
+ background-color: ${theme.colorBgContainer};
+ border: 1px solid ${theme.colorBorder};
}
/* move Tabs hover menu to top near actual Tabs */
@@ -85,8 +85,8 @@ const StyledDiv = styled.div`
/* push Chart actions to upper right */
.dragdroppable-column .dashboard-component-chart-holder .hover-menu--top,
.dragdroppable .dashboard-component-header .hover-menu--top {
- right: ${theme.gridUnit * 2}px;
- top: ${theme.gridUnit * 2}px;
+ right: ${theme.sizeUnit * 2}px;
+ top: ${theme.sizeUnit * 2}px;
background: transparent;
border: none;
transform: unset;
@@ -98,15 +98,15 @@ const StyledDiv = styled.div`
}
p {
- margin: 0 0 ${theme.gridUnit * 2}px 0;
+ margin: 0 0 ${theme.sizeUnit * 2}px 0;
}
i.danger {
- color: ${theme.colors.error.base};
+ color: ${theme.colorError};
}
i.warning {
- color: ${theme.colors.warning.base};
+ color: ${theme.colorWarning};
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
index a5f0e52408ce6..5c6685b2420bc 100644
--- a/superset-frontend/src/dashboard/components/DashboardGrid.jsx
+++ b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
@@ -58,36 +58,36 @@ const GridContent = styled.div`
flex-direction: column;
/* gutters between rows */
& > div:not(:last-child):not(.empty-droptarget) {
- ${!editMode && `margin-bottom: ${theme.gridUnit * 4}px`};
+ ${!editMode && `margin-bottom: ${theme.sizeUnit * 4}px`};
}
.empty-droptarget {
width: 100%;
- height: ${theme.gridUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
display: flex;
align-items: center;
justify-content: center;
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
overflow: hidden;
&:before {
content: '';
display: block;
- width: calc(100% - ${theme.gridUnit * 2}px);
- height: calc(100% - ${theme.gridUnit * 2}px);
+ width: calc(100% - ${theme.sizeUnit * 2}px);
+ height: calc(100% - ${theme.sizeUnit * 2}px);
border: 1px dashed transparent;
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
opacity: 0.5;
}
}
& > .empty-droptarget:first-child {
- height: ${theme.gridUnit * 4}px;
- margin-top: ${theme.gridUnit * -4}px;
+ height: ${theme.sizeUnit * 4}px;
+ margin-top: ${theme.sizeUnit * -4}px;
}
& > .empty-droptarget:last-child {
- height: ${theme.gridUnit * 24}px;
+ height: ${theme.sizeUnit * 24}px;
}
& > .empty-droptarget.empty-droptarget--full:only-child {
@@ -103,16 +103,9 @@ const GridColumnGuide = styled.div`
position: absolute;
top: 0;
min-height: 100%;
- background-color: ${addAlpha(
- theme.colors.primary.base,
- parseFloat(theme.opacity.light) / 100,
- )};
+ background-color: ${addAlpha(theme.colorPrimary, 0.1)};
pointer-events: none;
- box-shadow: inset 0 0 0 1px
- ${addAlpha(
- theme.colors.primary.base,
- parseFloat(theme.opacity.mediumHeavy) / 100,
- )};
+ box-shadow: inset 0 0 0 1px ${addAlpha(theme.colorPrimary, 0.6)};
}
`};
`;
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
index a3b5a6512c334..c688c94685981 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.tsx
@@ -135,7 +135,7 @@ const DetailsPanelPopover = ({
.ant-popover-inner {
background-color: ${theme.colors.grayscale.dark2}cc;
.ant-popover-inner-content {
- padding: ${theme.gridUnit * 2}px;
+ padding: ${theme.sizeUnit * 2}px;
}
}
&.ant-popover-placement-bottom,
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
index 9abd2c9ea1290..92436e46e00a8 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx
@@ -25,9 +25,9 @@ export const Pill = styled.div`
background: ${theme.colors.grayscale.base};
border-radius: 1em;
vertical-align: text-top;
- padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px;
- font-size: ${theme.typography.sizes.m}px;
- font-weight: ${theme.typography.weights.bold};
+ padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
+ font-size: ${theme.fontSize}px;
+ font-weight: ${theme.fontWeightStrong};
min-width: 1em;
min-height: 1em;
line-height: 1em;
@@ -45,13 +45,13 @@ export const Pill = styled.div`
&:hover {
cursor: pointer;
- background: ${theme.colors.grayscale.dark1};
+ background: ${theme.colorText};
}
&.has-cross-filters {
- background: ${theme.colors.primary.base};
+ background: ${theme.colorPrimary};
&:hover {
- background: ${theme.colors.primary.dark1};
+ background: ${theme.colorPrimaryText};
}
}
`}
@@ -59,15 +59,15 @@ export const Pill = styled.div`
export const SectionName = styled.span`
${({ theme }) => css`
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
`}
`;
export const FilterName = styled.span`
${({ theme }) => css`
- padding-right: ${theme.gridUnit}px;
+ padding-right: ${theme.sizeUnit}px;
font-style: italic;
& > * {
- margin-right: ${theme.gridUnit}px;
+ margin-right: ${theme.sizeUnit}px;
}
`}
`;
@@ -88,9 +88,9 @@ export const FilterItem = styled.button`
}
& i svg {
- opacity: ${theme.opacity.mediumLight};
- margin-right: ${theme.gridUnit}px;
- transition: opacity ease-in-out ${theme.transitionTiming};
+ opacity: 35%;
+ margin-right: ${theme.sizeUnit}px;
+ transition: opacity ease-in-out ${theme.motionDurationMid};
}
&:hover i svg,
@@ -102,9 +102,9 @@ export const FilterItem = styled.button`
export const FiltersContainer = styled.div`
${({ theme }) => css`
- margin-top: ${theme.gridUnit}px;
+ margin-top: ${theme.sizeUnit}px;
&:not(:last-child) {
- padding-bottom: ${theme.gridUnit * 3}px;
+ padding-bottom: ${theme.sizeUnit * 3}px;
}
`}
`;
@@ -130,6 +130,6 @@ export const Separator = styled.div`
width: 100%;
height: 1px;
background-color: ${theme.colors.grayscale.light1};
- margin: ${theme.gridUnit * 4}px 0;
+ margin: ${theme.sizeUnit * 4}px 0;
`}
`;
diff --git a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
index 57413ffd23a80..9a395f8ba9a4a 100644
--- a/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
+++ b/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx
@@ -60,9 +60,9 @@ const StyledFilterCount = styled.div`
justify-items: center;
align-items: center;
cursor: pointer;
- margin-right: ${theme.gridUnit}px;
- padding-left: ${theme.gridUnit * 2}px;
- padding-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit}px;
+ padding-left: ${theme.sizeUnit * 2}px;
+ padding-right: ${theme.sizeUnit * 2}px;
background: ${theme.colors.grayscale.light4};
border-radius: 4px;
height: 100%;
@@ -75,7 +75,7 @@ const StyledFilterCount = styled.div`
}
.incompatible-count {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
&:focus-visible {
outline: 2px solid ${theme.colors.primary.dark2};
@@ -85,16 +85,16 @@ const StyledFilterCount = styled.div`
const StyledBadge = styled(Badge)`
${({ theme }) => `
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
&>sup.antd5-badge-count {
- padding: 0 ${theme.gridUnit}px;
- min-width: ${theme.gridUnit * 4}px;
- height: ${theme.gridUnit * 4}px;
+ padding: 0 ${theme.sizeUnit}px;
+ min-width: ${theme.sizeUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
line-height: 1.5;
- font-weight: ${theme.typography.weights.medium};
- font-size: ${theme.typography.sizes.s - 1}px;
+ font-weight: ${theme.fontWeightMedium};
+ font-size: ${theme.fontSizeSM - 1}px;
box-shadow: none;
- padding: 0 ${theme.gridUnit}px;
+ padding: 0 ${theme.sizeUnit}px;
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index 5ce86cc52f12c..c1ee6910e9471 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -104,12 +104,12 @@ const actionButtonsStyle = theme => css`
align-items: center;
.action-schedule-report {
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
}
.undoRedo {
display: flex;
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
}
`;
@@ -137,13 +137,13 @@ const undoRedoDisabled = theme => css`
`;
const saveBtnStyle = theme => css`
- min-width: ${theme.gridUnit * 17}px;
- height: ${theme.gridUnit * 8}px;
+ min-width: ${theme.sizeUnit * 17}px;
+ height: ${theme.sizeUnit * 8}px;
`;
const discardBtnStyle = theme => css`
- min-width: ${theme.gridUnit * 22}px;
- height: ${theme.gridUnit * 8}px;
+ min-width: ${theme.sizeUnit * 22}px;
+ height: ${theme.sizeUnit * 8}px;
`;
const discardChanges = () => {
diff --git a/superset-frontend/src/dashboard/components/IconButton.tsx b/superset-frontend/src/dashboard/components/IconButton.tsx
index 191915065df54..0af80c1f5321a 100644
--- a/superset-frontend/src/dashboard/components/IconButton.tsx
+++ b/superset-frontend/src/dashboard/components/IconButton.tsx
@@ -30,12 +30,12 @@ const StyledDiv = styled.div`
align-items: center;
color: ${({ theme }) => theme.colors.grayscale.base};
&:hover {
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
}
`;
const StyledSpan = styled.span`
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const IconButton = ({ icon, label, onClick }: IconButtonProps) => (
diff --git a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
index fc0b12a536a7f..3826e04157ef8 100644
--- a/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
+++ b/superset-frontend/src/dashboard/components/OverwriteConfirm/OverwriteConfirmModal.tsx
@@ -36,7 +36,7 @@ const STICKY_HEADER_HEIGHT = 32;
const StyledTitle = styled.h2`
${({ theme }) => `
- color: ${theme.colors.grayscale.dark1}
+ color: ${theme.colorText}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
index 08a1a8bce62b3..19d4bd84fe3c4 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
@@ -64,7 +64,7 @@ const StyledFormItem = styled(FormItem)`
const StyledJsonEditor = styled(JsonEditor)`
border-radius: ${({ theme }) => theme.borderRadius}px;
- border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
+ border: 1px solid ${({ theme }) => theme.colorPrimaryBorder};
`;
type PropertiesModalProps = {
diff --git a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx b/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
index 637ccde7bd42d..d772c5141b5e9 100644
--- a/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
+++ b/superset-frontend/src/dashboard/components/RefreshIntervalModal.tsx
@@ -34,12 +34,12 @@ const StyledModalTrigger = styled(ModalTrigger)`
`;
const RefreshWarningContainer = styled.div`
- margin-top: ${({ theme }) => theme.gridUnit * 6}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 6}px;
`;
const StyledDiv = styled.div`
display: flex;
- margin-top: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 3}px;
`;
const InnerStyledDiv = styled.div`
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.tsx b/superset-frontend/src/dashboard/components/SliceAdder.tsx
index 09f6270f83088..deb1155706934 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.tsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.tsx
@@ -94,15 +94,15 @@ const Controls = styled.div`
display: flex;
flex-direction: row;
padding:
- ${theme.gridUnit * 4}px
- ${theme.gridUnit * 3}px
- ${theme.gridUnit * 4}px
- ${theme.gridUnit * 3}px;
+ ${theme.sizeUnit * 4}px
+ ${theme.sizeUnit * 3}px
+ ${theme.sizeUnit * 4}px
+ ${theme.sizeUnit * 3}px;
`}
`;
const StyledSelect = styled(Select)<{ id?: string }>`
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
min-width: 150px;
`;
@@ -110,7 +110,7 @@ const NewChartButtonContainer = styled.div`
${({ theme }) => css`
display: flex;
justify-content: flex-end;
- padding-right: ${theme.gridUnit * 2}px;
+ padding-right: ${theme.sizeUnit * 2}px;
`}
`;
@@ -121,7 +121,7 @@ const NewChartButton = styled(Button)`
margin-left: 0;
}
& > [role='img']:first-of-type {
- margin-right: ${theme.gridUnit}px;
+ margin-right: ${theme.sizeUnit}px;
padding-bottom: 1px;
line-height: 0;
}
@@ -398,9 +398,9 @@ class SliceAdder extends Component
{
flex-direction: row;
justify-content: flex-start;
align-items: center;
- gap: ${theme.gridUnit}px;
- padding: 0 ${theme.gridUnit * 3}px ${theme.gridUnit * 4}px
- ${theme.gridUnit * 3}px;
+ gap: ${theme.sizeUnit}px;
+ padding: 0 ${theme.sizeUnit * 3}px ${theme.sizeUnit * 4}px
+ ${theme.sizeUnit * 3}px;
`}
>
`
cursor: default;
- color: ${theme.colors.primary.base};
+ color: ${theme.colorPrimary};
line-height: 1.8;
`}
`;
const ChartHeaderStyles = styled.div`
${({ theme }) => css`
- font-size: ${theme.typography.sizes.l}px;
- font-weight: ${theme.typography.weights.bold};
- margin-bottom: ${theme.gridUnit}px;
+ font-size: ${theme.fontSizeLG}px;
+ font-weight: ${theme.fontWeightStrong};
+ margin-bottom: ${theme.sizeUnit}px;
display: flex;
max-width: 100%;
align-items: flex-start;
@@ -92,7 +92,7 @@ const ChartHeaderStyles = styled.div`
height: 24px;
& > * {
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
}
}
@@ -111,18 +111,18 @@ const ChartHeaderStyles = styled.div`
}
.dropdown-menu.dropdown-menu-right {
- top: ${theme.gridUnit * 5}px;
+ top: ${theme.sizeUnit * 5}px;
}
.divider {
- margin: ${theme.gridUnit}px 0;
+ margin: ${theme.sizeUnit}px 0;
}
.refresh-tooltip {
display: block;
- height: ${theme.gridUnit * 4}px;
- margin: ${theme.gridUnit}px 0;
- color: ${theme.colors.text.label};
+ height: ${theme.sizeUnit * 4}px;
+ margin: ${theme.sizeUnit}px 0;
+ color: ${theme.colorTextLabel};
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx
index b27d3be2d7df7..38d1324173754 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/ViewResultsModalTrigger.tsx
@@ -52,8 +52,8 @@ export const ViewResultsModalTrigger = ({
responsive
resizable
resizableConfig={{
- minHeight: theme.gridUnit * 128,
- minWidth: theme.gridUnit * 128,
+ minHeight: theme.sizeUnit * 128,
+ minWidth: theme.sizeUnit * 128,
defaultSize: {
width: 'auto',
height: '75vh',
@@ -81,7 +81,7 @@ export const ViewResultsModalTrigger = ({
buttonSize="small"
onClick={handleCloseModal}
css={css`
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
`}
>
{t('Close')}
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index 25750dcca1121..441922872dc1c 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -60,18 +60,18 @@ import { ViewResultsModalTrigger } from './ViewResultsModalTrigger';
// TODO: replace 3 dots with an icon
const VerticalDotsContainer = styled.div`
- padding: ${({ theme }) => theme.gridUnit / 4}px
- ${({ theme }) => theme.gridUnit * 1.5}px;
+ padding: ${({ theme }) => theme.sizeUnit / 4}px
+ ${({ theme }) => theme.sizeUnit * 1.5}px;
.dot {
display: block;
- height: ${({ theme }) => theme.gridUnit}px;
- width: ${({ theme }) => theme.gridUnit}px;
+ height: ${({ theme }) => theme.sizeUnit}px;
+ width: ${({ theme }) => theme.sizeUnit}px;
border-radius: 50%;
- margin: ${({ theme }) => theme.gridUnit / 2}px 0;
+ margin: ${({ theme }) => theme.sizeUnit / 2}px 0;
- background-color: ${({ theme }) => theme.colors.text.label};
+ background-color: ${({ theme }) => theme.colorTextLabel};
}
&:hover {
@@ -81,7 +81,7 @@ const VerticalDotsContainer = styled.div`
const RefreshTooltip = styled.div`
height: auto;
- margin: ${({ theme }) => theme.gridUnit}px 0;
+ margin: ${({ theme }) => theme.sizeUnit}px 0;
color: ${({ theme }) => theme.colors.grayscale.base};
line-height: 21px;
display: flex;
diff --git a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
index ce47656d14600..a9f317fe319c1 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
@@ -105,14 +105,14 @@ const DragDroppableStyles = styled.div`
& {
.drop-indicator {
display: block;
- background-color: ${theme.colors.primary.base};
+ background-color: ${theme.colorPrimary};
position: absolute;
z-index: 10;
opacity: 0.3;
width: 100%;
height: 100%;
&.drop-indicator--forbidden {
- background-color: ${theme.colors.error.light1};
+ background-color: ${theme.colorErrorBg};
}
}
}
diff --git a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
index 0ba008a327df1..7a2acfa0384a9 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragHandle.tsx
@@ -27,7 +27,7 @@ interface DragHandleProps {
const DragHandleContainer = styled.div<{ position: 'left' | 'top' }>`
${({ theme, position }) => css`
- height: ${theme.gridUnit * 5}px;
+ height: ${theme.sizeUnit * 5}px;
overflow: hidden;
cursor: move;
${position === 'top' &&
diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx
index 92057767dc8e7..e85f58ecfef59 100644
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeModal.tsx
@@ -25,9 +25,9 @@ type FilterScopeModalProps = {
triggerNode: JSX.Element;
};
-const FilterScopeModalBody = styled.div(({ theme: { gridUnit } }) => ({
- padding: gridUnit * 2,
- paddingBottom: gridUnit * 3,
+const FilterScopeModalBody = styled.div(({ theme: { sizeUnit } }) => ({
+ padding: sizeUnit * 2,
+ paddingBottom: sizeUnit * 3,
}));
export default class FilterScopeModal extends PureComponent<
diff --git a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
index b271f62247037..1acd522a57caa 100644
--- a/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
+++ b/superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx
@@ -54,8 +54,8 @@ const ScopeContainer = styled.div`
display: flex;
flex-direction: column;
height: 80%;
- margin-right: ${theme.gridUnit * -6}px;
- font-size: ${theme.typography.sizes.m}px;
+ margin-right: ${theme.sizeUnit * -6}px;
+ font-size: ${theme.fontSize}px;
& .nav.nav-tabs {
border: none;
@@ -63,7 +63,7 @@ const ScopeContainer = styled.div`
& .filter-scope-body {
flex: 1;
- max-height: calc(100% - ${theme.gridUnit * 32}px);
+ max-height: calc(100% - ${theme.sizeUnit * 32}px);
.filter-field-pane,
.filter-scope-pane {
@@ -72,7 +72,7 @@ const ScopeContainer = styled.div`
}
& .warning-message {
- padding: ${theme.gridUnit * 6}px;
+ padding: ${theme.sizeUnit * 6}px;
}
`}
`;
@@ -81,7 +81,7 @@ const ScopeBody = styled.div`
${({ theme }) => css`
&.filter-scope-body {
flex: 1;
- max-height: calc(100% - ${theme.gridUnit * 32}px);
+ max-height: calc(100% - ${theme.sizeUnit * 32}px);
.filter-field-pane,
.filter-scope-pane {
@@ -93,17 +93,17 @@ const ScopeBody = styled.div`
const ScopeHeader = styled.div`
${({ theme }) => css`
- height: ${theme.gridUnit * 16}px;
+ height: ${theme.sizeUnit * 16}px;
border-bottom: 1px solid ${theme.colors.grayscale.light2};
- padding-left: ${theme.gridUnit * 6}px;
- margin-left: ${theme.gridUnit * -6}px;
+ padding-left: ${theme.sizeUnit * 6}px;
+ margin-left: ${theme.sizeUnit * -6}px;
h4 {
margin-top: 0;
}
.selected-fields {
- margin: ${theme.gridUnit * 3}px 0 ${theme.gridUnit * 4}px;
+ margin: ${theme.sizeUnit * 3}px 0 ${theme.sizeUnit * 4}px;
visibility: hidden;
&.multi-edit-mode {
@@ -111,7 +111,7 @@ const ScopeHeader = styled.div`
}
.selected-scopes {
- padding-left: ${theme.gridUnit}px;
+ padding-left: ${theme.sizeUnit}px;
}
}
`}
@@ -134,9 +134,9 @@ const ScopeSelector = styled.div`
.react-checkbox-tree .rct-icon.rct-icon-expand-all,
.react-checkbox-tree .rct-icon.rct-icon-collapse-all {
- font-family: ${theme.typography.families.sansSerif};
- font-size: ${theme.typography.sizes.m}px;
- color: ${theme.colors.primary.base};
+ font-family: ${theme.fontFamily};
+ font-size: ${theme.fontSize}px;
+ color: ${theme.colorPrimary};
&::before {
content: '';
@@ -154,39 +154,39 @@ const ScopeSelector = styled.div`
.filter-field-pane {
position: relative;
width: 40%;
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
padding-left: 0;
- border-right: 1px solid ${theme.colors.grayscale.light2};
+ border-right: 1px solid ${theme.colorBorder};
.filter-container label {
- font-weight: ${theme.typography.weights.normal};
- margin: 0 0 0 ${theme.gridUnit * 4}px;
+ font-weight: ${theme.fontWeightNormal};
+ margin: 0 0 0 ${theme.sizeUnit * 4}px;
word-break: break-all;
}
.filter-field-item {
- height: ${theme.gridUnit * 9}px;
+ height: ${theme.sizeUnit * 9}px;
display: flex;
align-items: center;
justify-content: center;
- padding: 0 ${theme.gridUnit * 6}px;
- margin-left: ${theme.gridUnit * -6}px;
+ padding: 0 ${theme.sizeUnit * 6}px;
+ margin-left: ${theme.sizeUnit * -6}px;
&.is-selected {
- border: 1px solid ${theme.colors.text.label};
+ border: 1px solid ${theme.colorBorder};
border-radius: ${theme.borderRadius}px;
- background-color: ${theme.colors.grayscale.light4};
- margin-left: ${theme.gridUnit * -6}px;
+ background-color: ${theme.colorBgContainer};
+ margin-left: ${theme.sizeUnit * -6}px;
}
}
.react-checkbox-tree {
.rct-title .root {
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
}
.rct-text {
- height: ${theme.gridUnit * 10}px;
+ height: ${theme.sizeUnit * 10}px;
}
}
}
@@ -194,45 +194,45 @@ const ScopeSelector = styled.div`
.filter-scope-pane {
position: relative;
flex: 1;
- padding: ${theme.gridUnit * 4}px;
- padding-right: ${theme.gridUnit * 6}px;
+ padding: ${theme.sizeUnit * 4}px;
+ padding-right: ${theme.sizeUnit * 6}px;
}
.react-checkbox-tree {
flex-direction: column;
- color: ${theme.colors.grayscale.dark1};
- font-size: ${theme.typography.sizes.m}px;
+ color: ${theme.colorText};
+ font-size: ${theme.fontSize}px;
.filter-scope-type {
- padding: ${theme.gridUnit * 2}px 0;
+ padding: ${theme.sizeUnit * 2}px 0;
display: flex;
align-items: center;
&.chart {
- font-weight: ${theme.typography.weights.normal};
+ font-weight: ${theme.fontWeightNormal};
}
&.selected-filter {
- padding-left: ${theme.gridUnit * 7}px;
+ padding-left: ${theme.sizeUnit * 7}px;
position: relative;
- color: ${theme.colors.text.label};
+ color: ${theme.colorBgContainerTextActive};
&::before {
content: ' ';
position: absolute;
left: 0;
top: 50%;
- width: ${theme.gridUnit * 4}px;
- height: ${theme.gridUnit * 4}px;
+ width: ${theme.sizeUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
border-radius: ${theme.borderRadius}px;
- margin-top: ${theme.gridUnit * -2}px;
- box-shadow: inset 0 0 0 2px ${theme.colors.grayscale.light2};
+ margin-top: ${theme.sizeUnit * -2}px;
+ box-shadow: inset 0 0 0 2px ${theme.colorBorder};
background: ${theme.colors.grayscale.light3};
}
}
&.root {
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
}
}
@@ -240,14 +240,14 @@ const ScopeSelector = styled.div`
svg {
position: relative;
top: 3px;
- width: ${theme.gridUnit * 4.5}px;
+ width: ${theme.sizeUnit * 4.5}px;
}
}
.rct-node-leaf {
.rct-bare-label {
&::before {
- padding-left: ${theme.gridUnit}px;
+ padding-left: ${theme.sizeUnit}px;
}
}
}
@@ -255,7 +255,7 @@ const ScopeSelector = styled.div`
.rct-options {
text-align: left;
margin-left: 0;
- margin-bottom: ${theme.gridUnit * 2}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
}
.rct-text {
@@ -278,27 +278,27 @@ const ScopeSelector = styled.div`
.multi-edit-mode {
.filter-field-item {
- padding: 0 ${theme.gridUnit * 4}px 0 ${theme.gridUnit * 12}px;
- margin-left: ${theme.gridUnit * -12}px;
+ padding: 0 ${theme.sizeUnit * 4}px 0 ${theme.sizeUnit * 12}px;
+ margin-left: ${theme.sizeUnit * -12}px;
&.is-selected {
- margin-left: ${theme.gridUnit * -13}px;
+ margin-left: ${theme.sizeUnit * -13}px;
}
}
}
.scope-search {
position: absolute;
- right: ${theme.gridUnit * 4}px;
- top: ${theme.gridUnit * 4}px;
+ right: ${theme.sizeUnit * 4}px;
+ top: ${theme.sizeUnit * 4}px;
border-radius: ${theme.borderRadius}px;
border: 1px solid ${theme.colors.grayscale.light2};
- padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px;
- font-size: ${theme.typography.sizes.m}px;
+ padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
+ font-size: ${theme.fontSize}px;
outline: none;
&:focus {
- border: 1px solid ${theme.colors.primary.base};
+ border: 1px solid ${theme.colorPrimary};
}
}
}
@@ -307,15 +307,15 @@ const ScopeSelector = styled.div`
const ActionsContainer = styled.div`
${({ theme }) => `
- height: ${theme.gridUnit * 16}px;
+ height: ${theme.sizeUnit * 16}px;
- border-top: ${theme.gridUnit / 4}px solid ${theme.colors.primary.light3};
- padding: ${theme.gridUnit * 6}px;
- margin: 0 0 0 ${-theme.gridUnit * 6}px;
+ border-top: ${theme.sizeUnit / 4}px solid ${theme.colors.primary.light3};
+ padding: ${theme.sizeUnit * 6}px;
+ margin: 0 0 0 ${-theme.sizeUnit * 6}px;
text-align: right;
.btn {
- margin-right: ${theme.gridUnit * 4}px;
+ margin-right: ${theme.sizeUnit * 4}px;
&:last-child {
margin-right: 0;
diff --git a/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx b/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx
index c1e7b672a4fe6..b2bc4a2472c38 100644
--- a/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx
+++ b/superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx
@@ -24,9 +24,9 @@ import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
const ChartIcon = styled(Icons.BarChartOutlined)`
${({ theme }) => `
position: relative;
- top: ${theme.gridUnit - 1}px;
- color: ${theme.colors.primary.base};
- margin-right: ${theme.gridUnit * 2}px;
+ top: ${theme.sizeUnit - 1}px;
+ color: ${theme.colorPrimary};
+ margin-right: ${theme.sizeUnit * 2}px;
`}
`;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx
index 887f1baa73f58..c0730bb4bb3b6 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/ChartHolder.tsx
@@ -100,7 +100,7 @@ const ChartHolder = ({
z-index: 3000;
left: 0;
top: 0;
- padding: ${theme.gridUnit * 2}px;
+ padding: ${theme.sizeUnit * 2}px;
}
`;
const { chartId } = component.meta;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
index 71c1892f3b887..939a33951d832 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx
@@ -70,7 +70,7 @@ const ColumnStyles = styled.div`
position: relative;
& > :not(.hover-menu):not(:last-child) {
- ${!editMode && `margin-bottom: ${theme.gridUnit * 4}px;`}
+ ${!editMode && `margin-bottom: ${theme.sizeUnit * 4}px;`}
}
}
@@ -87,7 +87,7 @@ const ColumnStyles = styled.div`
}
.dashboard--editing .resizable-container--resizing:hover > &:after,
.dashboard--editing .hover-menu:hover + &:after {
- border: 1px dashed ${theme.colors.primary.base};
+ border: 1px dashed ${theme.colorPrimary};
z-index: 2;
}
@@ -110,13 +110,13 @@ const ColumnStyles = styled.div`
`;
const emptyColumnContentStyles = theme => css`
- min-height: ${theme.gridUnit * 25}px;
+ min-height: ${theme.sizeUnit * 25}px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
- color: ${theme.colors.text.label};
+ color: ${theme.colorTextLabel};
`;
const Column = props => {
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Divider.jsx b/superset-frontend/src/dashboard/components/gridComponents/Divider.jsx
index 48eb4270ea35c..5ba5b926ba5d6 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Divider.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Divider.jsx
@@ -40,7 +40,7 @@ const propTypes = {
const DividerLine = styled.div`
${({ theme }) => css`
width: 100%;
- padding: ${theme.gridUnit * 2}px 0; /* this is padding not margin to enable a larger mouse target */
+ padding: ${theme.sizeUnit * 2}px 0; /* this is padding not margin to enable a larger mouse target */
background-color: transparent;
&:after {
@@ -56,8 +56,8 @@ const DividerLine = styled.div`
}
.dashboard-component-tabs & {
- padding-left: ${theme.gridUnit * 4}px;
- padding-right: ${theme.gridUnit * 4}px;
+ padding-left: ${theme.sizeUnit * 4}px;
+ padding-right: ${theme.sizeUnit * 4}px;
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Header.jsx b/superset-frontend/src/dashboard/components/gridComponents/Header.jsx
index c786a9cf5c196..b0c3e43cf4824 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Header.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Header.jsx
@@ -59,20 +59,20 @@ const defaultProps = {};
const HeaderStyles = styled.div`
${({ theme }) => css`
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
width: 100%;
- padding: ${theme.gridUnit * 4}px 0;
+ padding: ${theme.sizeUnit * 4}px 0;
&.header-small {
- font-size: ${theme.typography.sizes.l}px;
+ font-size: ${theme.fontSizeLG}px;
}
&.header-medium {
- font-size: ${theme.typography.sizes.xl}px;
+ font-size: ${theme.fontSizeXL}px;
}
&.header-large {
- font-size: ${theme.typography.sizes.xxl}px;
+ font-size: ${theme.fontSizeXXL}px;
}
.dashboard--editing .dashboard-grid & {
@@ -89,7 +89,7 @@ const HeaderStyles = styled.div`
}
&:hover:after {
- border: 1px dashed ${theme.colors.primary.base};
+ border: 1px dashed ${theme.colorPrimary};
z-index: 2;
}
}
@@ -103,14 +103,14 @@ const HeaderStyles = styled.div`
* we'll not worry about double padding on top as it can serve as a visual separator
*/
.grid-column > :not(:last-child) & {
- margin-bottom: ${theme.gridUnit * -4}px;
+ margin-bottom: ${theme.sizeUnit * -4}px;
}
.background--white &,
&.background--white,
.dashboard-component-tabs & {
- padding-left: ${theme.gridUnit * 4}px;
- padding-right: ${theme.gridUnit * 4}px;
+ padding-left: ${theme.sizeUnit * 4}px;
+ padding-right: ${theme.sizeUnit * 4}px;
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx b/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
index 3faa420b32617..2141fa9ec4494 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
@@ -92,7 +92,7 @@ const MarkdownStyles = styled.div`
h4,
h5,
h6 {
- font-weight: ${theme.typography.weights.normal};
+ font-weight: ${theme.fontWeightNormal};
}
h5 {
@@ -100,7 +100,7 @@ const MarkdownStyles = styled.div`
}
h6 {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
.dashboard-component-chart-holder {
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
index bd59306ca97fa..3817e1d09a0dc 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
@@ -90,16 +90,16 @@ const GridRow = styled.div`
height: fit-content;
& > :not(:last-child):not(.hover-menu) {
- ${!editMode && `margin-right: ${theme.gridUnit * 4}px;`}
+ ${!editMode && `margin-right: ${theme.sizeUnit * 4}px;`}
}
& .empty-droptarget {
position: relative;
align-self: center;
&.empty-droptarget--vertical {
- min-width: ${theme.gridUnit * 4}px;
+ min-width: ${theme.sizeUnit * 4}px;
&:not(:last-child) {
- width: ${theme.gridUnit * 4}px;
+ width: ${theme.sizeUnit * 4}px;
}
&:first-child:not(.droptarget-side) {
z-index: ${EMPTY_CONTAINER_Z_INDEX};
@@ -111,7 +111,7 @@ const GridRow = styled.div`
&.droptarget-side {
z-index: ${EMPTY_CONTAINER_Z_INDEX};
position: absolute;
- width: ${theme.gridUnit * 4}px;
+ width: ${theme.sizeUnit * 4}px;
&:first-child {
inset-inline-start: 0;
}
@@ -119,7 +119,7 @@ const GridRow = styled.div`
}
&.grid-row--empty {
- min-height: ${theme.gridUnit * 25}px;
+ min-height: ${theme.sizeUnit * 25}px;
}
`}
`;
@@ -131,7 +131,7 @@ const emptyRowContentStyles = theme => css`
display: flex;
align-items: center;
justify-content: center;
- color: ${theme.colors.text.label};
+ color: ${theme.colorTextLabel};
`;
const Row = props => {
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index 9fbf49345bd3a..b65c530b9b6e1 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -78,11 +78,10 @@ const defaultProps = {
const StyledTabsContainer = styled.div`
width: 100%;
- background-color: ${({ theme }) => theme.colors.grayscale.light5};
.dashboard-component-tabs-content {
- min-height: ${({ theme }) => theme.gridUnit * 12}px;
- margin-top: ${({ theme }) => theme.gridUnit / 4}px;
+ min-height: ${({ theme }) => theme.sizeUnit * 12}px;
+ margin-top: ${({ theme }) => theme.sizeUnit / 4}px;
position: relative;
}
@@ -90,7 +89,8 @@ const StyledTabsContainer = styled.div`
overflow: visible;
.ant-tabs-nav-wrap {
- min-height: ${({ theme }) => theme.gridUnit * 12.5}px;
+ min-height: ${({ theme }) => theme.sizeUnit * 12.5}px;
+ background-color: ${({ theme }) => theme.colorBgContainer};
}
.ant-tabs-content-holder {
@@ -108,7 +108,7 @@ const StyledCancelXIcon = styled(Icons.CancelX)`
`;
const DropIndicator = styled.div`
- border: 2px solid ${({ theme }) => theme.colors.primary.base};
+ border: 2px solid ${({ theme }) => theme.colorPrimary};
width: 5px;
height: 100%;
position: absolute;
diff --git a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.jsx b/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.jsx
index b11acee045b00..07ddaf119c41c 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.jsx
@@ -42,7 +42,7 @@ const NewComponent = styled.div`
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
background: ${theme.colors.grayscale.light5};
cursor: move;
@@ -56,22 +56,22 @@ const NewComponentPlaceholder = styled.div`
${({ theme }) => css`
position: relative;
background: ${theme.colors.grayscale.light4};
- width: ${theme.gridUnit * 10}px;
- height: ${theme.gridUnit * 10}px;
- margin-right: ${theme.gridUnit * 4}px;
+ width: ${theme.sizeUnit * 10}px;
+ height: ${theme.sizeUnit * 10}px;
+ margin-right: ${theme.sizeUnit * 4}px;
border: 1px solid ${theme.colors.grayscale.light5};
display: flex;
align-items: center;
justify-content: center;
- color: ${theme.colors.text.label};
- font-size: ${theme.typography.sizes.xxl}px;
+ color: ${theme.colorTextLabel};
+ font-size: ${theme.fontSizeXXL}px;
&.fa-window-restore {
- font-size: ${theme.typography.sizes.l}px;
+ font-size: ${theme.fontSizeLG}px;
}
&.fa-area-chart {
- font-size: ${theme.typography.sizes.xl}px;
+ font-size: ${theme.fontSizeXL}px;
}
&.divider-placeholder:after {
diff --git a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
index eb44ee81c0df2..a6c671349f1d4 100644
--- a/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
+++ b/superset-frontend/src/dashboard/components/menu/BackgroundStyleDropdown.tsx
@@ -40,7 +40,7 @@ const BackgroundStyleOption = styled.div`
content: '';
width: 1em;
height: 1em;
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
display: inline-block;
vertical-align: middle;
}
@@ -59,18 +59,18 @@ const BackgroundStyleOption = styled.div`
&.background--transparent:before {
background-image: linear-gradient(
45deg,
- ${theme.colors.text.label} 25%,
+ ${theme.colorTextLabel} 25%,
transparent 25%
),
- linear-gradient(-45deg, ${theme.colors.text.label} 25%, transparent 25%),
- linear-gradient(45deg, transparent 75%, ${theme.colors.text.label} 75%),
- linear-gradient(-45deg, transparent 75%, ${theme.colors.text.label} 75%);
- background-size: ${theme.gridUnit * 2}px ${theme.gridUnit * 2}px;
+ linear-gradient(-45deg, ${theme.colorTextLabel} 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, ${theme.colorTextLabel} 75%),
+ linear-gradient(-45deg, transparent 75%, ${theme.colorTextLabel} 75%);
+ background-size: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 2}px;
background-position:
0 0,
- 0 ${theme.gridUnit}px,
- ${theme.gridUnit}px ${-theme.gridUnit}px,
- ${-theme.gridUnit}px 0px;
+ 0 ${theme.sizeUnit}px,
+ ${theme.sizeUnit}px ${-theme.sizeUnit}px,
+ ${-theme.sizeUnit}px 0px;
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx b/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
index 2af9faa8d4765..959b27778e29b 100644
--- a/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
+++ b/superset-frontend/src/dashboard/components/menu/HoverMenu.tsx
@@ -34,15 +34,15 @@ const HoverStyleOverrides = styled.div`
opacity: 0;
position: absolute;
z-index: 11; // one more than DragDroppable
- font-size: ${({ theme }) => theme.typography.sizes.m};
+ font-size: ${({ theme }) => theme.fontSize};
}
.hover-menu--left {
- width: ${({ theme }) => theme.gridUnit * 6}px;
+ width: ${({ theme }) => theme.sizeUnit * 6}px;
top: 50%;
transform: translate(0, -50%);
- left: ${({ theme }) => theme.gridUnit * -7}px;
- padding: ${({ theme }) => theme.gridUnit * 2}px 0;
+ left: ${({ theme }) => theme.sizeUnit * -7}px;
+ padding: ${({ theme }) => theme.sizeUnit * 2}px 0;
display: flex;
flex-direction: column;
justify-content: center;
@@ -50,15 +50,15 @@ const HoverStyleOverrides = styled.div`
}
.hover-menu--left > :nth-child(n):not(:only-child):not(:last-child) {
- margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 3}px;
}
.hover-menu--top {
- height: ${({ theme }) => theme.gridUnit * 6}px;
- top: ${({ theme }) => theme.gridUnit * -6}px;
+ height: ${({ theme }) => theme.sizeUnit * 6}px;
+ top: ${({ theme }) => theme.sizeUnit * -6}px;
left: 50%;
transform: translate(-50%);
- padding: 0 ${({ theme }) => theme.gridUnit * 2}px;
+ padding: 0 ${({ theme }) => theme.sizeUnit * 2}px;
display: flex;
flex-direction: row;
justify-content: center;
diff --git a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx b/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
index 0845e2e964b92..272619f2f55d6 100644
--- a/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
+++ b/superset-frontend/src/dashboard/components/menu/WithPopoverMenu.tsx
@@ -54,15 +54,15 @@ const WithPopoverMenuStyles = styled.div`
left: 0;
width: 100%;
height: 100%;
- border: 2px solid ${theme.colors.primary.base};
+ border: 2px solid ${theme.colorPrimary};
pointer-events: none;
}
.dashboard-component-tabs li &.with-popover-menu--focused:after {
- top: ${theme.gridUnit * -3}px;
- left: ${theme.gridUnit * -2}px;
- width: calc(100% + ${theme.gridUnit * 4}px);
- height: calc(100% + ${theme.gridUnit * 7}px);
+ top: ${theme.sizeUnit * -3}px;
+ left: ${theme.sizeUnit * -2}px;
+ width: calc(100% + ${theme.sizeUnit * 4}px);
+ height: calc(100% + ${theme.sizeUnit * 7}px);
}
`}
`;
@@ -73,15 +73,11 @@ const PopoverMenuStyles = styled.div`
flex-wrap: nowrap;
left: 1px;
top: -42px;
- height: ${theme.gridUnit * 10}px;
- padding: 0 ${theme.gridUnit * 4}px;
+ height: ${theme.sizeUnit * 10}px;
+ padding: 0 ${theme.sizeUnit * 4}px;
background: ${theme.colors.grayscale.light5};
- box-shadow: 0 1px 2px 1px
- ${addAlpha(
- theme.colors.grayscale.dark2,
- parseFloat(theme.opacity.mediumLight) / 100,
- )};
- font-size: ${theme.typography.sizes.m}px;
+ box-shadow: 0 1px 2px 1px ${addAlpha(theme.colors.grayscale.dark2, 0.35)};
+ font-size: ${theme.fontSize}px;
cursor: default;
z-index: 3000;
@@ -98,7 +94,7 @@ const PopoverMenuStyles = styled.div`
width: 1px;
height: 100%;
background: ${theme.colors.grayscale.light2};
- margin: 0 ${theme.gridUnit * 4}px;
+ margin: 0 ${theme.sizeUnit * 4}px;
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
index 297a495573ba9..f29d8134ee8f4 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
@@ -48,7 +48,7 @@ const containerStyle = (theme: SupersetTheme) => css`
color: ${theme.colors.grayscale.base};
margin-left: 0;
&:hover {
- color: ${theme.colors.primary.dark1};
+ color: ${theme.colorPrimaryText};
}
&[disabled],
@@ -69,12 +69,12 @@ const verticalStyle = (theme: SupersetTheme, width: number) => css`
width: ${width - 1}px;
bottom: 0;
- padding: ${theme.gridUnit * 4}px;
- padding-top: ${theme.gridUnit * 6}px;
+ padding: ${theme.sizeUnit * 4}px;
+ padding-top: ${theme.sizeUnit * 6}px;
background: linear-gradient(
${rgba(theme.colors.grayscale.light5, 0)},
- ${theme.colors.grayscale.light5} ${theme.opacity.mediumLight}
+ ${theme.colors.grayscale.light5} 60%
);
& > button {
@@ -82,7 +82,7 @@ const verticalStyle = (theme: SupersetTheme, width: number) => css`
}
& > .filter-apply-button {
- margin-bottom: ${theme.gridUnit * 3}px;
+ margin-bottom: ${theme.sizeUnit * 3}px;
}
`;
@@ -91,7 +91,7 @@ const horizontalStyle = (theme: SupersetTheme) => css`
margin-left: auto;
&& > .filter-clear-all-button {
text-transform: capitalize;
- font-weight: ${theme.typography.weights.normal};
+ font-weight: ${theme.fontWeightNormal};
}
& > .filter-apply-button {
&[disabled],
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
index 541fa34080c6b..a4b5ab2fc2531 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
@@ -66,7 +66,7 @@ const CrossFilter = (props: {
${orientation === FilterBarOrientation.Vertical
? `
display: block;
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
`
: `
display: flex;
@@ -93,15 +93,15 @@ const CrossFilter = (props: {
? `
width: 1px;
height: 22px;
- margin-left: ${theme.gridUnit * 4}px;
- margin-right: ${theme.gridUnit}px;
+ margin-left: ${theme.sizeUnit * 4}px;
+ margin-right: ${theme.sizeUnit}px;
`
: `
width: 100%;
height: 1px;
display: block;
- margin-bottom: ${theme.gridUnit * 4}px;
- margin-top: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
+ margin-top: ${theme.sizeUnit * 4}px;
`}
background: ${theme.colors.grayscale.light2};
`}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
index 14917fb3ac3c7..5dba92103c702 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
@@ -33,15 +33,15 @@ import { ellipsisCss } from './styles';
const StyledCrossFilterValue = styled.b`
${({ theme }) => `
- max-width: ${theme.gridUnit * 25}px;
+ max-width: ${theme.sizeUnit * 25}px;
`}
${ellipsisCss}
`;
const StyledCrossFilterColumn = styled('span')`
${({ theme }) => `
- max-width: ${theme.gridUnit * 25}px;
- padding-right: ${theme.gridUnit}px;
+ max-width: ${theme.sizeUnit * 25}px;
+ padding-right: ${theme.sizeUnit}px;
`}
${ellipsisCss}
`;
@@ -74,10 +74,10 @@ const CrossFilterTag = (props: {
css={css`
${orientation === FilterBarOrientation.Vertical
? `
- margin-top: ${theme.gridUnit * 2}px;
+ margin-top: ${theme.sizeUnit * 2}px;
`
: `
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
`}
`}
closable
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
index 714e3be34e8cb..1d8845aaa1412 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
@@ -32,7 +32,7 @@ import { ellipsisCss } from './styles';
const StyledCrossFilterTitle = styled.div`
${({ theme }) => `
display: flex;
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.base};
vertical-align: middle;
align-items: center;
@@ -43,7 +43,7 @@ const StyledIconSearch = styled(Icons.SearchOutlined)`
${({ theme }) => `
& > span.anticon.anticon-search {
color: ${theme.colors.grayscale.light1};
- margin-left: ${theme.gridUnit}px;
+ margin-left: ${theme.sizeUnit}px;
transition: 0.3s;
vertical-align: middle;
line-height: 0;
@@ -68,8 +68,8 @@ const CrossFilterChartTitle = (props: {
css`
- margin-top: ${theme.gridUnit * 2}px;
+ margin-top: ${theme.sizeUnit * 2}px;
& button > [role='img']:first-of-type {
- margin-right: ${theme.gridUnit}px;
+ margin-right: ${theme.sizeUnit}px;
line-height: 0;
}
@@ -151,7 +151,7 @@ export const ChartsScopingListPanel = ({
width: 100%;
height: 1px;
background-color: ${theme.colors.grayscale.light3};
- margin: ${theme.gridUnit * 3}px 0;
+ margin: ${theme.sizeUnit * 3}px 0;
`}
/>
{customScopedCharts.map(chartInfo => (
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModalContent.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModalContent.tsx
index 7eed3c7b75e15..264f492056549 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModalContent.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingModalContent.tsx
@@ -37,7 +37,7 @@ const ModalContentContainer = styled.div`
display: flex;
height: 100%;
& > div {
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
index abd8b4398591b..17d6a9e0c1d26 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/ScopingModal/ScopingTreePanel.tsx
@@ -52,9 +52,9 @@ interface ScopingTreePanelProps {
const InfoText = styled.div`
${({ theme }) => css`
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.base};
- margin-bottom: ${theme.gridUnit * 7}px;
+ margin-bottom: ${theme.sizeUnit * 7}px;
`}
`;
@@ -98,20 +98,20 @@ const ChartSelect = ({
return (
{`${t('Chart')} *`}
@@ -163,7 +163,7 @@ export const ScopingTreePanel = ({
message={
{t('Cross-filtering is not enabled in this dashboard')}
@@ -172,7 +172,7 @@ export const ScopingTreePanel = ({
type="info"
closable={false}
css={css`
- margin-bottom: ${theme.gridUnit * 6}px;
+ margin-bottom: ${theme.sizeUnit * 6}px;
`}
/>
)}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
index 38494c6680e2e..48915f0963308 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
@@ -27,14 +27,14 @@ import { CrossFilterIndicator } from '../../selectors';
const StyledCollapse = styled(Collapse)`
${({ theme }) => `
.ant-collapse-header {
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
}
.ant-collapse-item > .ant-collapse-header {
padding-bottom: 0;
}
.ant-collapse-item > .ant-collapse-header > .ant-collapse-arrow {
- font-size: ${theme.typography.sizes.xs}px;
- padding-top: ${theme.gridUnit * 3}px;
+ font-size: ${theme.fontSizeXS}px;
+ padding-top: ${theme.sizeUnit * 3}px;
}
.ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
padding-top: 0;
@@ -44,7 +44,7 @@ const StyledCollapse = styled(Collapse)`
const StyledCrossFiltersTitle = styled.span`
${({ theme }) => `
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
`}
`;
@@ -91,7 +91,7 @@ const CrossFiltersVerticalCollapse = (props: {
height: 1px;
display: block;
background: ${theme.colors.grayscale.light3};
- margin: ${theme.gridUnit * 8}px auto 0 auto;
+ margin: ${theme.sizeUnit * 8}px auto 0 auto;
`}
/>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
index 9afc05b40c55f..cfe9760d27607 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
@@ -50,7 +50,7 @@ const StyledMenuLabel = styled.span`
justify-content: space-between;
.enable-cross-filters-text {
- padding-left: ${({ theme }) => `${theme.gridUnit * 2}px`};
+ padding-left: ${({ theme }) => `${theme.sizeUnit * 2}px`};
}
`;
@@ -59,8 +59,8 @@ const StyledCheckbox = styled(Checkbox)`
&,
svg {
display: inline-block;
- width: ${theme.gridUnit * 4}px;
- height: ${theme.gridUnit * 4}px;
+ width: ${theme.sizeUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 089b6857cb3f4..cda912d469837 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -40,14 +40,14 @@ const StyledIcon = styled.div`
`;
const VerticalFilterControlTitle = styled.h4`
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
- color: ${({ theme }) => theme.colors.grayscale.dark1};
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
+ color: ${({ theme }) => theme.colorText};
margin: 0;
overflow-wrap: anywhere;
`;
const HorizontalFilterControlTitle = styled(VerticalFilterControlTitle)`
- font-weight: ${({ theme }) => theme.typography.weights.normal};
+ font-weight: ${({ theme }) => theme.fontWeightNormal};
color: ${({ theme }) => theme.colors.grayscale.base};
${truncationCSS};
`;
@@ -63,7 +63,7 @@ const VerticalFilterControlTitleBox = styled.div`
flex-direction: row;
align-items: center;
justify-content: space-between;
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
`;
const HorizontalFilterControlTitleBox = styled(VerticalFilterControlTitleBox)`
@@ -81,10 +81,10 @@ const VerticalFilterControlContainer = styled(Form)`
&& .ant-form-item-label > label {
text-transform: none;
width: 100%;
- padding-right: ${({ theme }) => theme.gridUnit * 11}px;
+ padding-right: ${({ theme }) => theme.sizeUnit * 11}px;
}
.ant-form-item-tooltip {
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
}
`;
@@ -94,7 +94,7 @@ const HorizontalFilterControlContainer = styled(Form)`
text-transform: none;
}
.ant-form-item-tooltip {
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
}
`;
@@ -129,7 +129,7 @@ const HorizontalFormItem = styled(StyledFormItem)`
.ant-form-item-label {
overflow: visible;
padding-bottom: 0;
- margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * 2}px;
label.ant-form-item-required:not(.ant-form-item-required-mark-optional) {
&::after {
display: none;
@@ -142,7 +142,7 @@ const HorizontalFormItem = styled(StyledFormItem)`
}
.ant-form-item-control {
- width: ${({ theme }) => theme.gridUnit * 41}px;
+ width: ${({ theme }) => theme.sizeUnit * 41}px;
}
`;
@@ -178,15 +178,15 @@ const useFilterControlDisplay = (
}, [orientation, overflow]);
const ToolTipContainer = styled.div`
- font-size: ${({ theme }) => theme.typography.sizes.m}px;
+ font-size: ${({ theme }) => theme.fontSize}px;
display: flex;
`;
const RequiredFieldIndicator = () => (
({
- color: theme.colors.error.base,
- fontSize: `${theme.typography.sizes.s}px`,
+ color: theme.colorError,
+ fontSize: `${theme.fontSizeSM}px`,
paddingLeft: '1px',
})}
>
@@ -211,7 +211,7 @@ const DescriptionToolTip = ({ description }: { description: string }) => (
({
- paddingLeft: `${theme.gridUnit}px`,
+ paddingLeft: `${theme.sizeUnit}px`,
cursor: 'pointer',
})}
/>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
index d959026792a65..f24bbba2b4c7a 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -239,7 +239,7 @@ const FilterControls: FC = ({
() => (
css`
- padding: 0 ${theme.gridUnit * 4}px;
+ padding: 0 ${theme.sizeUnit * 4}px;
min-width: 0;
flex: 1;
`}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
index b902ced112e2e..364ce00d890f2 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
@@ -45,9 +45,9 @@ const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
css={css`
display: flex;
align-items: center;
- height: ${6 * theme.gridUnit}px;
+ height: ${6 * theme.sizeUnit}px;
border-left: 1px solid ${theme.colors.grayscale.light2};
- padding-left: ${4 * theme.gridUnit}px;
+ padding-left: ${4 * theme.sizeUnit}px;
.filter-item-wrapper:first-child & {
border-left: none;
@@ -60,11 +60,11 @@ const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
ref={titleRef}
css={css`
${truncationCSS};
- max-width: ${theme.gridUnit * 32.5}px;
- font-size: ${theme.typography.sizes.m}px;
- font-weight: ${theme.typography.weights.normal};
+ max-width: ${theme.sizeUnit * 32.5}px;
+ font-size: ${theme.fontSize}px;
+ font-weight: ${theme.fontWeightNormal};
margin: 0;
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorText};
`}
>
{title}
@@ -77,7 +77,7 @@ const HorizontalDivider = ({ title, description }: FilterDividerProps) => {
iconSize="l"
iconColor={theme.colors.grayscale.base}
css={css`
- margin: 0 ${theme.gridUnit * 1.5}px;
+ margin: 0 ${theme.sizeUnit * 1.5}px;
vertical-align: unset;
line-height: unset;
`}
@@ -103,8 +103,8 @@ const HorizontalOverflowDivider = ({
{title} : null}>
@@ -113,10 +113,10 @@ const HorizontalOverflowDivider = ({
css={css`
${truncationCSS};
display: block;
- color: ${theme.colors.grayscale.dark1};
- font-weight: ${theme.typography.weights.normal};
- font-size: ${theme.typography.sizes.m}px;
- margin: 0 0 ${theme.gridUnit}px 0;
+ color: ${theme.colorText};
+ font-weight: ${theme.fontWeightNormal};
+ font-size: ${theme.fontSize}px;
+ margin: 0 0 ${theme.sizeUnit}px 0;
`}
>
{title}
@@ -130,9 +130,9 @@ const HorizontalOverflowDivider = ({
css={css`
${truncationCSS};
display: block;
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.base};
- margin: ${theme.gridUnit}px 0 0 0;
+ margin: ${theme.sizeUnit}px 0 0 0;
`}
>
{description}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
index 3fbead5d4723e..36f91fe1eaf0c 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
@@ -48,8 +48,8 @@ export const FiltersDropdownContent = ({
}: FiltersDropdownContentProps) => (
css`
- width: ${theme.gridUnit * 56}px;
- padding: ${theme.gridUnit}px 0;
+ width: ${theme.sizeUnit * 56}px;
+ padding: ${theme.sizeUnit}px 0;
`}
>
{overflowedCrossFilters.map(crossFilter =>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
index 695838ce81585..00387e204d26e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersOutOfScopeCollapsible/index.tsx
@@ -55,26 +55,26 @@ export const FiltersOutOfScopeCollapsible = ({
}
& .ant-collapse-content-box {
- padding: ${theme.gridUnit * 4}px 0 0;
- margin-bottom: ${theme.gridUnit * -4}px;
+ padding: ${theme.sizeUnit * 4}px 0 0;
+ margin-bottom: ${theme.sizeUnit * -4}px;
}
}
`
: css`
&.ant-collapse {
- margin-top: ${hasTopMargin ? theme.gridUnit * 6 : 0}px;
+ margin-top: ${hasTopMargin ? theme.sizeUnit * 6 : 0}px;
& > .ant-collapse-item {
& > .ant-collapse-header {
padding-left: 0;
- padding-bottom: ${theme.gridUnit * 2}px;
+ padding-bottom: ${theme.sizeUnit * 2}px;
& > .ant-collapse-arrow {
- right: ${theme.gridUnit}px;
+ right: ${theme.sizeUnit}px;
}
}
& .ant-collapse-content-box {
- padding: ${theme.gridUnit * 4}px 0 0;
+ padding: ${theme.sizeUnit * 4}px 0 0;
}
}
}
@@ -86,7 +86,7 @@ export const FiltersOutOfScopeCollapsible = ({
header={
css`
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
`}
>
{t('Filters out of scope (%d)', filtersOutOfScope.length)}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
index b82b96767f232..f219f5d67f54e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx
@@ -31,12 +31,12 @@ const TitleArea = styled.div`
flex-direction: row;
justify-content: space-between;
margin: 0;
- padding: 0 ${theme.gridUnit * 2}px ${theme.gridUnit * 2}px;
+ padding: 0 ${theme.sizeUnit * 2}px ${theme.sizeUnit * 2}px;
& > span {
- font-size: ${theme.typography.sizes.l}px;
+ font-size: ${theme.fontSizeLG}px;
flex-grow: 1;
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
}
& > div:first-of-type {
@@ -55,11 +55,11 @@ const HeaderButton = styled(Button)`
const Wrapper = styled.div`
${({ theme }) => `
- padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 2}px ${
- theme.gridUnit
+ padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 2}px ${
+ theme.sizeUnit
}px;
.ant-dropdown-trigger span {
- padding-right: ${theme.gridUnit * 2}px;
+ padding-right: ${theme.sizeUnit * 2}px;
}
`}
`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
index 0e5b82aed2651..00338b8faedf8 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
@@ -39,9 +39,9 @@ import { CrossFilterIndicator } from '../selectors';
const HorizontalBar = styled.div`
${({ theme }) => `
- padding: ${theme.gridUnit * 3}px ${theme.gridUnit * 2}px ${
- theme.gridUnit * 3
- }px ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 2}px ${
+ theme.sizeUnit * 3
+ }px ${theme.sizeUnit * 4}px;
background: ${theme.colors.grayscale.light5};
box-shadow: inset 0px -2px 2px -1px ${theme.colors.grayscale.light2};
`}
@@ -57,7 +57,7 @@ const HorizontalBarContent = styled.div`
line-height: 0;
.loading {
- margin: ${theme.gridUnit * 2}px auto ${theme.gridUnit * 2}px;
+ margin: ${theme.sizeUnit * 2}px auto ${theme.sizeUnit * 2}px;
padding: 0;
}
`}
@@ -65,10 +65,10 @@ const HorizontalBarContent = styled.div`
const FilterBarEmptyStateContainer = styled.div`
${({ theme }) => `
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
color: ${theme.colors.grayscale.base};
- font-size: ${theme.typography.sizes.s}px;
- padding-left: ${theme.gridUnit * 2}px;
+ font-size: ${theme.fontSizeSM}px;
+ padding-left: ${theme.sizeUnit * 2}px;
`}
`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
index d6960ad37027f..4379b27997dff 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
@@ -41,7 +41,7 @@ import FilterControls from './FilterControls/FilterControls';
import CrossFiltersVertical from './CrossFilters/Vertical';
const BarWrapper = styled.div<{ width: number }>`
- width: ${({ theme }) => theme.gridUnit * 8}px;
+ width: ${({ theme }) => theme.sizeUnit * 8}px;
& .ant-tabs-top > .ant-tabs-nav {
margin: 0;
@@ -81,15 +81,15 @@ const CollapsedBar = styled.div<{ offset: number }>`
top: ${offset}px;
left: 0;
height: 100%;
- width: ${theme.gridUnit * 8}px;
- padding-top: ${theme.gridUnit * 2}px;
+ width: ${theme.sizeUnit * 8}px;
+ padding-top: ${theme.sizeUnit * 2}px;
display: none;
text-align: center;
&.open {
display: flex;
flex-direction: column;
align-items: center;
- padding: ${theme.gridUnit * 2}px;
+ padding: ${theme.sizeUnit * 2}px;
}
svg {
cursor: pointer;
@@ -99,8 +99,8 @@ const CollapsedBar = styled.div<{ offset: number }>`
const StyledCollapseIcon = styled(Icons.Collapse)`
${({ theme }) => `
- color: ${theme.colors.primary.base};
- margin-bottom: ${theme.gridUnit * 3}px;
+ color: ${theme.colorPrimary};
+ margin-bottom: ${theme.sizeUnit * 3}px;
`}
`;
@@ -109,13 +109,13 @@ const StyledFilterIcon = styled(Icons.Filter)`
`;
const FilterBarEmptyStateContainer = styled.div`
- margin-top: ${({ theme }) => theme.gridUnit * 8}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 8}px;
`;
const FilterControlsWrapper = styled.div`
- padding: ${({ theme }) => theme.gridUnit * 4}px;
+ padding: ${({ theme }) => theme.sizeUnit * 4}px;
// 108px padding to make room for buttons with position: absolute
- padding-bottom: ${({ theme }) => theme.gridUnit * 27}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit * 27}px;
`;
export const FilterBarScrollContext = createContext(false);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
index 73f14018c4bd6..4819e1139adc8 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/DependenciesRow.tsx
@@ -92,7 +92,7 @@ export const DependenciesRow = memo(({ filter }: FilterCardRowProps) => {
iconSize="m"
iconColor={theme.colors.grayscale.light1}
css={css`
- margin-left: ${theme.gridUnit}px;
+ margin-left: ${theme.sizeUnit}px;
`}
/>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
index 01679b19264a8..b3dc1da028f57 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/NameRow.tsx
@@ -42,14 +42,14 @@ export const NameRow = ({
return (
css`
- margin-bottom: ${theme.gridUnit * 3}px;
+ margin-bottom: ${theme.sizeUnit * 3}px;
justify-content: space-between;
`}
>
css`
- margin-right: ${theme.gridUnit}px;
+ margin-right: ${theme.sizeUnit}px;
`}
/>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
index 695b48d4fa79c..d2e618e0978ca 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
@@ -22,8 +22,8 @@ export const Row = styled.div`
${({ theme }) => css`
display: flex;
align-items: center;
- margin: ${theme.gridUnit}px 0;
- font-size: ${theme.typography.sizes.s}px;
+ margin: ${theme.sizeUnit}px 0;
+ font-size: ${theme.fontSizeSM}px;
&:first-of-type {
margin-top: 0;
@@ -42,7 +42,7 @@ export const Row = styled.div`
export const RowLabel = styled.span`
${({ theme }) => css`
color: ${theme.colors.grayscale.base};
- padding-right: ${theme.gridUnit * 4}px;
+ padding-right: ${theme.sizeUnit * 4}px;
margin-right: auto;
white-space: nowrap;
`};
@@ -50,7 +50,7 @@ export const RowLabel = styled.span`
export const RowValue = styled.div`
${({ theme }) => css`
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorText};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -71,19 +71,19 @@ export const DependencyItem = styled.span`
export const RowTruncationCount = styled.span`
${({ theme }) => css`
- color: ${theme.colors.primary.base};
+ color: ${theme.colorPrimary};
`}
`;
export const TooltipList = styled.ul`
${({ theme }) => css`
- padding-left: ${theme.gridUnit * 3}px;
+ padding-left: ${theme.sizeUnit * 3}px;
margin-bottom: 0;
`};
`;
export const TooltipSectionLabel = styled.span`
- font-weight: ${({ theme }) => theme.typography.weights.bold};
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
`;
export const TooltipTrigger = styled.div`
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
index e1f2cf4edf651..8b8a90f3856dd 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
@@ -30,7 +30,7 @@ interface Props {
}
const Container = styled.div`
${({ theme }) => `
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
`}
`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
index 47713e69cadc9..5e019f258dc9b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DraggableFilter.tsx
@@ -39,7 +39,7 @@ const Container = styled.div`
cursor: ${isDragging ? 'grabbing' : 'pointer'};
width: 100%;
display: flex;
- padding: ${theme.gridUnit}px;
+ padding: ${theme.sizeUnit}px;
`}
`;
@@ -47,10 +47,10 @@ const DragIcon = styled(Icons.Drag, {
shouldForwardProp: propName => propName !== 'isDragging',
})`
${({ isDragging, theme }) => `
- font-size: ${theme.typography.sizes.m}px;
+ font-size: ${theme.fontSize}px;
margin-top: 15px;
cursor: ${isDragging ? 'grabbing' : 'grab'};
- padding-left: ${theme.gridUnit}px;
+ padding-left: ${theme.sizeUnit}px;
`}
`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
index 48c6d0b97f96b..0f009986d9ad2 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterConfigurePane.tsx
@@ -42,7 +42,7 @@ const Container = styled.div`
const ContentHolder = styled.div`
flex-grow: 3;
- margin-left: ${({ theme }) => theme.gridUnit * -1 - 1};
+ margin-left: ${({ theme }) => theme.sizeUnit * -1 - 1};
`;
const TitlesContainer = styled.div`
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
index 495009f0d0f6e..82277441db5b8 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitleContainer.tsx
@@ -27,36 +27,36 @@ export const FilterTitle = styled.div`
${({ theme }) => `
display: flex;
align-items: center;
- padding: ${theme.gridUnit * 2}px;
+ padding: ${theme.sizeUnit * 2}px;
width: 100%;
border-radius: ${theme.borderRadius}px;
cursor: pointer;
&.active {
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorPrimaryActive};
border-radius: ${theme.borderRadius}px;
- background-color: ${theme.colors.secondary.light4};
+ background-color: ${theme.colorPrimaryBg};
span, .anticon {
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorIcon};
}
}
&:hover {
- color: ${theme.colors.primary.light1};
+ color: ${theme.colorPrimaryHover};
span, .anticon {
- color: ${theme.colors.primary.light1};
+ color: ${theme.colorPrimaryHover};
}
}
&.errored div, &.errored .warning {
- color: ${theme.colors.error.base};
+ color: ${theme.colorError};
}
`}
`;
const StyledTrashIcon = styled(Icons.Trash)`
- color: ${({ theme }) => theme.colors.grayscale.light3};
+ color: ${({ theme }) => theme.colorIcon};
`;
const StyledWarning = styled(Icons.Warning)`
- color: ${({ theme }) => theme.colors.error.base};
+ color: ${({ theme }) => theme.colorError};
&.anticon {
margin-left: auto;
}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
index 0a76a5264fc9f..e871bd045e7f1 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -42,7 +42,7 @@ const TabsContainer = styled.div`
height: 100%;
display: flex;
flex-direction: column;
- padding: ${({ theme }) => theme.gridUnit * 3}px;
+ padding: ${({ theme }) => theme.sizeUnit * 3}px;
padding-top: 2px;
`;
@@ -103,7 +103,7 @@ const FilterTitlePane: FC = ({
display: 'flex',
justifyContent: 'space-around',
alignItems: 'flex-start',
- paddingTop: theme.gridUnit * 3,
+ paddingTop: theme.sizeUnit * 3,
}}
>
`
display: flex;
flex-direction: column;
align-items: flex-start;
- min-height: ${({ theme }) => theme.gridUnit * 10}px;
- padding-top: ${({ theme }) => theme.gridUnit * 2 + 2}px;
+ min-height: ${({ theme }) => theme.sizeUnit * 10}px;
+ padding-top: ${({ theme }) => theme.sizeUnit * 2 + 2}px;
.checkbox {
- margin-bottom: ${({ theme, checked }) => (checked ? theme.gridUnit : 0)}px;
+ margin-bottom: ${({ theme, checked }) => (checked ? theme.sizeUnit : 0)}px;
}
& > div {
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
`;
const ChildrenContainer = styled.div`
- margin-left: ${({ theme }) => theme.gridUnit * 6}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 6}px;
`;
const CollapsibleControl = (props: CollapsibleControlProps) => {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
index 3fd8291ea1128..007e58d285cf9 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DependencyList.tsx
@@ -46,9 +46,9 @@ const AddFilter = styled.div`
flex-direction: row;
align-items: center;
cursor: pointer;
- color: ${theme.colors.primary.base};
+ color: ${theme.colorPrimary};
&:hover {
- color: ${theme.colors.primary.dark1};
+ color: ${theme.colorPrimaryText};
}
`}
`;
@@ -56,10 +56,10 @@ const AddFilter = styled.div`
const DeleteFilter = styled(Icons.Trash)`
${({ theme }) => `
cursor: pointer;
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
color: ${theme.colors.grayscale.base};
&:hover {
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorText};
}
`}
`;
@@ -69,7 +69,7 @@ const RowPanel = styled.div`
display: flex;
flex-direction: row;
align-items: center;
- margin-bottom: ${theme.gridUnit}px;
+ margin-bottom: ${theme.sizeUnit}px;
& > div {
width: ${INPUT_WIDTH}px;
@@ -78,9 +78,9 @@ const RowPanel = styled.div`
`;
const Label = styled.div`
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.base};
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
`;
const Row = ({
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
index d175f50bccf88..89457db858e24 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
@@ -37,9 +37,9 @@ const Wrapper = styled.div`
display: flex;
flex-direction: column;
& > * {
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
}
- padding: 0px ${({ theme }) => theme.gridUnit * 4}px;
+ padding: 0px ${({ theme }) => theme.sizeUnit * 4}px;
`;
const CleanFormItem = styled(AntdForm.Item)`
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index ccf763e393127..838cdf4c1613b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -109,7 +109,7 @@ import DependencyList from './DependencyList';
const FORM_ITEM_WIDTH = 260;
const TabPane = styled(Tabs.TabPane)`
- padding: ${({ theme }) => theme.gridUnit * 4}px 0px;
+ padding: ${({ theme }) => theme.sizeUnit * 4}px 0px;
`;
const StyledContainer = styled.div`
@@ -117,7 +117,7 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
- padding: 0px ${theme.gridUnit * 4}px;
+ padding: 0px ${theme.sizeUnit * 4}px;
`}
`;
@@ -126,7 +126,7 @@ const StyledRowContainer = styled.div`
flex-direction: row;
justify-content: space-between;
width: 100%;
- padding: 0px ${({ theme }) => theme.gridUnit * 4}px;
+ padding: 0px ${({ theme }) => theme.sizeUnit * 4}px;
`;
type ControlKey = keyof PluginFilterSelectCustomizeProps;
@@ -141,14 +141,14 @@ const controlsOrder: ControlKey[] = [
export const StyledFormItem = styled(FormItem)<{ expanded: boolean }>`
width: ${({ expanded }) => (expanded ? '49%' : `${FORM_ITEM_WIDTH}px`)};
- margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
& .ant-form-item-label {
padding-bottom: 0;
}
& .ant-form-item-control-input {
- min-height: ${({ theme }) => theme.gridUnit * 10}px;
+ min-height: ${({ theme }) => theme.sizeUnit * 10}px;
}
`;
@@ -166,7 +166,7 @@ export const StyledRowFormItem = styled(FormItem)<{ expanded: boolean }>`
}
& .ant-form-item-control-input {
- min-height: ${({ theme }) => theme.gridUnit * 10}px;
+ min-height: ${({ theme }) => theme.sizeUnit * 10}px;
}
`;
@@ -196,7 +196,7 @@ export const StyledRowSubFormItem = styled(FormItem)<{ expanded: boolean }>`
export const StyledLabel = styled.span`
color: ${({ theme }) => theme.colors.grayscale.base};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
`;
const CleanFormItem = styled(FormItem)`
@@ -210,8 +210,8 @@ const DefaultValueContainer = styled.div`
`;
const RefreshIcon = styled(Icons.Refresh)`
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
- color: ${({ theme }) => theme.colors.primary.base};
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
+ color: ${({ theme }) => theme.colorPrimary};
`;
const StyledCollapse = styled(Collapse)`
@@ -231,7 +231,7 @@ const StyledCollapse = styled(Collapse)`
}
.ant-collapse-content-box {
- padding-top: ${({ theme }) => theme.gridUnit * 2}px;
+ padding-top: ${({ theme }) => theme.sizeUnit * 2}px;
}
&.ant-collapse > .ant-collapse-item {
@@ -258,9 +258,9 @@ const StyledTabs = styled(Tabs)`
`;
const StyledAsterisk = styled.span`
- color: ${({ theme }) => theme.colors.error.base};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
- margin-left: ${({ theme }) => theme.gridUnit - 1}px;
+ color: ${({ theme }) => theme.colorError};
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
+ margin-left: ${({ theme }) => theme.sizeUnit - 1}px;
&:before {
content: '*';
}
@@ -269,13 +269,13 @@ const StyledAsterisk = styled.span`
const FilterTypeInfo = styled.div<{ expanded: boolean }>`
${({ theme, expanded }) => `
width: ${expanded ? '49%' : `${FORM_ITEM_WIDTH}px`};
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.light1};
margin:
- ${-theme.gridUnit * 2}px
+ ${-theme.sizeUnit * 2}px
0px
- ${theme.gridUnit * 4}px
- ${theme.gridUnit * 4}px;
+ ${theme.sizeUnit * 4}px
+ ${theme.sizeUnit * 4}px;
`}
`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
index 0add3cd65f194..8ff111ecbe8c0 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigModal.tsx
@@ -96,7 +96,7 @@ export const StyledModalBody = styled.div<{ expanded: boolean }>`
flex-direction: row;
flex: 1;
.filters-list {
- width: ${({ theme }) => theme.gridUnit * 50}px;
+ width: ${({ theme }) => theme.sizeUnit * 50}px;
overflow: auto;
}
`;
@@ -106,7 +106,7 @@ export const StyledForm = styled(AntdForm)`
`;
export const StyledExpandButtonWrapper = styled.div`
- margin-left: ${({ theme }) => theme.gridUnit * 4}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 4}px;
`;
export const FILTERS_CONFIG_MODAL_TEST_ID = 'filters-config-modal';
diff --git a/superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx b/superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx
index 318516366b1ae..acccab4ad5fe1 100644
--- a/superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx
+++ b/superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx
@@ -88,11 +88,11 @@ const StyledResizable = styled(Resizable)`
left: 0;
width: 100%;
height: 100%;
- box-shadow: inset 0 0 0 2px ${theme.colors.primary.base};
+ box-shadow: inset 0 0 0 2px ${theme.colorPrimary};
}
& > span .resize-handle {
- border-color: ${theme.colors.primary.base};
+ border-color: ${theme.colorPrimary};
}
}
@@ -102,34 +102,34 @@ const StyledResizable = styled(Resizable)`
&--bottom-right {
position: absolute;
- border-right: 1px solid ${theme.colors.text.label};
- border-bottom: 1px solid ${theme.colors.text.label};
- right: ${theme.gridUnit * 4}px;
- bottom: ${theme.gridUnit * 4}px;
- width: ${theme.gridUnit * 2}px;
- height: ${theme.gridUnit * 2}px;
+ border-right: 1px solid ${theme.colorBorder};
+ border-bottom: 1px solid ${theme.colorBorder};
+ right: ${theme.sizeUnit * 4}px;
+ bottom: ${theme.sizeUnit * 4}px;
+ width: ${theme.sizeUnit * 2}px;
+ height: ${theme.sizeUnit * 2}px;
}
&--right {
- width: ${theme.gridUnit / 2}px;
- height: ${theme.gridUnit * 5}px;
- right: ${theme.gridUnit}px;
+ width: ${theme.sizeUnit / 2}px;
+ height: ${theme.sizeUnit * 5}px;
+ right: ${theme.sizeUnit}px;
top: 50%;
transform: translate(0, -50%);
position: absolute;
- border-left: 1px solid ${theme.colors.text.label};
- border-right: 1px solid ${theme.colors.text.label};
+ border-left: 1px solid ${theme.colorBorder};
+ border-right: 1px solid ${theme.colorBorder};
}
&--bottom {
- height: ${theme.gridUnit / 2}px;
- width: ${theme.gridUnit * 5}px;
- bottom: ${theme.gridUnit}px;
+ height: ${theme.sizeUnit / 2}px;
+ width: ${theme.sizeUnit * 5}px;
+ bottom: ${theme.sizeUnit}px;
left: 50%;
transform: translate(-50%);
position: absolute;
- border-top: 1px solid ${theme.colors.text.label};
- border-bottom: 1px solid ${theme.colors.text.label};
+ border-top: 1px solid ${theme.colorBorder};
+ border-bottom: 1px solid ${theme.colorBorder};
}
}
`}
diff --git a/superset-frontend/src/dashboard/styles.ts b/superset-frontend/src/dashboard/styles.ts
index 0aae5aa4ffe09..474118870f40e 100644
--- a/superset-frontend/src/dashboard/styles.ts
+++ b/superset-frontend/src/dashboard/styles.ts
@@ -21,32 +21,32 @@ import { css, SupersetTheme } from '@superset-ui/core';
export const headerStyles = (theme: SupersetTheme) => css`
body {
h1 {
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
line-height: 1.4;
- font-size: ${theme.typography.sizes.xxl}px;
+ font-size: ${theme.fontSizeXXL}px;
letter-spacing: -0.2px;
- margin-top: ${theme.gridUnit * 3}px;
- margin-bottom: ${theme.gridUnit * 3}px;
+ margin-top: ${theme.sizeUnit * 3}px;
+ margin-bottom: ${theme.sizeUnit * 3}px;
}
h2 {
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
line-height: 1.4;
- font-size: ${theme.typography.sizes.xl}px;
- margin-top: ${theme.gridUnit * 3}px;
- margin-bottom: ${theme.gridUnit * 2}px;
+ font-size: ${theme.fontSizeXL}px;
+ margin-top: ${theme.sizeUnit * 3}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
}
h3,
h4,
h5,
h6 {
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
line-height: 1.4;
- font-size: ${theme.typography.sizes.l}px;
+ font-size: ${theme.fontSizeLG}px;
letter-spacing: 0.2px;
- margin-top: ${theme.gridUnit * 2}px;
- margin-bottom: ${theme.gridUnit}px;
+ margin-top: ${theme.sizeUnit * 2}px;
+ margin-bottom: ${theme.sizeUnit}px;
}
}
`;
@@ -54,13 +54,13 @@ export const headerStyles = (theme: SupersetTheme) => css`
// adds enough margin and padding so that the focus outline styles will fit
export const chartHeaderStyles = (theme: SupersetTheme) => css`
.header-title a {
- margin: ${theme.gridUnit / 2}px;
- padding: ${theme.gridUnit / 2}px;
+ margin: ${theme.sizeUnit / 2}px;
+ padding: ${theme.sizeUnit / 2}px;
}
.header-controls {
&,
&:hover {
- margin-top: ${theme.gridUnit}px;
+ margin-top: ${theme.sizeUnit}px;
}
}
`;
@@ -72,11 +72,11 @@ export const filterCardPopoverStyle = (theme: SupersetTheme) => css`
border-radius: 4px;
&.ant-popover-placement-bottom {
- padding-top: ${theme.gridUnit}px;
+ padding-top: ${theme.sizeUnit}px;
}
&.ant-popover-placement-left {
- padding-right: ${theme.gridUnit * 3}px;
+ padding-right: ${theme.sizeUnit * 3}px;
}
.ant-popover-inner {
@@ -84,7 +84,7 @@ export const filterCardPopoverStyle = (theme: SupersetTheme) => css`
}
.ant-popover-inner-content {
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
}
.ant-popover-arrow {
@@ -104,11 +104,11 @@ export const filterCardPopoverStyle = (theme: SupersetTheme) => css`
export const chartContextMenuStyles = (theme: SupersetTheme) => css`
.ant-dropdown-menu.chart-context-menu {
- min-width: ${theme.gridUnit * 43}px;
+ min-width: ${theme.sizeUnit * 43}px;
}
.ant-dropdown-menu-submenu.chart-context-submenu {
- max-width: ${theme.gridUnit * 60}px;
- min-width: ${theme.gridUnit * 40}px;
+ max-width: ${theme.sizeUnit * 60}px;
+ min-width: ${theme.sizeUnit * 40}px;
}
`;
@@ -120,8 +120,8 @@ export const focusStyle = (theme: SupersetTheme) => css`
.superset-button.ant-dropdown-trigger,
.header-controls span {
&:focus-visible {
- box-shadow: 0 0 0 2px ${theme.colors.primary.dark1};
- border-radius: ${theme.gridUnit / 2}px;
+ box-shadow: 0 0 0 2px ${theme.colorPrimaryText};
+ border-radius: ${theme.sizeUnit / 2}px;
outline: none;
text-decoration: none;
}
@@ -134,7 +134,7 @@ export const focusStyle = (theme: SupersetTheme) => css`
.header-controls span
) {
&:focus-visible {
- padding: ${theme.gridUnit / 2}px;
+ padding: ${theme.sizeUnit / 2}px;
}
}
}
diff --git a/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts b/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts
index 3dea0d54ac138..0ab38fabbc5c2 100644
--- a/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts
+++ b/superset-frontend/src/dashboard/util/useFilterFocusHighlightStyles.ts
@@ -33,7 +33,7 @@ const useFilterFocusHighlightStyles = (chartId: number) => {
() => ({
borderColor: theme.colors.primary.light2,
opacity: 1,
- boxShadow: `0px 0px ${theme.gridUnit * 2}px ${theme.colors.primary.base}`,
+ boxShadow: `0px 0px ${theme.sizeUnit * 2}px ${theme.colorPrimary}`,
pointerEvents: 'auto',
}),
[theme],
diff --git a/superset-frontend/src/explore/components/ChartPills.tsx b/superset-frontend/src/explore/components/ChartPills.tsx
index 0eec7aa143ba1..7ba4696698dfe 100644
--- a/superset-frontend/src/explore/components/ChartPills.tsx
+++ b/superset-frontend/src/explore/components/ChartPills.tsx
@@ -58,7 +58,7 @@ export const ChartPills = forwardRef(
css={(theme: SupersetTheme) => css`
display: flex;
justify-content: flex-end;
- padding-bottom: ${theme.gridUnit * 4}px;
+ padding-bottom: ${theme.sizeUnit * 4}px;
& .ant-tag:last-of-type {
margin: 0;
}
diff --git a/superset-frontend/src/explore/components/Control.tsx b/superset-frontend/src/explore/components/Control.tsx
index 40b992796a3f0..98720d1c294f8 100644
--- a/superset-frontend/src/explore/components/Control.tsx
+++ b/superset-frontend/src/explore/components/Control.tsx
@@ -60,7 +60,7 @@ export type ControlComponentProps =
Omit & BaseControlComponentProps;
const StyledControl = styled.div`
- padding-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
`;
export default function Control(props: ControlProps) {
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 4778f80ac36b2..84c0c8eaa4159 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -64,7 +64,7 @@ const ControlHeader: FC = ({
warning,
danger,
}) => {
- const { gridUnit, colors } = useTheme();
+ const theme = useTheme();
const hasHadNoErrors = useRef(false);
const labelColor = useMemo(() => {
if (!validationErrors.length) {
@@ -73,14 +73,14 @@ const ControlHeader: FC = ({
if (hasHadNoErrors.current) {
if (validationErrors.length) {
- return colors.error.base;
+ return theme.colorErrorText;
}
return 'unset';
}
- return colors.warning.base;
- }, [colors.error.base, colors.warning.base, validationErrors.length]);
+ return theme.colorWarningText;
+ }, [theme.colorErrorText, theme.colorWarningText, validationErrors.length]);
if (!label) {
return null;
@@ -97,7 +97,7 @@ const ControlHeader: FC = ({
position: absolute;
top: 50%;
right: 0;
- padding-left: ${gridUnit}px;
+ padding-left: ${theme.sizeUnit}px;
transform: translate(100%, -50%);
white-space: nowrap;
`}
@@ -135,7 +135,7 @@ const ControlHeader: FC = ({
css`
- margin-bottom: ${theme.gridUnit * 0.5}px;
+ margin-bottom: ${theme.sizeUnit * 0.5}px;
position: relative;
`}
>
@@ -152,7 +152,7 @@ const ControlHeader: FC = ({
{' '}
@@ -161,7 +161,10 @@ const ControlHeader: FC = ({
{danger && (
- {' '}
)}
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 27a8f2dd6558e..ab1a49d4435b6 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -114,11 +114,11 @@ const actionButtonsContainerStyles = (theme: SupersetTheme) => css`
bottom: 0;
flex-direction: column;
align-items: center;
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
z-index: 999;
background: linear-gradient(
- ${rgba(theme.colors.grayscale.light5, 0)},
- ${theme.colors.grayscale.light5} ${theme.opacity.mediumLight}
+ ${rgba(theme.colorBgLayout, 0)},
+ ${theme.colorBgLayout} 35%
);
& > button {
@@ -149,11 +149,11 @@ const Styles = styled.div`
max-width: 100%;
}
.type-label {
- margin-right: ${({ theme }) => theme.gridUnit * 3}px;
- width: ${({ theme }) => theme.gridUnit * 7}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * 3}px;
+ width: ${({ theme }) => theme.sizeUnit * 7}px;
display: inline-block;
text-align: center;
- font-weight: ${({ theme }) => theme.typography.weights.bold};
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
}
`;
@@ -171,21 +171,21 @@ const ControlPanelsTabs = styled(Tabs)`
height: 100%;
}
.ant-tabs-content-holder {
- padding-top: ${theme.gridUnit * 4}px;
+ padding-top: ${theme.sizeUnit * 4}px;
}
.ant-collapse-ghost > .ant-collapse-item {
&:not(:last-child) {
- border-bottom: 1px solid ${theme.colors.grayscale.light3};
+ border-bottom: 1px solid ${theme.colorTextTertiary};
}
& > .ant-collapse-header {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
& > .ant-collapse-content > .ant-collapse-content-box {
padding-bottom: 0;
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
}
`}
@@ -268,7 +268,7 @@ function useResetOnChangeRef(initialValue: () => any, resetOnChangeValue: any) {
}
export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
- const { colors } = useTheme();
+ const theme = useTheme();
const pluginContext = useContext(PluginContext);
const prevState = usePrevious(props.exploreState);
@@ -586,16 +586,16 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
}
const errorColor = sectionHasHadNoErrors.current[sectionId]
- ? colors.error.base
- : colors.warning.base;
+ ? theme.colorWarningText
+ : theme.colorErrorText;
const PanelHeader = () => (
css`
- font-size: ${theme.typography.sizes.m}px;
+ font-size: ${theme.fontSize}px;
line-height: 1.3;
- font-weight: ${theme.typography.weights.medium};
+ font-weight: ${theme.fontWeightMedium};
`}
>
{label}
@@ -644,12 +644,12 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
box-shadow: none;
&:last-child {
- padding-bottom: ${theme.gridUnit * 16}px;
+ padding-bottom: ${theme.sizeUnit * 16}px;
border-bottom: 0;
}
.panel-body {
- margin-left: ${theme.gridUnit * 4}px;
+ margin-left: ${theme.sizeUnit * 4}px;
padding-bottom: 0;
}
@@ -746,8 +746,8 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
}
const errorColor = dataTabHasHadNoErrors.current
- ? colors.error.base
- : colors.warning.base;
+ ? theme.colorWarningText
+ : theme.colorErrorText;
return (
<>
@@ -755,7 +755,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
{props.errorMessage && (
css`
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
`}
>
{' '}
@@ -776,8 +776,8 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
);
}, [
- colors.error.base,
- colors.warning.base,
+ theme.colorErrorText,
+ theme.colorWarningText,
dataTabHasHadNoErrors,
props.errorMessage,
]);
diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
index f351ab717c78a..7ad8c6c2c7d83 100644
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -51,15 +51,15 @@ export const CellNull = styled('span')`
`;
export const CopyButton = styled(Button)`
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
// needed to override button's first-of-type margin: 0
&& {
- margin: 0 ${({ theme }) => theme.gridUnit * 2}px;
+ margin: 0 ${({ theme }) => theme.sizeUnit * 2}px;
}
i {
- padding: 0 ${({ theme }) => theme.gridUnit}px;
+ padding: 0 ${({ theme }) => theme.sizeUnit}px;
}
`;
@@ -122,7 +122,7 @@ export const FilterInput = ({
}}
css={css`
width: 200px;
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
`}
ref={inputRef}
/>
@@ -153,13 +153,13 @@ const FormatPickerContainer = styled.div`
display: flex;
flex-direction: column;
- padding: ${({ theme }) => `${theme.gridUnit * 4}px`};
+ padding: ${({ theme }) => `${theme.sizeUnit * 4}px`};
`;
const FormatPickerLabel = styled.span`
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.base};
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const DataTableTemporalHeaderCell = ({
@@ -220,7 +220,7 @@ const DataTableTemporalHeaderCell = ({
e.stopPropagation()}
/>
diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index 640834ba946a6..159976362b687 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
@@ -41,7 +41,7 @@ import { DataTablesPaneProps, ResultTypes } from './types';
const SouthPane = styled.div`
${({ theme }) => `
position: relative;
- background-color: ${theme.colors.grayscale.light5};
+ background-color: ${theme.colorBgContainer};
z-index: 5;
overflow: hidden;
@@ -65,10 +65,10 @@ const SouthPane = styled.div`
.table-condensed {
height: 100%;
overflow: auto;
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
.table {
- margin-bottom: ${theme.gridUnit * 2}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
}
}
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
index 30dfb87c74a88..e0f8ac3c57c57 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
@@ -16,9 +16,9 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { styled, css, GenericDataType } from '@superset-ui/core';
import { useMemo } from 'react';
import { zip } from 'lodash';
-import { css, GenericDataType, styled } from '@superset-ui/core';
import {
CopyToClipboardButton,
FilterInput,
@@ -33,7 +33,7 @@ export const TableControlsWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
- margin-bottom: ${theme.gridUnit * 2}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
span {
flex-shrink: 0;
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
index 4e83fa63a5524..9aeb82c0bd248 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/SamplesPane.tsx
@@ -30,7 +30,7 @@ import { TableControls } from './DataTableControls';
import { SamplesPaneProps } from '../types';
const Error = styled.pre`
- margin-top: ${({ theme }) => `${theme.gridUnit * 4}px`};
+ margin-top: ${({ theme }) => `${theme.sizeUnit * 4}px`};
`;
const cache = new WeakSet();
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
index e96963d10854d..29f201895b622 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/useResultsPane.tsx
@@ -33,7 +33,7 @@ import { SingleQueryResultPane } from './SingleQueryResultPane';
import { TableControls } from './DataTableControls';
const Error = styled.pre`
- margin-top: ${({ theme }) => `${theme.gridUnit * 4}px`};
+ margin-top: ${({ theme }) => `${theme.sizeUnit * 4}px`};
`;
const cache = new WeakMap();
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
index eb3ed8981ad66..746021f2e3c68 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragOption/index.tsx
@@ -35,17 +35,17 @@ const DatasourceItemContainer = styled.div`
align-items: center;
justify-content: space-between;
width: 100%;
- height: ${theme.gridUnit * 6}px;
- padding: 0 ${theme.gridUnit}px;
+ height: ${theme.sizeUnit * 6}px;
+ padding: 0 ${theme.sizeUnit}px;
// hack to make the drag preview image corners rounded
transform: translate(0, 0);
- background-color: inherit;
+ color: ${theme.colorText};
border-radius: 4px;
> div {
min-width: 0;
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
}
`}
`;
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
index 8ef29b99664aa..cabc5f6593dba 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelItem.tsx
@@ -65,7 +65,7 @@ const Button = styled.button`
background: none;
border: none;
text-decoration: underline;
- color: ${({ theme }) => theme.colors.primary.dark1};
+ color: ${({ theme }) => theme.colorPrimaryText};
`;
const ButtonContainer = styled.div`
@@ -77,11 +77,11 @@ const LabelWrapper = styled.div`
${({ theme }) => css`
overflow: hidden;
text-overflow: ellipsis;
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
background-color: ${theme.colors.grayscale.light4};
- margin: ${theme.gridUnit * 2}px 0;
+ margin: ${theme.sizeUnit * 2}px 0;
border-radius: 4px;
- padding: 0 ${theme.gridUnit}px;
+ padding: 0 ${theme.sizeUnit}px;
&:first-of-type {
margin-top: 0;
@@ -106,7 +106,7 @@ const LabelWrapper = styled.div`
.metric-option {
& > svg {
- min-width: ${theme.gridUnit * 4}px;
+ min-width: ${theme.sizeUnit * 4}px;
}
& > .option-label {
overflow: hidden;
@@ -128,7 +128,7 @@ const SectionHeaderButton = styled.button`
const SectionHeader = styled.span`
${({ theme }) => `
- font-size: ${theme.typography.sizes.m}px;
+ font-size: ${theme.fontSize}px;
line-height: 1.3;
`}
`;
@@ -136,9 +136,9 @@ const SectionHeader = styled.span`
const Box = styled.div`
${({ theme }) => `
border: 1px ${theme.colors.grayscale.light4} solid;
- border-radius: ${theme.gridUnit}px;
- font-size: ${theme.typography.sizes.s}px;
- padding: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
+ font-size: ${theme.fontSizeSM}px;
+ padding: ${theme.sizeUnit}px;
color: ${theme.colors.grayscale.light1};
text-overflow: ellipsis;
white-space: nowrap;
@@ -193,7 +193,7 @@ const DatasourcePanelItem: FC = ({ index, style, data }) => {
{index === HEADER_LINE && (
@@ -212,7 +212,7 @@ const DatasourcePanelItem: FC
= ({ index, style, data }) => {
css`
- background-color: ${theme.colors.grayscale.light5};
position: relative;
height: 100%;
display: flex;
@@ -89,23 +88,23 @@ const DatasourceContainer = styled.div`
height: auto;
}
.field-selections {
- padding: 0 0 ${theme.gridUnit}px;
+ padding: 0 0 ${theme.sizeUnit}px;
overflow: auto;
height: 100%;
}
.field-length {
- margin-bottom: ${theme.gridUnit * 2}px;
- font-size: ${theme.typography.sizes.s}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
+ font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.light1};
}
.form-control.input-md {
display: inline-flex;
- width: calc(100% - ${theme.gridUnit * 8}px);
- height: ${theme.gridUnit * 8}px;
- margin: ${theme.gridUnit * 2}px auto;
+ width: calc(100% - ${theme.sizeUnit * 8}px);
+ height: ${theme.sizeUnit * 8}px;
+ margin: ${theme.sizeUnit * 2}px auto;
}
.type-label {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
color: ${theme.colors.grayscale.base};
}
.Control {
@@ -116,7 +115,7 @@ const DatasourceContainer = styled.div`
const StyledInfoboxWrapper = styled.div`
${({ theme }) => css`
- margin: 0 ${theme.gridUnit * 2.5}px;
+ margin: 0 ${theme.sizeUnit * 2.5}px;
span {
text-decoration: underline;
diff --git a/superset-frontend/src/explore/components/EmbedCodeContent.jsx b/superset-frontend/src/explore/components/EmbedCodeContent.jsx
index 19ccfeb54ce26..f67976b312ddd 100644
--- a/superset-frontend/src/explore/components/EmbedCodeContent.jsx
+++ b/superset-frontend/src/explore/components/EmbedCodeContent.jsx
@@ -26,7 +26,7 @@ import { CopyButton } from './DataTableControl';
const CopyButtonEmbedCode = styled(CopyButton)`
&& {
- margin: 0 0 ${({ theme }) => theme.gridUnit}px;
+ margin: 0 0 ${({ theme }) => theme.sizeUnit}px;
}
`;
@@ -106,23 +106,23 @@ const EmbedCodeContent = ({ formData, addDangerToast }) => {
readOnly
css={theme => css`
resize: vertical;
- padding: ${theme.gridUnit * 2}px;
- font-size: ${theme.typography.sizes.s}px;
+ padding: ${theme.sizeUnit * 2}px;
+ font-size: ${theme.fontSizeSM}px;
border-radius: 4px;
- background-color: ${theme.colors.secondary.light5};
+ background-color: ${theme.colorPrimaryBg};
`}
/>
css`
display: flex;
- margin-top: ${theme.gridUnit * 4}px;
+ margin-top: ${theme.sizeUnit * 4}px;
& > div {
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
}
& > div:last-of-type {
margin-right: 0;
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
}
`}
>
diff --git a/superset-frontend/src/explore/components/ExploreAlert.tsx b/superset-frontend/src/explore/components/ExploreAlert.tsx
index 15c7ad3b4be38..1e1b66223cd7d 100644
--- a/superset-frontend/src/explore/components/ExploreAlert.tsx
+++ b/superset-frontend/src/explore/components/ExploreAlert.tsx
@@ -34,18 +34,18 @@ interface ControlPanelAlertProps {
const AlertContainer = styled.div`
${({ theme }) => css`
- margin: ${theme.gridUnit * 4}px;
- padding: ${theme.gridUnit * 4}px;
+ margin: ${theme.sizeUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
- border: 1px solid ${theme.colors.info.base};
- background-color: ${theme.colors.info.light2};
+ border: 1px solid ${theme.colorInfoBorder};
+ background-color: ${theme.colorInfoBg};
border-radius: 2px;
color: ${theme.colors.info.dark2};
- font-size: ${theme.typography.sizes.m}px;
+ font-size: ${theme.fontSize}px;
p {
- margin-bottom: ${theme.gridUnit}px;
+ margin-bottom: ${theme.sizeUnit}px;
}
& a,
@@ -53,21 +53,21 @@ const AlertContainer = styled.div`
color: inherit;
text-decoration: underline;
&:hover {
- color: ${theme.colors.info.dark1};
+ color: ${theme.colorInfoText};
}
}
&.alert-type-warning {
- border-color: ${theme.colors.warning.base};
- background-color: ${theme.colors.warning.light2};
+ border-color: ${theme.colorErrorBorder};
+ background-color: ${theme.colorErrorBg};
p {
- color: ${theme.colors.warning.dark2};
+ color: ${theme.colorErrorText};
}
& a:hover,
& span[role='button']:hover {
- color: ${theme.colors.warning.dark1};
+ color: ${theme.colorErrorText};
}
}
`}
@@ -82,7 +82,7 @@ const ButtonContainer = styled.div`
`;
const Title = styled.p`
- font-weight: ${({ theme }) => theme.typography.weights.bold};
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
`;
const typeChart = {
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index 20a97980dc356..090e85ea65b5b 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -61,9 +61,9 @@ const saveButtonStyles = theme => css`
const additionalItemsStyles = theme => css`
display: flex;
align-items: center;
- margin-left: ${theme.gridUnit}px;
+ margin-left: ${theme.sizeUnit}px;
& > span {
- margin-right: ${theme.gridUnit * 3}px;
+ margin-right: ${theme.sizeUnit * 3}px;
}
`;
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
index 189177019c709..c8fa19e328cb2 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
@@ -95,8 +95,8 @@ const Styles = styled.div`
.gutter {
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- width: ${({ theme }) => theme.gridUnit * 9}px;
- margin: ${({ theme }) => theme.gridUnit * GUTTER_SIZE_FACTOR}px auto;
+ width: ${({ theme }) => theme.sizeUnit * 9}px;
+ margin: ${({ theme }) => theme.sizeUnit * GUTTER_SIZE_FACTOR}px auto;
}
.gutter.gutter-vertical {
@@ -108,7 +108,7 @@ const Styles = styled.div`
.ant-tabs {
height: 100%;
.ant-tabs-nav {
- padding-left: ${({ theme }) => theme.gridUnit * 5}px;
+ padding-left: ${({ theme }) => theme.sizeUnit * 5}px;
margin: 0;
}
.ant-tabs-content-holder {
@@ -140,8 +140,8 @@ const ExploreChartPanel = ({
can_download: canDownload,
}) => {
const theme = useTheme();
- const gutterMargin = theme.gridUnit * GUTTER_SIZE_FACTOR;
- const gutterHeight = theme.gridUnit * GUTTER_SIZE_FACTOR;
+ const gutterMargin = theme.sizeUnit * GUTTER_SIZE_FACTOR;
+ const gutterHeight = theme.sizeUnit * GUTTER_SIZE_FACTOR;
const {
ref: chartPanelRef,
observerRef: resizeObserverRef,
@@ -315,7 +315,7 @@ const ExploreChartPanel = ({
message={t('Chart type requires a dataset')}
type="error"
css={theme => css`
- margin: 0 0 ${theme.gridUnit * 4}px 0;
+ margin: 0 0 ${theme.sizeUnit * 4}px 0;
`}
description={
<>
@@ -359,7 +359,7 @@ const ExploreChartPanel = ({
}
type="warning"
css={theme => css`
- margin: 0 0 ${theme.gridUnit * 4}px 0;
+ margin: 0 0 ${theme.sizeUnit * 4}px 0;
`}
/>
)}
diff --git a/superset-frontend/src/explore/components/ExploreContentPopover.tsx b/superset-frontend/src/explore/components/ExploreContentPopover.tsx
index 93ee96a24e977..110782d6512d9 100644
--- a/superset-frontend/src/explore/components/ExploreContentPopover.tsx
+++ b/superset-frontend/src/explore/components/ExploreContentPopover.tsx
@@ -22,8 +22,8 @@ export const ExplorePopoverContent = styled.div`
.edit-popover-resize {
transform: scaleX(-1);
float: right;
- margin-top: ${({ theme }) => theme.gridUnit * 4}px;
- margin-right: ${({ theme }) => theme.gridUnit * -2}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 4}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * -2}px;
cursor: nwse-resize;
}
.filter-sql-editor {
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
index 229d21aa2c04d..5784194ea03f0 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -97,11 +97,11 @@ const propTypes = {
const ExplorePanelContainer = styled.div`
${({ theme }) => css`
- background: ${theme.colors.grayscale.light5};
text-align: left;
position: relative;
width: 100%;
max-height: 100%;
+ background-color: ${theme.colorBgContainer};
min-height: 0;
display: flex;
flex: 1;
@@ -110,19 +110,18 @@ const ExplorePanelContainer = styled.div`
.explore-column {
display: flex;
flex-direction: column;
- padding: ${theme.gridUnit * 2}px 0;
+ padding: ${theme.sizeUnit * 2}px 0;
max-height: 100%;
}
.data-source-selection {
- background-color: ${theme.colors.grayscale.light5};
- padding: ${theme.gridUnit * 2}px 0;
+ padding: ${theme.sizeUnit * 2}px 0;
border-right: 1px solid ${theme.colors.grayscale.light2};
}
.main-explore-content {
flex: 1;
- min-width: ${theme.gridUnit * 128}px;
+ min-width: ${theme.sizeUnit * 128}px;
border-left: 1px solid ${theme.colors.grayscale.light2};
- padding: 0 ${theme.gridUnit * 4}px;
+ padding: 0 ${theme.sizeUnit * 4}px;
.panel {
margin-bottom: 0;
}
@@ -135,10 +134,10 @@ const ExplorePanelContainer = styled.div`
position: relative;
display: flex;
flex-direction: row;
- padding: 0 ${theme.gridUnit * 2}px 0 ${theme.gridUnit * 4}px;
+ padding: 0 ${theme.sizeUnit * 2}px 0 ${theme.sizeUnit * 4}px;
justify-content: space-between;
.horizontal-text {
- font-size: ${theme.typography.sizes.m}px;
+ font-size: ${theme.fontSize}px;
}
}
.no-show {
@@ -150,12 +149,11 @@ const ExplorePanelContainer = styled.div`
}
.sidebar {
height: 100%;
- background-color: ${theme.colors.grayscale.light4};
- padding: ${theme.gridUnit * 2}px;
- width: ${theme.gridUnit * 8}px;
+ padding: ${theme.sizeUnit * 2}px;
+ width: ${theme.sizeUnit * 8}px;
}
.collapse-icon > svg {
- color: ${theme.colors.primary.base};
+ color: ${theme.colorPrimary};
}
`};
`;
@@ -630,7 +628,7 @@ function ExploreViewContainer(props) {
>
@@ -656,7 +654,7 @@ function ExploreViewContainer(props) {
diff --git a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
index 2490ee7544f30..18576819ddf85 100644
--- a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
+++ b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
@@ -40,8 +40,8 @@ const MenuItemContent = styled.div`
justify-content: space-between;
span[role='img'] {
- font-size: ${({ theme }) => theme.typography.sizes.l}px;
- margin-left: ${({ theme }) => theme.gridUnit * 4}px;
+ font-size: ${({ theme }) => theme.fontSizeLG}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 4}px;
}
`;
diff --git a/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.test.tsx b/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.test.tsx
index 10e1251f04023..ab54f8de0adfb 100644
--- a/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.test.tsx
+++ b/superset-frontend/src/explore/components/RowCountLabel/RowCountLabel.test.tsx
@@ -52,7 +52,6 @@ test('RowCountLabel renders limit with danger and tooltip', async () => {
userEvent.hover(screen.getByText(expectedText));
const tooltip = await screen.findByRole('tooltip');
expect(tooltip).toHaveTextContent('The row limit');
- expect(tooltip).toHaveStyle('background: rgba(0, 0, 0, 0.902);');
});
test('RowCountLabel renders loading', () => {
diff --git a/superset-frontend/src/explore/components/RowCountLabel/index.tsx b/superset-frontend/src/explore/components/RowCountLabel/index.tsx
index 85f28a5be36ac..370b3da46c476 100644
--- a/superset-frontend/src/explore/components/RowCountLabel/index.tsx
+++ b/superset-frontend/src/explore/components/RowCountLabel/index.tsx
@@ -35,7 +35,7 @@ export default function RowCountLabel(props: RowCountLabelProps) {
const { rowcount = 0, limit = null, loading } = props;
const limitReached = limit && rowcount >= limit;
const type =
- limitReached || (rowcount === 0 && !loading) ? 'danger' : 'default';
+ limitReached || (rowcount === 0 && !loading) ? 'error' : 'default';
const formattedRowCount = getNumberFormatter()(rowcount);
const label = (
diff --git a/superset-frontend/src/explore/components/SaveModal.tsx b/superset-frontend/src/explore/components/SaveModal.tsx
index 0a1551429e04b..3357bffd6559f 100644
--- a/superset-frontend/src/explore/components/SaveModal.tsx
+++ b/superset-frontend/src/explore/components/SaveModal.tsx
@@ -78,8 +78,8 @@ export const StyledModal = styled(Modal)`
}
i {
position: absolute;
- top: -${({ theme }) => theme.gridUnit * 5.25}px;
- left: ${({ theme }) => theme.gridUnit * 26.75}px;
+ top: -${({ theme }) => theme.sizeUnit * 5.25}px;
+ left: ${({ theme }) => theme.sizeUnit * 26.75}px;
}
`;
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
index 905fd04f9ceb5..1451fe7f478b8 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx
@@ -901,7 +901,7 @@ class AnnotationLayer extends PureComponent {
return (
<>
{this.props.error && (
-
+
ERROR: {this.props.error}
)}
diff --git a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
index dfa3cbc664410..39c45c4506a1c 100644
--- a/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.tsx
@@ -189,7 +189,7 @@ class AnnotationLayerControl extends PureComponent {
return (
{
);
}
if (!anno.show) {
- return Hidden ;
+ return Hidden ;
}
return '';
}
@@ -244,7 +244,7 @@ class AnnotationLayerControl extends PureComponent {
return (
-
({ borderRadius: theme.gridUnit })}>
+ ({ borderRadius: theme.sizeUnit })}>
{annotations}
theme.gridUnit}px;
+ margin-right: ${({ theme }) => theme.sizeUnit}px;
`;
const MaxInput = styled(InputNumber)`
flex: 1;
- margin-left: ${({ theme }) => theme.gridUnit}px;
+ margin-left: ${({ theme }) => theme.sizeUnit}px;
`;
const parseNumber = (value: undefined | number | string | null) => {
diff --git a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
index b5fd1e3ca553f..485195afeff69 100644
--- a/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
+++ b/superset-frontend/src/explore/components/controls/CheckboxControl.jsx
@@ -36,10 +36,10 @@ const defaultProps = {
const CheckBoxControlWrapper = styled.div`
${({ theme }) => css`
.ControlHeader label {
- color: ${theme.colors.grayscale.dark1};
+ color: ${theme.colorText};
}
span[role='checkbox'] {
- padding-right: ${theme.gridUnit * 2}px;
+ padding-right: ${theme.sizeUnit * 2}px;
}
`}
`;
diff --git a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
index a4867b0f1447b..2d54b3dc00de8 100644
--- a/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/CollectionControl/index.jsx
@@ -109,7 +109,7 @@ class CollectionControl extends Component {
onSortEnd={this.onSortEnd.bind(this)}
bordered
css={theme => ({
- borderRadius: theme.gridUnit,
+ borderRadius: theme.sizeUnit,
})}
>
{this.props.value.map((o, i) => {
@@ -121,7 +121,7 @@ class CollectionControl extends Component {
css={theme => ({
justifyContent: 'flex-start',
display: '-webkit-flex',
- paddingInline: theme.gridUnit * 3,
+ paddingInline: theme.sizeUnit * 3,
})}
key={this.props.keyAccessor(o)}
index={i}
@@ -130,8 +130,8 @@ class CollectionControl extends Component {
({
flex: 1,
- marginLeft: theme.gridUnit * 2,
- marginRight: theme.gridUnit * 2,
+ marginLeft: theme.sizeUnit * 2,
+ marginRight: theme.sizeUnit * 2,
})}
>
css`
- padding-left: ${theme.gridUnit / 2}px;
+ css={(theme: { sizeUnit: number }) => css`
+ padding-left: ${theme.sizeUnit / 2}px;
:before {
content: '';
display: inline-block;
@@ -100,7 +100,7 @@ export default function ColorSchemeLabel(props: ColorSchemeLabelProps) {
ref={labelNameRef}
css={(theme: SupersetTheme) => css`
min-width: 125px;
- padding-right: ${theme.gridUnit * 2}px;
+ padding-right: ${theme.sizeUnit * 2}px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@@ -115,7 +115,7 @@ export default function ColorSchemeLabel(props: ColorSchemeLabelProps) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
- padding-right: ${theme.gridUnit}px;
+ padding-right: ${theme.sizeUnit}px;
`}
>
{colorsList()}
diff --git a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
index f373775c0b6af..034c8e679051d 100644
--- a/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ColorSchemeControl/index.tsx
@@ -69,7 +69,7 @@ export interface ColorSchemeControlProps {
}
const StyledAlert = styled(Icons.AlertSolid)`
- color: ${({ theme }) => theme.colors.warning.base};
+ color: ${({ theme }) => theme.colorWarningText};
`;
const CUSTOM_LABEL_ALERT = t(
@@ -308,11 +308,11 @@ const ColorSchemeControl = ({
css={css`
width: 100%;
& .ant-select-item.ant-select-item-group {
- padding-left: ${theme.gridUnit}px;
- font-size: ${theme.typography.sizes.m}px;
+ padding-left: ${theme.sizeUnit}px;
+ font-size: ${theme.fontSize}px;
}
& .ant-select-item-option-grouped {
- padding-left: ${theme.gridUnit * 3}px;
+ padding-left: ${theme.sizeUnit * 3}px;
}
`}
aria-label={t('Select color scheme')}
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
index 9caa94c602f1d..06931157934ba 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigControl.tsx
@@ -119,7 +119,7 @@ export default function ColumnConfigControl({
{cols.map(col => (
@@ -137,11 +137,11 @@ export default function ColumnConfigControl
({
role="button"
tabIndex={-1}
css={{
- padding: theme.gridUnit * 2,
+ padding: theme.sizeUnit * 2,
textAlign: 'center',
cursor: 'pointer',
- fontSize: theme.typography.sizes.xs,
- color: theme.colors.text.label,
+ fontSize: theme.fontSizeXS,
+ color: theme.colorTextLabel,
':hover': {
backgroundColor: theme.colors.grayscale.light4,
},
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
index be9dfff25ba7f..61b2f98d442ae 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigItem.tsx
@@ -33,8 +33,8 @@ export default memo(function ColumnConfigItem({
width,
height,
}: ColumnConfigItemProps) {
- const { colors, gridUnit } = useTheme();
- const caretWidth = gridUnit * 6;
+ const { colors, sizeUnit } = useTheme();
+ const caretWidth = sizeUnit * 6;
return (
@@ -128,8 +128,8 @@ export default function ControlForm({
diff --git a/superset-frontend/src/explore/components/controls/ComparisonRangeLabel.tsx b/superset-frontend/src/explore/components/controls/ComparisonRangeLabel.tsx
index 0fe5c222b9633..83e9a99a756db 100644
--- a/superset-frontend/src/explore/components/controls/ComparisonRangeLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/ComparisonRangeLabel.tsx
@@ -181,8 +181,8 @@ export const ComparisonRangeLabel = ({
<>
css`
- font-size: ${theme.typography.sizes.m}px;
- color: ${theme.colors.grayscale.dark1};
+ font-size: ${theme.fontSize}px;
+ color: ${theme.colorText};
`}
key={label}
>
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index baa0fcf6c146b..4d8ad0a68f9fd 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -35,16 +35,16 @@ import {
const FormattersContainer = styled.div`
${({ theme }) => css`
- padding: ${theme.gridUnit}px;
+ padding: ${theme.sizeUnit}px;
border: solid 1px ${theme.colors.grayscale.light2};
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
`}
`;
export const FormatterContainer = styled(OptionControlContainer)`
&,
& > div {
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
:last-child {
margin-bottom: 0;
}
@@ -55,7 +55,7 @@ export const CloseButton = styled.button`
${({ theme }) => css`
color: ${theme.colors.grayscale.light1};
height: 100%;
- width: ${theme.gridUnit * 6}px;
+ width: ${theme.sizeUnit * 6}px;
border: none;
border-right: solid 1px ${theme.colors.grayscale.dark2}0C;
padding: 0;
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
index 8e68bc0209193..083da844573dc 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
@@ -40,12 +40,12 @@ const JustifyEnd = styled.div`
`;
const colorSchemeOptions = (theme: SupersetTheme) => [
- { value: theme.colors.success.light1, label: t('success') },
- { value: theme.colors.warning.light1, label: t('alert') },
- { value: theme.colors.error.light1, label: t('error') },
- { value: theme.colors.success.dark1, label: t('success dark') },
- { value: theme.colors.warning.dark1, label: t('alert dark') },
- { value: theme.colors.error.dark1, label: t('error dark') },
+ { value: theme.colorSuccessBg, label: t('success') },
+ { value: theme.colorErrorBg, label: t('alert') },
+ { value: theme.colorErrorBg, label: t('error') },
+ { value: theme.colorSuccessText, label: t('success dark') },
+ { value: theme.colorErrorText, label: t('alert dark') },
+ { value: theme.colorErrorText, label: t('error dark') },
];
const operatorOptions = [
diff --git a/superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx b/superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx
index b53de37ef3ca8..1064bbb760140 100644
--- a/superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx
+++ b/superset-frontend/src/explore/components/controls/ContourControl/ContourOption.tsx
@@ -34,9 +34,9 @@ const StyledListItem = styled.li`
const ColorPatch = styled.div<{ formattedColor: string }>`
background-color: ${({ formattedColor }) => formattedColor};
- height: ${({ theme }) => theme.gridUnit}px;
- width: ${({ theme }) => theme.gridUnit}px;
- margin: 0 ${({ theme }) => theme.gridUnit}px;
+ height: ${({ theme }) => theme.sizeUnit}px;
+ width: ${({ theme }) => theme.sizeUnit}px;
+ margin: 0 ${({ theme }) => theme.sizeUnit}px;
`;
const ContourOption = ({
diff --git a/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx b/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
index 1d7d1b6047df1..f2b5a9c9675b1 100644
--- a/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
@@ -37,12 +37,12 @@ enum ContourTypes {
}
const ContourActionsContainer = styled.div`
- margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const StyledRow = styled(Row)`
width: 100%;
- gap: ${({ theme }) => theme.gridUnit * 2}px;
+ gap: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const isIsoband = (contour: ContourType) => {
diff --git a/superset-frontend/src/explore/components/controls/ContourControl/index.tsx b/superset-frontend/src/explore/components/controls/ContourControl/index.tsx
index ebd420540d239..2e372b98a4aa8 100644
--- a/superset-frontend/src/explore/components/controls/ContourControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/ContourControl/index.tsx
@@ -47,8 +47,8 @@ const DEFAULT_CONTOURS: ContourType[] = [
const NewContourFormatPlaceholder = styled('div')`
position: relative;
- width: calc(100% - ${({ theme }) => theme.gridUnit}px);
- bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ width: calc(100% - ${({ theme }) => theme.sizeUnit}px);
+ bottom: ${({ theme }) => theme.sizeUnit * 4}px;
left: 0;
`;
diff --git a/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx b/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
index 7186472fef573..5517141261e77 100644
--- a/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
+++ b/superset-frontend/src/explore/components/controls/CurrencyControl/CurrencyControl.tsx
@@ -47,7 +47,7 @@ const CurrencyControlContainer = styled.div`
align-items: center;
& > :first-child {
- margin-right: ${theme.gridUnit * 4}px;
+ margin-right: ${theme.sizeUnit * 4}px;
min-width: 0;
flex: 1;
}
diff --git a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
index 07b99701e41d4..908b0c82ca1c3 100644
--- a/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
+++ b/superset-frontend/src/explore/components/controls/CustomListItem/index.tsx
@@ -29,12 +29,12 @@ export default function CustomListItem(props: CustomListItemProps) {
const css = {
'&.antd5-list-item': {
':first-of-type': {
- borderTopLeftRadius: theme.gridUnit,
- borderTopRightRadius: theme.gridUnit,
+ borderTopLeftRadius: theme.sizeUnit,
+ borderTopRightRadius: theme.sizeUnit,
},
':last-of-type': {
- borderBottomLeftRadius: theme.gridUnit,
- borderBottomRightRadius: theme.gridUnit,
+ borderBottomLeftRadius: theme.sizeUnit,
+ borderBottomRightRadius: theme.sizeUnit,
},
},
};
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
index 4e5063b1e4a31..8bb5ed0af59e8 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
@@ -76,14 +76,14 @@ const Styles = styled.div`
justify-content: space-between;
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- padding: ${({ theme }) => 4 * theme.gridUnit}px;
- padding-right: ${({ theme }) => 2 * theme.gridUnit}px;
+ padding: ${({ theme }) => 4 * theme.sizeUnit}px;
+ padding-right: ${({ theme }) => 2 * theme.sizeUnit}px;
}
.error-alert {
- margin: ${({ theme }) => 2 * theme.gridUnit}px;
+ margin: ${({ theme }) => 2 * theme.sizeUnit}px;
}
.ant-dropdown-trigger {
- margin-left: ${({ theme }) => 2 * theme.gridUnit}px;
+ margin-left: ${({ theme }) => 2 * theme.sizeUnit}px;
box-shadow: none;
&:active {
box-shadow: none;
@@ -96,17 +96,16 @@ const Styles = styled.div`
}
}
i.angle {
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
}
svg.datasource-modal-trigger {
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
cursor: pointer;
}
.title-select {
flex: 1 1 100%;
display: inline-block;
- background-color: ${({ theme }) => theme.colors.grayscale.light3};
- padding: ${({ theme }) => theme.gridUnit * 2}px;
+ padding: ${({ theme }) => theme.sizeUnit * 2}px;
border-radius: ${({ theme }) => theme.borderRadius}px;
text-align: center;
text-overflow: ellipsis;
@@ -114,14 +113,14 @@ const Styles = styled.div`
overflow: hidden;
}
.datasource-svg {
- margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
+ margin-right: ${({ theme }) => 2 * theme.sizeUnit}px;
flex: none;
}
span[aria-label='dataset-physical'] {
color: ${({ theme }) => theme.colors.grayscale.base};
}
span[aria-label='more-vert'] {
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
}
`;
@@ -404,7 +403,7 @@ class DatasourceControl extends PureComponent {
{renderDatasourceTitle(titleText, tooltip)}
{healthCheckMessage && (
-
)}
{extra?.warning_markdown && (
@@ -440,19 +439,27 @@ class DatasourceControl extends PureComponent {
{isMissingDatasource && !isMissingParams && (
- {t('The dataset linked to this chart may have been deleted.')}
-
- this.handleMenuItemClick({ key: CHANGE_DATASET })
- }
- >
- {t('Swap dataset')}
-
+
+ {t(
+ 'The dataset linked to this chart may have been deleted.',
+ )}
+
+
+
+ this.handleMenuItemClick({ key: CHANGE_DATASET })
+ }
+ >
+ {t('Swap dataset')}
+
+
}
/>
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index a4b0ca3a3ee99..7ab69567eb8dc 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -81,7 +81,7 @@ const ContentStyleWrapper = styled.div`
.control-label {
font-size: 11px;
- font-weight: ${theme.typography.weights.medium};
+ font-weight: ${theme.fontWeightMedium};
color: ${theme.colors.grayscale.light2};
line-height: 16px;
margin: 8px 0;
@@ -95,7 +95,7 @@ const ContentStyleWrapper = styled.div`
.section-title {
font-style: normal;
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
font-size: 15px;
line-height: 24px;
margin-bottom: 8px;
@@ -117,14 +117,14 @@ const ContentStyleWrapper = styled.div`
const IconWrapper = styled.span`
span {
- margin-right: ${({ theme }) => 2 * theme.gridUnit}px;
+ margin-right: ${({ theme }) => 2 * theme.sizeUnit}px;
vertical-align: middle;
}
.text {
vertical-align: middle;
}
.error {
- color: ${({ theme }) => theme.colors.error.base};
+ color: ${({ theme }) => theme.colorError};
}
`;
@@ -139,7 +139,7 @@ const getTooltipTitle = (
{range && (
css`
- margin-top: ${theme.gridUnit}px;
+ margin-top: ${theme.sizeUnit}px;
`}
>
{range}
@@ -325,7 +325,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
)}
{!validTimeRange && (
- {evalResponse}
)}
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
index d2c99a822a6f1..2c4ed570371f4 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
@@ -111,25 +111,25 @@ const StyledTooltip = (props: any) => {
`
${({ theme, isActive, isPlaceholder }) => css`
width: 100%;
- height: ${theme.gridUnit * 8}px;
+ height: ${theme.sizeUnit * 8}px;
display: flex;
align-items: center;
flex-wrap: nowrap;
- padding: 0 ${theme.gridUnit * 3}px;
+ padding: 0 ${theme.sizeUnit * 3}px;
background-color: ${theme.colors.grayscale.light5};
@@ -63,9 +63,7 @@ const LabelContainer = styled.div<{
}
.date-label-content {
- color: ${isPlaceholder
- ? theme.colors.grayscale.light1
- : theme.colors.grayscale.dark1};
+ color: ${isPlaceholder ? theme.colors.grayscale.light1 : theme.colorText};
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
@@ -75,7 +73,7 @@ const LabelContainer = styled.div<{
span[role='img'] {
margin-left: auto;
- padding-left: ${theme.gridUnit}px;
+ padding-left: ${theme.sizeUnit}px;
& > span[role='img'] {
line-height: 0;
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
index 6e0a256965bba..31acf69dfaff6 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx
@@ -56,7 +56,7 @@ import useResizeButton from './useResizeButton';
const StyledSelect = styled(Select)`
.metric-option {
& > svg {
- min-width: ${({ theme }) => `${theme.gridUnit * 4}px`};
+ min-width: ${({ theme }) => `${theme.sizeUnit * 4}px`};
}
& > .option-label {
overflow: hidden;
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
index 13a78d25786a7..e661ef8231a87 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx
@@ -24,7 +24,7 @@ import { Tooltip } from 'src/components/Tooltip';
const StyledInput = styled(Input)`
border-radius: ${({ theme }) => theme.borderRadius};
height: 26px;
- padding-left: ${({ theme }) => theme.gridUnit * 2.5}px;
+ padding-left: ${({ theme }) => theme.sizeUnit * 2.5}px;
`;
export const DndColumnSelectPopoverTitle = ({
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
index c6aabbea387a3..454e8626b4060 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/Option.tsx
@@ -29,7 +29,7 @@ import { OptionProps } from 'src/explore/components/controls/DndColumnSelectCont
import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
const StyledInfoTooltipWithTrigger = styled(InfoTooltipWithTrigger)`
- margin: 0 ${({ theme }) => theme.gridUnit}px;
+ margin: 0 ${({ theme }) => theme.sizeUnit}px;
`;
export default function Option({
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
index 01169ff187ec7..15dec640e9e06 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
@@ -55,15 +55,15 @@ const propTypes = {
};
const ResizeIcon = styled.i`
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const FilterPopoverContentContainer = styled.div`
.adhoc-filter-edit-tabs > .nav-tabs {
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
& > li > a {
- padding: ${({ theme }) => theme.gridUnit}px;
+ padding: ${({ theme }) => theme.sizeUnit}px;
}
}
@@ -72,22 +72,22 @@ const FilterPopoverContentContainer = styled.div`
}
.filter-edit-clause-info {
- font-size: ${({ theme }) => theme.typography.sizes.xs}px;
+ font-size: ${({ theme }) => theme.fontSizeXS}px;
}
.filter-edit-clause-section {
display: flex;
flex-direction: row;
- gap: ${({ theme }) => theme.gridUnit * 5}px;
+ gap: ${({ theme }) => theme.sizeUnit * 5}px;
}
.adhoc-filter-simple-column-dropdown {
- margin-top: ${({ theme }) => theme.gridUnit * 5}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 5}px;
}
`;
const FilterActionsContainer = styled.div`
- margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 2}px;
`;
export default class AdhocFilterEditPopover extends Component {
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
index e87fc222d6a50..6635b2d73fb27 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
@@ -55,7 +55,7 @@ import { useDefaultTimeFilter } from '../../DateFilterControl/utils';
import { Clauses, ExpressionTypes } from '../types';
const StyledInput = styled(Input)`
- margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
`;
export const StyledFormItem = styled(FormItem)`
@@ -455,8 +455,8 @@ const AdhocFilterEditPopoverSimpleTabContent: FC = props => {
const subjectComponent = (
({
- marginTop: theme.gridUnit * 4,
- marginBottom: theme.gridUnit * 4,
+ marginTop: theme.sizeUnit * 4,
+ marginBottom: theme.sizeUnit * 4,
})}
data-test="select-element"
options={columns.map(column => ({
@@ -481,7 +481,7 @@ const AdhocFilterEditPopoverSimpleTabContent: FC = props => {
const operatorsAndOperandComponent = (
<>
({ marginBottom: theme.gridUnit * 4 })}
+ css={(theme: SupersetTheme) => ({ marginBottom: theme.sizeUnit * 4 })}
options={(props.operators ?? OPERATORS_OPTIONS)
.filter(op => isOperatorRelevantWrapper(op, subject))
.map((option, index) => ({
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
index b2a94a900e1ed..1580045f86c98 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx
@@ -29,8 +29,8 @@ import { Clauses, ExpressionTypes } from '../types';
const StyledSelect = styled(Select)`
${({ theme }) => `
- width: ${theme.gridUnit * 30}px;
- marginRight: ${theme.gridUnit}px;
+ width: ${theme.sizeUnit * 30}px;
+ marginRight: ${theme.sizeUnit}px;
`}
`;
@@ -115,7 +115,7 @@ export default function AdhocFilterEditPopoverSqlTabContent({
HAVING {t('Filters by metrics')}
+
.ant-collapse-item.ant-collapse-no-arrow
> .ant-collapse-header {
border: 0px;
- padding: 0px 0px ${theme.gridUnit * 2}px 0px;
+ padding: 0px 0px ${theme.sizeUnit * 2}px 0px;
display: inline-block;
}
&.ant-collapse-ghost
@@ -119,7 +119,7 @@ export default class FixedOrMetricControl extends Component {
& .well {
margin-bottom: 0px;
- padding: ${theme.gridUnit * 2}px;
+ padding: ${theme.sizeUnit * 2}px;
}
}
`}
diff --git a/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx b/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx
index 56de1914d482a..1e9e990a0e8b7 100644
--- a/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx
+++ b/superset-frontend/src/explore/components/controls/LayerConfigsControl/FlatLayerTree.tsx
@@ -37,8 +37,8 @@ export const StyledLayerTreeItem = styled(LayerTreeItem)`
border: none;
border-radius: ${theme.borderRadius}px;
background-color: ${theme.colors.grayscale.light3};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.normal};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightNormal};
&:hover {
background-color: ${theme.colors.grayscale.light3};
@@ -63,8 +63,8 @@ export const StyledLayerTreeItem = styled(LayerTreeItem)`
& .layer-tree-item-type {
padding-left: 4px;
- font-size: ${theme.typography.sizes.xs}px;
- font-family: ${theme.typography.families.monospace};
+ font-size: ${theme.fontSizeXS}px;
+ font-family: ${theme.fontFamilyCode};
}
& > button {
diff --git a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx
index 89fa40d3c9091..4a6b4e846d464 100644
--- a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx
+++ b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsControl.tsx
@@ -41,8 +41,8 @@ export const StyledFlatLayerTree = styled(FlatLayerTree)`
margin: 4px;
color: ${theme.colors.grayscale.light1};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.normal};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightNormal};
&:hover {
background-color: ${theme.colors.grayscale.light4};
diff --git a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx
index 3ab51c5c9441b..c70ce6aeeed8f 100644
--- a/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx
+++ b/superset-frontend/src/explore/components/controls/LayerConfigsControl/LayerConfigsPopoverContent.tsx
@@ -57,12 +57,12 @@ export const StyledCloseButton = styled(Button)`
line-height: 1.5715;
border-radius: ${theme.borderRadius}px;
background-color: ${theme.colors.primary.light4};
- color: ${theme.colors.primary.dark1};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.bold};
+ color: ${theme.colorPrimaryText};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightStrong};
text-transform: uppercase;
- min-width: ${theme.gridUnit * 36};
- min-height: ${theme.gridUnit * 8};
+ min-width: ${theme.sizeUnit * 36};
+ min-height: ${theme.sizeUnit * 8};
box-shadow: none;
border-width: 0px;
border-style: none;
@@ -70,10 +70,10 @@ export const StyledCloseButton = styled(Button)`
&:hover {
background-color: ${mix(
0.1,
- theme.colors.primary.base,
+ theme.colorPrimary,
theme.colors.primary.light4,
)};
- color: ${theme.colors.primary.dark1};
+ color: ${theme.colorPrimaryText};
}
`}
`;
@@ -94,8 +94,8 @@ export const StyledControlNumberFormItem = styled(ControlFormItem)`
export const StyledGeoStyler = styled(GeoStylerWrapper)`
${({ theme }) => css`
h2 {
- font-weight: ${theme.typography.weights.normal};
- font-size: ${theme.typography.sizes.xl}px;
+ font-weight: ${theme.fontWeightNormal};
+ font-size: ${theme.fontSizeXL}px;
}
.ant-form-item-control {
flex: unset;
@@ -109,19 +109,19 @@ export const StyledSaveButton = styled(Button)`
margin-left: 4px;
line-height: 1.5715;
border-radius: ${theme.borderRadius}px;
- background-color: ${theme.colors.primary.base};
+ background-color: ${theme.colorPrimary};
color: ${theme.colors.grayscale.light5};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.bold};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightStrong};
text-transform: uppercase;
- min-width: ${theme.gridUnit * 36};
- min-height: ${theme.gridUnit * 8};
+ min-width: ${theme.sizeUnit * 36};
+ min-height: ${theme.sizeUnit * 8};
box-shadow: none;
border-width: 0px;
border-style: none;
border-color: transparent;
&:hover {
- background-color: ${theme.colors.primary.dark1};
+ background-color: ${theme.colorPrimaryText};
}
`}
`;
diff --git a/superset-frontend/src/explore/components/controls/MapViewControl/MapViewControl.tsx b/superset-frontend/src/explore/components/controls/MapViewControl/MapViewControl.tsx
index d31303521b0f3..c716fab80b372 100644
--- a/superset-frontend/src/explore/components/controls/MapViewControl/MapViewControl.tsx
+++ b/superset-frontend/src/explore/components/controls/MapViewControl/MapViewControl.tsx
@@ -33,12 +33,12 @@ export const StyledExtentButton = styled(Button)`
line-height: 1.5715;
border-radius: ${theme.borderRadius}px;
background-color: ${theme.colors.primary.light4};
- color: ${theme.colors.primary.dark1};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.bold};
+ color: ${theme.colorPrimaryText};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightStrong};
text-transform: uppercase;
- min-width: ${theme.gridUnit * 36};
- min-height: ${theme.gridUnit * 8};
+ min-width: ${theme.sizeUnit * 36};
+ min-height: ${theme.sizeUnit * 8};
box-shadow: none;
border-width: 0px;
border-style: none;
@@ -48,10 +48,10 @@ export const StyledExtentButton = styled(Button)`
&:hover {
background-color: ${mix(
0.1,
- theme.colors.primary.base,
+ theme.colorPrimary,
theme.colors.primary.light4,
)};
- color: ${theme.colors.primary.dark1};
+ color: ${theme.colorPrimaryText};
}
`}
`;
diff --git a/superset-frontend/src/explore/components/controls/MapViewControl/MapViewPopoverContent.tsx b/superset-frontend/src/explore/components/controls/MapViewControl/MapViewPopoverContent.tsx
index 5ca8e2ee2f06f..64572177e50c7 100644
--- a/superset-frontend/src/explore/components/controls/MapViewControl/MapViewPopoverContent.tsx
+++ b/superset-frontend/src/explore/components/controls/MapViewControl/MapViewPopoverContent.tsx
@@ -35,12 +35,12 @@ export const StyledCloseButton = styled(Button)`
line-height: 1.5715;
border-radius: ${theme.borderRadius}px;
background-color: ${theme.colors.primary.light4};
- color: ${theme.colors.primary.dark1};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.bold};
+ color: ${theme.colorPrimaryText};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightStrong};
text-transform: uppercase;
- min-width: ${theme.gridUnit * 36};
- min-height: ${theme.gridUnit * 8};
+ min-width: ${theme.sizeUnit * 36};
+ min-height: ${theme.sizeUnit * 8};
box-shadow: none;
border-width: 0px;
border-style: none;
@@ -48,10 +48,10 @@ export const StyledCloseButton = styled(Button)`
&:hover {
background-color: ${mix(
0.1,
- theme.colors.primary.base,
+ theme.colorPrimary,
theme.colors.primary.light4,
)};
- color: ${theme.colors.primary.dark1};
+ color: ${theme.colorPrimaryText};
}
`}
`;
@@ -69,19 +69,19 @@ export const StyledSaveButton = styled(Button)`
margin-left: 4px;
line-height: 1.5715;
border-radius: ${theme.borderRadius}px;
- background-color: ${theme.colors.primary.base};
+ background-color: ${theme.colorPrimary};
color: ${theme.colors.grayscale.light5};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.bold};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightStrong};
text-transform: uppercase;
- min-width: ${theme.gridUnit * 36};
- min-height: ${theme.gridUnit * 8};
+ min-width: ${theme.sizeUnit * 36};
+ min-height: ${theme.sizeUnit * 8};
box-shadow: none;
border-width: 0px;
border-style: none;
border-color: transparent;
&:hover {
- background-color: ${theme.colors.primary.dark1};
+ background-color: ${theme.colorPrimaryText};
}
`}
`;
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
index 188487b33824a..0a667d1cffc3d 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
@@ -75,7 +75,7 @@ const defaultProps = {
const StyledSelect = styled(Select)`
.metric-option {
& > svg {
- min-width: ${({ theme }) => `${theme.gridUnit * 4}px`};
+ min-width: ${({ theme }) => `${theme.sizeUnit * 4}px`};
}
& > .option-label {
overflow: hidden;
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx
index a4b5b6ac2c8fb..b6d66e8042f1c 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.tsx
@@ -37,7 +37,7 @@ const TitleLabel = styled.span`
const StyledInput = styled(Input)`
border-radius: ${({ theme }) => theme.borderRadius};
height: 26px;
- padding-left: ${({ theme }) => theme.gridUnit * 2.5}px;
+ padding-left: ${({ theme }) => theme.sizeUnit * 2.5}px;
`;
export interface AdhocMetricEditPopoverTitleProps {
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 194a9944b63f6..112f5c3c4abc2 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -28,7 +28,7 @@ import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetr
import { StyledMetricOption } from '../../optionRenderers';
export const DragContainer = styled.div`
- margin-bottom: ${({ theme }) => theme.gridUnit}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit}px;
:last-child {
margin-bottom: 0;
}
@@ -40,11 +40,14 @@ export const OptionControlContainer = styled.div<{
display: flex;
align-items: center;
width: 100%;
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
- height: ${({ theme }) => theme.gridUnit * 6}px;
- background-color: ${({ theme }) => theme.colors.grayscale.light3};
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
+ height: ${({ theme }) => theme.sizeUnit * 6}px;
+ background-color: ${({ theme }) => theme.colorBgContainer};
border-radius: 3px;
cursor: ${({ withCaret }) => (withCaret ? 'pointer' : 'default')};
+ :hover {
+ background-color: ${({ theme }) => theme.colorBgLayout};
+ }
`;
export const Label = styled.div`
${({ theme }) => `
@@ -54,14 +57,14 @@ export const Label = styled.div`
text-overflow: ellipsis;
align-items: center;
white-space: nowrap;
- padding-left: ${theme.gridUnit}px;
+ padding-left: ${theme.sizeUnit}px;
svg {
- margin-right: ${theme.gridUnit}px;
+ margin-right: ${theme.sizeUnit}px;
}
.type-label {
- margin-right: ${theme.gridUnit * 2}px;
- margin-left: ${theme.gridUnit}px;
- font-weight: ${theme.typography.weights.normal};
+ margin-right: ${theme.sizeUnit * 2}px;
+ margin-left: ${theme.sizeUnit}px;
+ font-weight: ${theme.fontWeightNormal};
width: auto;
}
.option-label {
@@ -83,13 +86,13 @@ export const CaretContainer = styled.div`
export const CloseContainer = styled.div`
height: 100%;
- width: ${({ theme }) => theme.gridUnit * 6}px;
+ width: ${({ theme }) => theme.sizeUnit * 6}px;
border-right: solid 1px ${({ theme }) => theme.colors.grayscale.dark2}0C;
cursor: pointer;
`;
const StyledInfoTooltipWithTrigger = styled(InfoTooltipWithTrigger)`
- margin: 0 ${({ theme }) => theme.gridUnit}px;
+ margin: 0 ${({ theme }) => theme.sizeUnit}px;
`;
export const HeaderContainer = styled.div`
@@ -99,9 +102,9 @@ export const HeaderContainer = styled.div`
`;
export const LabelsContainer = styled.div`
- padding: ${({ theme }) => theme.gridUnit}px;
- border: solid 1px ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ padding: ${({ theme }) => theme.sizeUnit}px;
+ border: solid 1px ${({ theme }) => theme.colorBorderSecondary};
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
`;
const borderPulse = keyframes`
@@ -127,7 +130,7 @@ export const DndLabelsContainer = styled.div<{
}>`
${({ theme, isLoading, canDrop, isDragging, isOver }) => `
position: relative;
- padding: ${theme.gridUnit}px;
+ padding: ${theme.sizeUnit}px;
border: ${
!isLoading && isDragging
? `dashed 1px ${
@@ -139,20 +142,20 @@ export const DndLabelsContainer = styled.div<{
: theme.colors.grayscale.light2
}`
};
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
&:before,
&:after {
content: ' ';
position: absolute;
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
}
&:before {
display: ${isDragging || isLoading ? 'block' : 'none'};
background-color: ${
- canDrop ? theme.colors.primary.base : theme.colors.error.light1
+ canDrop ? theme.colorPrimary : theme.colors.error.light1
};
- z-index: ${theme.zIndex.aboveDashboardCharts};
- opacity: ${theme.opacity.light};
+ z-index: 10;
+ opacity: 10%;
top: 1px;
right: 1px;
bottom: 1px;
@@ -161,14 +164,14 @@ export const DndLabelsContainer = styled.div<{
&:after {
display: ${isLoading || (canDrop && isOver) ? 'block' : 'none'};
background-color: ${
- isLoading ? theme.colors.grayscale.light3 : theme.colors.primary.base
+ isLoading ? theme.colors.grayscale.light3 : theme.colorPrimary
};
- z-index: ${theme.zIndex.dropdown};
- opacity: ${theme.opacity.mediumLight};
- top: ${-theme.gridUnit}px;
- right: ${-theme.gridUnit}px;
- bottom: ${-theme.gridUnit}px;
- left: ${-theme.gridUnit}px;
+ z-index: 11;
+ opacity: 35%;
+ top: ${-theme.sizeUnit}px;
+ right: ${-theme.sizeUnit}px;
+ bottom: ${-theme.sizeUnit}px;
+ left: ${-theme.sizeUnit}px;
cursor: ${isLoading ? 'wait' : 'auto'};
}
`}
@@ -179,12 +182,12 @@ export const DndLabelsContainer = styled.div<{
css`
animation: ${borderPulse} 2s ease-in infinite;
background: linear-gradient(currentColor 0 0) 0 100%/0% 3px no-repeat;
- background-size: 100% ${theme.gridUnit / 2}px;
+ background-size: 100% ${theme.sizeUnit / 2}px;
top: auto;
- right: ${theme.gridUnit}px;
- left: ${theme.gridUnit}px;
- bottom: -${theme.gridUnit / 2}px;
- height: ${theme.gridUnit / 2}px;
+ right: ${theme.sizeUnit}px;
+ left: ${theme.sizeUnit}px;
+ bottom: -${theme.sizeUnit / 2}px;
+ height: ${theme.sizeUnit / 2}px;
`};
}
`;
@@ -195,12 +198,12 @@ export const AddControlLabel = styled.div<{
display: flex;
align-items: center;
width: 100%;
- height: ${({ theme }) => theme.gridUnit * 6}px;
- padding-left: ${({ theme }) => theme.gridUnit}px;
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ height: ${({ theme }) => theme.sizeUnit * 6}px;
+ padding-left: ${({ theme }) => theme.sizeUnit}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.light1};
border: dashed 1px ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
cursor: ${({ cancelHover }) => (cancelHover ? 'inherit' : 'pointer')};
:hover {
@@ -218,10 +221,10 @@ export const AddIconButton = styled.button`
display: flex;
align-items: center;
justify-content: center;
- height: ${({ theme }) => theme.gridUnit * 4}px;
- width: ${({ theme }) => theme.gridUnit * 4}px;
+ height: ${({ theme }) => theme.sizeUnit * 4}px;
+ width: ${({ theme }) => theme.sizeUnit * 4}px;
padding: 0;
- background-color: ${({ theme }) => theme.colors.primary.dark1};
+ background-color: ${({ theme }) => theme.colorPrimaryText};
border: none;
border-radius: 2px;
diff --git a/superset-frontend/src/explore/components/controls/SelectControl.jsx b/superset-frontend/src/explore/components/controls/SelectControl.jsx
index b50d54c9adc76..284c72c8ed70e 100644
--- a/superset-frontend/src/explore/components/controls/SelectControl.jsx
+++ b/superset-frontend/src/explore/components/controls/SelectControl.jsx
@@ -263,7 +263,7 @@ export default class SelectControl extends PureComponent {
css`
.type-label {
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
}
.Select__multi-value__label > span,
.Select__option > span,
diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
index 7aab125310a6f..c2a2d0232ec76 100644
--- a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
@@ -75,7 +75,7 @@ const colTypeOptions = [
];
const StyledRow = styled(Row)`
- margin-top: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 2}px;
display: flex;
align-items: center;
`;
@@ -86,12 +86,12 @@ const StyledCol = styled(Col)`
`;
const StyledTooltip = styled(InfoTooltipWithTrigger)`
- margin-left: ${({ theme }) => theme.gridUnit}px;
+ margin-left: ${({ theme }) => theme.sizeUnit}px;
color: ${({ theme }) => theme.colors.grayscale.light1};
`;
const ButtonBar = styled.div`
- margin-top: ${({ theme }) => theme.gridUnit * 5}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 5}px;
display: flex;
justify-content: center;
`;
diff --git a/superset-frontend/src/explore/components/controls/ViewQuery.tsx b/superset-frontend/src/explore/components/controls/ViewQuery.tsx
index 29e42c3b883c1..4dc2fab083f60 100644
--- a/superset-frontend/src/explore/components/controls/ViewQuery.tsx
+++ b/superset-frontend/src/explore/components/controls/ViewQuery.tsx
@@ -28,9 +28,11 @@ import sqlSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
import jsonSyntax from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
const CopyButtonViewQuery = styled(CopyButton)`
- && {
- margin: 0 0 ${({ theme }) => theme.gridUnit}px;
- }
+ ${({ theme }) => `
+ && {
+ margin: 0 0 ${theme.sizeUnit}px;
+ }
+ `}
`;
SyntaxHighlighter.registerLanguage('markdown', markdownSyntax);
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx
index dafdfb6a34227..edbe90284b1a4 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx
@@ -29,7 +29,7 @@ import { FEATURED_CHARTS } from './constants';
export const antdIconProps = {
iconSize: 'l' as const,
css: (theme: SupersetTheme) => css`
- padding: ${theme.gridUnit}px;
+ padding: ${theme.sizeUnit}px;
& > * {
line-height: 0;
}
@@ -83,7 +83,7 @@ export const FastVizSwitcher = memo(
css={(theme: SupersetTheme) => css`
display: flex;
justify-content: space-between;
- column-gap: ${theme.gridUnit}px;
+ column-gap: ${theme.sizeUnit}px;
`}
data-test="fast-viz-switcher"
>
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
index 83bb8744ec407..8c6a78b7cb3d8 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
@@ -31,7 +31,7 @@ export const VizTile = ({
const { mountedPluginMetadata } = usePluginContext();
const chartNameRef = useRef
(null);
const theme = useTheme();
- const TILE_TRANSITION_TIME = theme.transitionTiming * 2;
+ const TILE_TRANSITION_TIME = theme.motionDurationSlow;
const [tooltipVisible, setTooltipVisible] = useState(false);
const [isTransitioning, setIsTransitioning] = useState(false);
const [showTooltip, setShowTooltip] = useState(false);
@@ -45,7 +45,7 @@ export const VizTile = ({
setTooltipVisible(false);
setTimeout(() => {
setIsTransitioning(false);
- }, TILE_TRANSITION_TIME * 1000);
+ }, 300);
}, [onTileClick, TILE_TRANSITION_TIME, vizMeta.name]);
// Antd tooltip seems to be bugged - when elements move, the tooltip sometimes
@@ -91,7 +91,7 @@ export const VizTile = ({
display: flex;
align-items: center;
color: ${theme.colors.grayscale.base};
- font-weight: ${theme.typography.weights.bold};
+ font-weight: ${theme.fontWeightStrong};
border-radius: 6px;
white-space: nowrap;
overflow: hidden;
@@ -100,12 +100,12 @@ export const VizTile = ({
${!isActive &&
css`
flex-shrink: 0;
- width: ${theme.gridUnit * 6}px;
+ width: ${theme.sizeUnit * 6}px;
background-color: transparent;
transition: none;
&:hover svg path {
- fill: ${theme.colors.primary.base};
- transition: fill ${theme.transitionTiming}s ease-out;
+ fill: ${theme.colorPrimary};
+ transition: fill ${theme.motionDurationMid} ease-out;
}
`}
@@ -114,11 +114,11 @@ export const VizTile = ({
width: 100%;
background-color: ${theme.colors.grayscale.light4};
transition:
- width ${TILE_TRANSITION_TIME}s ease-out,
- background-color ${TILE_TRANSITION_TIME}s ease-out;
+ width ${TILE_TRANSITION_TIME} ease-out,
+ background-color ${TILE_TRANSITION_TIME} ease-out;
cursor: default;
svg path {
- fill: ${theme.colors.primary.base};
+ fill: ${theme.colorPrimary};
}
`}
`}
@@ -129,7 +129,7 @@ export const VizTile = ({
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
- padding-right: ${theme.gridUnit}px;
+ padding-right: ${theme.sizeUnit}px;
`}
ref={chartNameRef}
>
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index 0c850f89de48c..1b83d85c41c64 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -103,10 +103,10 @@ const VizPickerLayout = styled.div<{ isSelectedVizMetadata: boolean }>`
const SectionTitle = styled.h3`
margin-top: 0;
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
- font-size: ${({ theme }) => theme.typography.sizes.l}px;
- font-weight: ${({ theme }) => theme.typography.weights.bold};
- line-height: ${({ theme }) => theme.gridUnit * 6}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
+ font-size: ${({ theme }) => theme.fontSizeLG}px;
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
+ line-height: ${({ theme }) => theme.sizeUnit * 6}px;
`;
const LeftPane = styled.div`
@@ -118,15 +118,15 @@ const LeftPane = styled.div`
.ant-collapse .ant-collapse-item {
.ant-collapse-header {
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.base};
- padding-left: ${({ theme }) => theme.gridUnit * 2}px;
- padding-bottom: ${({ theme }) => theme.gridUnit}px;
+ padding-left: ${({ theme }) => theme.sizeUnit * 2}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit}px;
}
.ant-collapse-content .ant-collapse-content-box {
display: flex;
flex-direction: column;
- padding: 0 ${({ theme }) => theme.gridUnit * 2}px;
+ padding: 0 ${({ theme }) => theme.sizeUnit * 2}px;
}
}
`;
@@ -139,12 +139,12 @@ const RightPane = styled.div`
const SearchWrapper = styled.div`
${({ theme }) => `
grid-area: search;
- margin-top: ${theme.gridUnit * 3}px;
- margin-bottom: ${theme.gridUnit}px;
- margin-left: ${theme.gridUnit * 3}px;
- margin-right: ${theme.gridUnit * 3}px;
+ margin-top: ${theme.sizeUnit * 3}px;
+ margin-bottom: ${theme.sizeUnit}px;
+ margin-left: ${theme.sizeUnit * 3}px;
+ margin-right: ${theme.sizeUnit * 3}px;
.antd5-input-affix-wrapper {
- padding-left: ${theme.gridUnit * 2}px;
+ padding-left: ${theme.sizeUnit * 2}px;
}
`}
`;
@@ -164,8 +164,8 @@ const SelectorLabel = styled.button`
flex-direction: row;
align-items: center;
cursor: pointer;
- margin: ${theme.gridUnit}px 0;
- padding: 0 ${theme.gridUnit}px;
+ margin: ${theme.sizeUnit}px 0;
+ padding: 0 ${theme.sizeUnit}px;
border-radius: ${theme.borderRadius}px;
line-height: 2em;
text-overflow: ellipsis;
@@ -177,7 +177,7 @@ const SelectorLabel = styled.button`
}
&.selected {
- background-color: ${theme.colors.primary.base};
+ background-color: ${theme.colorPrimary};
color: ${theme.colors.primary.light5};
svg {
@@ -192,7 +192,7 @@ const SelectorLabel = styled.button`
}
& > span[role="img"] {
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
}
.cancel {
@@ -206,14 +206,14 @@ const IconsPane = styled.div`
display: grid;
grid-template-columns: repeat(
auto-fill,
- ${({ theme }) => theme.gridUnit * THUMBNAIL_GRID_UNITS}px
+ ${({ theme }) => theme.sizeUnit * THUMBNAIL_GRID_UNITS}px
);
grid-auto-rows: max-content;
justify-content: space-evenly;
- grid-gap: ${({ theme }) => theme.gridUnit * 2}px;
+ grid-gap: ${({ theme }) => theme.sizeUnit * 2}px;
justify-items: center;
// for some reason this padding doesn't seem to apply at the bottom of the container. Why is a mystery.
- padding: ${({ theme }) => theme.gridUnit * 2}px;
+ padding: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const DetailsPane = (theme: SupersetTheme) => css`
@@ -222,7 +222,7 @@ const DetailsPane = (theme: SupersetTheme) => css`
`;
const DetailsPopulated = (theme: SupersetTheme) => css`
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto 1fr;
@@ -236,15 +236,15 @@ const DetailsPopulated = (theme: SupersetTheme) => css`
// (plus grid layout) enables the description to scroll while the header stays in place.
const TagsWrapper = styled.div`
grid-area: viz-tags;
- width: ${({ theme }) => theme.gridUnit * 120}px;
- padding-right: ${({ theme }) => theme.gridUnit * 14}px;
- padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ width: ${({ theme }) => theme.sizeUnit * 120}px;
+ padding-right: ${({ theme }) => theme.sizeUnit * 14}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const Description = styled.p`
grid-area: description;
overflow: auto;
- padding-right: ${({ theme }) => theme.gridUnit * 14}px;
+ padding-right: ${({ theme }) => theme.sizeUnit * 14}px;
margin: 0;
`;
@@ -254,26 +254,26 @@ const Examples = styled.div`
flex-direction: row;
flex-wrap: nowrap;
overflow: auto;
- gap: ${({ theme }) => theme.gridUnit * 4}px;
+ gap: ${({ theme }) => theme.sizeUnit * 4}px;
img {
height: 100%;
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
}
`;
const thumbnailContainerCss = (theme: SupersetTheme) => css`
cursor: pointer;
- width: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
+ width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
position: relative;
img {
- min-width: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
- min-height: ${theme.gridUnit * THUMBNAIL_GRID_UNITS}px;
+ min-width: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
+ min-height: ${theme.sizeUnit * THUMBNAIL_GRID_UNITS}px;
border: 1px solid ${theme.colors.grayscale.light2};
- border-radius: ${theme.gridUnit}px;
- transition: border-color ${theme.transitionTiming};
+ border-radius: ${theme.sizeUnit}px;
+ transition: border-color ${theme.motionDurationMid};
}
&.selected img {
@@ -285,23 +285,23 @@ const thumbnailContainerCss = (theme: SupersetTheme) => css`
}
.viztype-label {
- margin-top: ${theme.gridUnit * 2}px;
+ margin-top: ${theme.sizeUnit * 2}px;
text-align: center;
}
`;
const HighlightLabel = styled.div`
${({ theme }) => `
- border: 1px solid ${theme.colors.primary.dark1};
+ border: 1px solid ${theme.colorPrimaryText};
box-sizing: border-box;
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
background: ${theme.colors.grayscale.light5};
- line-height: ${theme.gridUnit * 2.5}px;
- color: ${theme.colors.primary.dark1};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.bold};
+ line-height: ${theme.sizeUnit * 2.5}px;
+ color: ${theme.colorPrimaryText};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightStrong};
text-align: center;
- padding: ${theme.gridUnit * 0.5}px ${theme.gridUnit}px;
+ padding: ${theme.sizeUnit * 0.5}px ${theme.sizeUnit}px;
cursor: pointer;
div {
@@ -312,13 +312,13 @@ const HighlightLabel = styled.div`
const ThumbnailLabelWrapper = styled.div`
position: absolute;
- right: ${({ theme }) => theme.gridUnit}px;
- top: ${({ theme }) => theme.gridUnit * 19}px;
+ right: ${({ theme }) => theme.sizeUnit}px;
+ top: ${({ theme }) => theme.sizeUnit * 19}px;
`;
const TitleLabelWrapper = styled.div`
display: inline-block !important;
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
`;
interface ThumbnailProps {
@@ -658,10 +658,10 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
>
+ css={({ sizeUnit }) =>
// adjust style for not being inside a collapse
css`
- margin: ${gridUnit * 2}px;
+ margin: ${sizeUnit * 2}px;
margin-bottom: 0;
`
}
@@ -676,10 +676,10 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
onClick={clickSelector}
/>
+ css={({ sizeUnit }) =>
// adjust style for not being inside a collapse
css`
- margin: ${gridUnit * 2}px;
+ margin: ${sizeUnit * 2}px;
margin-bottom: 0;
`
}
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
index 96754950cee2e..aa7898fe7774c 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx
@@ -52,7 +52,7 @@ function VizSupportValidation({ vizType }: { vizType: string }) {
css`
- margin-top: ${theme.gridUnit}px;
+ margin-top: ${theme.sizeUnit}px;
`}
>
{' '}
@@ -99,7 +99,7 @@ const VizTypeControl = ({
<>
css`
- min-width: ${theme.gridUnit * 72}px;
+ min-width: ${theme.sizeUnit * 72}px;
max-width: fit-content;
`}
>
@@ -110,7 +110,7 @@ const VizTypeControl = ({
css={(theme: SupersetTheme) => css`
display: flex;
justify-content: flex-end;
- margin-top: ${theme.gridUnit * 3}px;
+ margin-top: ${theme.sizeUnit * 3}px;
color: ${theme.colors.grayscale.base};
text-decoration: underline;
`}
diff --git a/superset-frontend/src/explore/components/optionRenderers.tsx b/superset-frontend/src/explore/components/optionRenderers.tsx
index e6bdab289e5ec..1db3850881ed4 100644
--- a/superset-frontend/src/explore/components/optionRenderers.tsx
+++ b/superset-frontend/src/explore/components/optionRenderers.tsx
@@ -38,15 +38,15 @@ const OptionContainer = styled.div`
text-overflow: ellipsis;
white-space: nowrap;
& ~ i {
- margin-left: ${({ theme }) => theme.gridUnit}px;
+ margin-left: ${({ theme }) => theme.sizeUnit}px;
}
}
.type-label {
- margin-right: ${({ theme }) => theme.gridUnit * 3}px;
- width: ${({ theme }) => theme.gridUnit * 7}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * 3}px;
+ width: ${({ theme }) => theme.sizeUnit * 7}px;
display: inline-block;
text-align: center;
- font-weight: ${({ theme }) => theme.typography.weights.bold};
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
}
`;
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
index 8721570d51910..2715ebae208b1 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
@@ -60,7 +60,7 @@ const DashboardsSubMenu = ({
prefix={
}
css={css`
width: ${WIDTH}px;
- margin: ${theme.gridUnit * 2}px ${theme.gridUnit * 3}px;
+ margin: ${theme.sizeUnit * 2}px ${theme.sizeUnit * 3}px;
`}
value={dashboardSearch}
onChange={e => setDashboardSearch(e.currentTarget.value)}
@@ -107,7 +107,7 @@ const DashboardsSubMenu = ({
iconSize="l"
iconColor={theme.colors.grayscale.base}
css={css`
- margin-left: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 2}px;
visibility: ${hoveredItem === dashboard.id
? 'visible'
: 'hidden'};
@@ -120,8 +120,8 @@ const DashboardsSubMenu = ({
{noResultsFound && (
{t('No results found')}
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
index 21cf69cec4174..b2e5b59c55d7d 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
@@ -79,21 +79,21 @@ export const MenuItemWithCheckboxContainer = styled.div`
align-items: center;
& svg {
- width: ${theme.gridUnit * 3}px;
- height: ${theme.gridUnit * 3}px;
+ width: ${theme.sizeUnit * 3}px;
+ height: ${theme.sizeUnit * 3}px;
}
& span[role='checkbox'] {
display: inline-flex;
- margin-right: ${theme.gridUnit}px;
+ margin-right: ${theme.sizeUnit}px;
}
`}
`;
export const MenuTrigger = styled(Button)`
${({ theme }) => css`
- width: ${theme.gridUnit * 8}px;
- height: ${theme.gridUnit * 8}px;
+ width: ${theme.sizeUnit * 8}px;
+ height: ${theme.sizeUnit * 8}px;
padding: 0;
border: 1px solid ${theme.colors.primary.dark2};
@@ -393,7 +393,7 @@ export const useExploreAdditionalActionsMenu = (
addDangerToast={addDangerToast}
/>
}
- maxWidth={`${theme.gridUnit * 100}px`}
+ maxWidth={`${theme.sizeUnit * 100}px`}
destroyOnClose
responsive
/>
@@ -457,7 +457,7 @@ export const useExploreAdditionalActionsMenu = (
latestQueryFormData,
showReportSubMenu,
slice,
- theme.gridUnit,
+ theme.sizeUnit,
],
);
return [menu, isDropdownVisible, setIsDropdownVisible];
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index fb911eaadc29f..c4c377b4af438 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -203,7 +203,7 @@ const StyledModal = styled(Modal)`
}
.control-label {
- margin-top: ${({ theme }) => theme.gridUnit}px;
+ margin-top: ${({ theme }) => theme.sizeUnit}px;
}
.ant-collapse > .ant-collapse-item {
@@ -242,7 +242,7 @@ export const StyledInputContainer = styled.div`
${({ theme }) => css`
flex: 1;
margin-top: 0px;
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
@@ -255,15 +255,15 @@ export const StyledInputContainer = styled.div`
.helper {
display: block;
- color: ${theme.colors.grayscale.base};
- font-size: ${theme.typography.sizes.s}px;
- padding: ${theme.gridUnit}px 0;
+ color: ${theme.colorTextTertiary};
+ font-size: ${theme.fontSizeSM}px;
+ padding: ${theme.sizeUnit}px 0;
text-align: left;
}
.required {
- margin-left: ${theme.gridUnit / 2}px;
- color: ${theme.colors.error.base};
+ margin-left: ${theme.sizeUnit / 2}px;
+ color: ${theme.colorError};
}
.input-container {
@@ -276,11 +276,11 @@ export const StyledInputContainer = styled.div`
label {
display: flex;
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
}
i {
- margin: 0 ${theme.gridUnit}px;
+ margin: 0 ${theme.sizeUnit}px;
}
}
@@ -290,7 +290,7 @@ export const StyledInputContainer = styled.div`
}
input[disabled] {
- color: ${theme.colors.grayscale.base};
+ color: ${theme.colorTextDisabled};
}
textarea {
@@ -300,16 +300,16 @@ export const StyledInputContainer = styled.div`
input::placeholder,
textarea::placeholder {
- color: ${theme.colors.grayscale.light1};
+ color: ${theme.colorTextPlaceholder};
}
textarea,
input[type='text'],
input[type='number'] {
- padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px;
+ padding: ${theme.sizeUnit}px ${theme.sizeUnit * 2}px;
border-style: none;
- border: 1px solid ${theme.colors.grayscale.light2};
- border-radius: ${theme.gridUnit}px;
+ border: 1px solid ${theme.colorBorder};
+ border-radius: ${theme.sizeUnit}px;
&[name='description'] {
flex: 1 1 auto;
@@ -323,25 +323,25 @@ export const StyledInputContainer = styled.div`
`;
const StyledCheckbox = styled(AntdCheckbox)`
- margin-top: ${({ theme }) => theme.gridUnit * 0}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 0}px;
`;
const StyledTooltip = styled(InfoTooltipWithTrigger)`
- margin-left: ${({ theme }) => theme.gridUnit}px;
+ margin-left: ${({ theme }) => theme.sizeUnit}px;
`;
// Notification Method components
const StyledNotificationAddButton = styled.div`
${({ theme }) => css`
- color: ${theme.colors.primary.dark1};
+ color: ${theme.colorPrimaryText};
cursor: pointer;
i {
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
}
&.disabled {
- color: ${theme.colors.grayscale.light1};
+ color: ${theme.colorTextDisabled};
cursor: default;
}
`}
@@ -354,7 +354,7 @@ const StyledNotificationMethodWrapper = styled.div`
`;
const inputSpacer = (theme: SupersetTheme) => css`
- margin-right: ${theme.gridUnit * 3}px;
+ margin-right: ${theme.sizeUnit * 3}px;
`;
type NotificationAddStatus = 'active' | 'disabled' | 'hidden';
diff --git a/superset-frontend/src/features/alerts/buildErrorTooltipMessage.tsx b/superset-frontend/src/features/alerts/buildErrorTooltipMessage.tsx
index 02f8583075bed..eece9fb603c97 100644
--- a/superset-frontend/src/features/alerts/buildErrorTooltipMessage.tsx
+++ b/superset-frontend/src/features/alerts/buildErrorTooltipMessage.tsx
@@ -21,8 +21,8 @@ import { ValidationObject } from './types';
import { TRANSLATIONS } from './AlertReportModal';
const StyledList = styled.ul`
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
- padding-inline-start: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 2}px;
+ padding-inline-start: ${({ theme }) => theme.sizeUnit * 3}px;
`;
export const buildErrorTooltipMessage = (
diff --git a/superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx b/superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx
index 7a6cd995042dc..27b4c625df159 100644
--- a/superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx
+++ b/superset-frontend/src/features/alerts/components/AlertReportCronScheduler.tsx
@@ -104,7 +104,7 @@ export const AlertReportCronScheduler: FC
= ({
= ({
{error && (
{TRANSLATIONS.EMAIL_SUBJECT_ERROR_TEXT}
diff --git a/superset-frontend/src/features/alerts/components/RecipientIcon.tsx b/superset-frontend/src/features/alerts/components/RecipientIcon.tsx
index b7c714fca701b..0a01068a30721 100644
--- a/superset-frontend/src/features/alerts/components/RecipientIcon.tsx
+++ b/superset-frontend/src/features/alerts/components/RecipientIcon.tsx
@@ -24,7 +24,7 @@ import { NotificationMethodOption } from '../types';
const StyledIcon = (theme: SupersetTheme) => css`
color: ${theme.colors.grayscale.light1};
- margin-right: ${theme.gridUnit * 2}px;
+ margin-right: ${theme.sizeUnit * 2}px;
`;
export default function RecipientIcon({ type }: { type: string }) {
diff --git a/superset-frontend/src/features/alerts/components/StyledPanel.tsx b/superset-frontend/src/features/alerts/components/StyledPanel.tsx
index 651055b35a141..be2cca61508f0 100644
--- a/superset-frontend/src/features/alerts/components/StyledPanel.tsx
+++ b/superset-frontend/src/features/alerts/components/StyledPanel.tsx
@@ -28,7 +28,7 @@ const antdPanelStyles = (theme: SupersetTheme) => css`
flex-direction: column;
justify-content: center;
align-items: flex-start;
- padding: 0px ${theme.gridUnit * 4}px;
+ padding: 0px ${theme.sizeUnit * 4}px;
.anticon.anticon-right.ant-collapse-arrow {
padding: 0;
@@ -36,28 +36,28 @@ const antdPanelStyles = (theme: SupersetTheme) => css`
}
.collapse-panel-title {
- font-size: ${theme.gridUnit * 4}px;
- font-weight: ${theme.typography.weights.bold};
+ font-size: ${theme.sizeUnit * 4}px;
+ font-weight: ${theme.fontWeightStrong};
line-height: 130%;
}
.collapse-panel-subtitle {
color: ${theme.colors.grayscale.base};
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.normal};
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightNormal};
line-height: 150%;
margin-bottom: 0;
- padding-top: ${theme.gridUnit}px;
+ padding-top: ${theme.sizeUnit}px;
}
.collapse-panel-asterisk {
color: var(--semantic-error-base, ${theme.colors.warning.dark1});
}
.validation-checkmark {
- width: ${theme.gridUnit * 4}px;
- height: ${theme.gridUnit * 4}px;
- margin-left: ${theme.gridUnit}px;
- color: ${theme.colors.success.base};
+ width: ${theme.sizeUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
+ margin-left: ${theme.sizeUnit}px;
+ color: ${theme.colorSuccess};
}
}
`;
diff --git a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
index ae51762d788ae..41677d409b740 100644
--- a/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
+++ b/superset-frontend/src/features/allEntities/AllEntitiesTable.tsx
@@ -31,7 +31,7 @@ const PAGE_SIZE = 10;
const AllEntitiesTableContainer = styled.div`
text-align: left;
- border-radius: ${({ theme }) => theme.gridUnit * 1}px 0;
+ border-radius: ${({ theme }) => theme.sizeUnit * 1}px 0;
.table {
table-layout: fixed;
}
@@ -40,12 +40,12 @@ const AllEntitiesTableContainer = styled.div`
}
.entity-title {
font-family: Inter;
- font-size: ${({ theme }) => theme.typography.sizes.m}px;
- font-weight: ${({ theme }) => theme.typography.weights.medium};
+ font-size: ${({ theme }) => theme.fontSize}px;
+ font-weight: ${({ theme }) => theme.fontWeightMedium};
line-height: 17px;
letter-spacing: 0px;
text-align: left;
- margin: ${({ theme }) => theme.gridUnit * 4}px 0;
+ margin: ${({ theme }) => theme.sizeUnit * 4}px 0;
}
`;
diff --git a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
index 7bfc7adbfbc46..a3da6e8c62781 100644
--- a/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
+++ b/superset-frontend/src/features/annotationLayers/AnnotationLayerModal.tsx
@@ -38,28 +38,28 @@ interface AnnotationLayerModalProps {
}
const StyledAnnotationLayerTitle = styled.div`
- margin: ${({ theme }) => theme.gridUnit * 2}px auto
- ${({ theme }) => theme.gridUnit * 4}px auto;
+ margin: ${({ theme }) => theme.sizeUnit * 2}px auto
+ ${({ theme }) => theme.sizeUnit * 4}px auto;
`;
const LayerContainer = styled.div`
- margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 10}px;
.control-label {
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
.required {
- margin-left: ${({ theme }) => theme.gridUnit / 2}px;
- color: ${({ theme }) => theme.colors.error.base};
+ margin-left: ${({ theme }) => theme.sizeUnit / 2}px;
+ color: ${({ theme }) => theme.colorError};
}
textarea,
input[type='text'] {
- padding: ${({ theme }) => theme.gridUnit * 1.5}px
- ${({ theme }) => theme.gridUnit * 2}px;
+ padding: ${({ theme }) => theme.sizeUnit * 1.5}px
+ ${({ theme }) => theme.sizeUnit * 2}px;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
width: 50%;
}
diff --git a/superset-frontend/src/features/annotations/AnnotationModal.tsx b/superset-frontend/src/features/annotations/AnnotationModal.tsx
index e4c4488986f2c..a1ec59c6b9681 100644
--- a/superset-frontend/src/features/annotations/AnnotationModal.tsx
+++ b/superset-frontend/src/features/annotations/AnnotationModal.tsx
@@ -41,40 +41,40 @@ interface AnnotationModalProps {
}
const StyledAnnotationTitle = styled.div`
- margin: ${({ theme }) => theme.gridUnit * 2}px auto
- ${({ theme }) => theme.gridUnit * 4}px auto;
+ margin: ${({ theme }) => theme.sizeUnit * 2}px auto
+ ${({ theme }) => theme.sizeUnit * 4}px auto;
`;
const StyledJsonEditor = styled(JsonEditor)`
border-radius: ${({ theme }) => theme.borderRadius}px;
- border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
+ border: 1px solid ${({ theme }) => theme.colors.primary.light2};
`;
const AnnotationContainer = styled.div`
- margin-bottom: ${({ theme }) => theme.gridUnit * 5}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 5}px;
.control-label {
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
.required {
- margin-left: ${({ theme }) => theme.gridUnit / 2}px;
- color: ${({ theme }) => theme.colors.error.base};
+ margin-left: ${({ theme }) => theme.sizeUnit / 2}px;
+ color: ${({ theme }) => theme.colorError};
}
textarea {
flex: 1 1 auto;
- height: ${({ theme }) => theme.gridUnit * 17}px;
+ height: ${({ theme }) => theme.sizeUnit * 17}px;
resize: none;
width: 100%;
}
textarea,
input[type='text'] {
- padding: ${({ theme }) => theme.gridUnit * 1.5}px
- ${({ theme }) => theme.gridUnit * 2}px;
+ padding: ${({ theme }) => theme.sizeUnit * 1.5}px
+ ${({ theme }) => theme.sizeUnit * 2}px;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
}
input[type='text'] {
diff --git a/superset-frontend/src/features/charts/ChartCard.tsx b/superset-frontend/src/features/charts/ChartCard.tsx
index 9dd18d1a893db..c5e561fda5c18 100644
--- a/superset-frontend/src/features/charts/ChartCard.tsx
+++ b/superset-frontend/src/features/charts/ChartCard.tsx
@@ -154,9 +154,7 @@ export default function ChartCard({
imgFallbackURL="/static/assets/images/chart-card-fallback.svg"
description={t('Modified %s', chart.changed_on_delta_humanized)}
coverLeft={
}
- coverRight={
-
{chart.datasource_name_text}
- }
+ coverRight={
{chart.datasource_name_text} }
linkComponent={Link}
actions={
theme.gridUnit * 2}px auto
- ${({ theme }) => theme.gridUnit * 4}px auto;
+ margin: ${({ theme }) => theme.sizeUnit * 2}px auto
+ ${({ theme }) => theme.sizeUnit * 4}px auto;
`;
const StyledCssEditor = styled(CssEditor)`
border-radius: ${({ theme }) => theme.borderRadius}px;
- border: 1px solid ${({ theme }) => theme.colors.secondary.light2};
+ border: 1px solid ${({ theme }) => theme.colorPrimaryBorder};
`;
const TemplateContainer = styled.div`
- margin-bottom: ${({ theme }) => theme.gridUnit * 10}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 10}px;
.control-label {
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
.required {
- margin-left: ${({ theme }) => theme.gridUnit / 2}px;
- color: ${({ theme }) => theme.colors.error.base};
+ margin-left: ${({ theme }) => theme.sizeUnit / 2}px;
+ color: ${({ theme }) => theme.colorError};
}
input[type='text'] {
- padding: ${({ theme }) => theme.gridUnit * 1.5}px
- ${({ theme }) => theme.gridUnit * 2}px;
- border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ padding: ${({ theme }) => theme.sizeUnit * 1.5}px
+ ${({ theme }) => theme.sizeUnit * 2}px;
+ border: 1px solid ${({ theme }) => theme.colorBorder};
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
width: 50%;
}
`;
diff --git a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
index e4de2df222301..969901fd2db68 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
@@ -342,7 +342,7 @@ const ExtraOptions = ({
/>
{isAllowRunAsyncDisabled && (
({
- fontSize: theme.typography.sizes.l,
- fontWeight: theme.typography.weights.bold,
+ fontSize: theme.fontSizeLG,
+ fontWeight: theme.fontWeightStrong,
})}
>
{extraExtension?.title}
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
index 549919ffe3cd5..021508dc1fbe8 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
@@ -28,15 +28,15 @@ import { DatabaseObject, FieldPropTypes } from '../types';
import { AuthType } from '.';
const StyledDiv = styled.div`
- padding-top: ${({ theme }) => theme.gridUnit * 2}px;
+ padding-top: ${({ theme }) => theme.sizeUnit * 2}px;
label {
color: ${({ theme }) => theme.colors.grayscale.base};
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
`;
const StyledRow = styled(Row)`
- padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
`;
const StyledFormItem = styled(AntdForm.Item)`
@@ -44,7 +44,7 @@ const StyledFormItem = styled(AntdForm.Item)`
`;
const StyledInputPassword = styled(AntdInput.Password)`
- margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
+ margin: ${({ theme }) => `${theme.sizeUnit}px 0 ${theme.sizeUnit * 2}px`};
`;
const SSHTunnelForm = ({
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
index fdb81145cbf67..3ac48c3d70498 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
@@ -432,7 +432,7 @@ describe('DatabaseModal', () => {
// ---------- Components ----------
// - AntD header
- const closeButton = screen.getByRole('button', { name: 'Close' });
+ const closeButton = screen.getByRole('button', { name: 'close' });
const basicHeader = screen.getByRole('heading', {
name: /connect a database/i,
@@ -1601,12 +1601,12 @@ describe('DatabaseModal', () => {
test('Error displays when it is a string', async () => {
const step2of3text = screen.getByText(/step 2 of 3/i);
const errorTitleMessage = screen.getByText(/Database Creation Error/i);
+ expect(errorTitleMessage).toBeInTheDocument();
const button = screen.getByText('See more');
userEvent.click(button);
const errorMessage = screen.getByText(/Test Error With String/i);
expect(errorMessage).toBeInTheDocument();
expect(step2of3text).toBeInTheDocument();
- expect(errorTitleMessage).toBeInTheDocument();
});
});
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
index 124f4c74a03f8..65923508730d0 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
@@ -127,13 +127,13 @@ const TabsStyled = styled(Tabs)`
const ErrorAlertContainer = styled.div`
${({ theme }) => `
- margin: ${theme.gridUnit * 8}px ${theme.gridUnit * 4}px;
+ margin: ${theme.sizeUnit * 8}px ${theme.sizeUnit * 4}px;
`};
`;
const SSHTunnelContainer = styled.div`
${({ theme }) => `
- padding: 0px ${theme.gridUnit * 4}px;
+ padding: 0px ${theme.sizeUnit * 4}px;
`};
`;
@@ -238,8 +238,8 @@ export type DBReducerActionType =
};
const StyledBtns = styled.div`
- margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
- margin-left: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 3}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 3}px;
`;
export function dbReducer(
@@ -1580,12 +1580,11 @@ const DatabaseModal: FunctionComponent = ({
);
diff --git a/superset-frontend/src/features/databases/DatabaseModal/styles.ts b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
index 537c6bf89c485..4e5ecd7be02f5 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/styles.ts
+++ b/superset-frontend/src/features/databases/DatabaseModal/styles.ts
@@ -33,60 +33,60 @@ export const no_margin_bottom = css`
`;
export const labelMarginBottom = (theme: SupersetTheme) => css`
- margin-bottom: ${theme.gridUnit * 2}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
`;
export const marginBottom = (theme: SupersetTheme) => css`
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
`;
export const StyledFormHeader = styled.header`
- padding: ${({ theme }) => theme.gridUnit * 2}px
- ${({ theme }) => theme.gridUnit * 4}px;
- line-height: ${({ theme }) => theme.gridUnit * 6}px;
+ padding: ${({ theme }) => theme.sizeUnit * 2}px
+ ${({ theme }) => theme.sizeUnit * 4}px;
+ line-height: ${({ theme }) => theme.sizeUnit * 6}px;
.helper-top {
padding-bottom: 0;
color: ${({ theme }) => theme.colors.grayscale.base};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
margin: 0;
}
.subheader-text {
- line-height: ${({ theme }) => theme.gridUnit * 4.25}px;
+ line-height: ${({ theme }) => theme.sizeUnit * 4.25}px;
}
.helper-bottom {
padding-top: 0;
color: ${({ theme }) => theme.colors.grayscale.base};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
margin: 0;
}
h4 {
color: ${({ theme }) => theme.colors.grayscale.dark2};
- font-size: ${({ theme }) => theme.typography.sizes.l}px;
+ font-size: ${({ theme }) => theme.fontSizeLG}px;
margin: 0;
padding: 0;
- line-height: ${({ theme }) => theme.gridUnit * 8}px;
+ line-height: ${({ theme }) => theme.sizeUnit * 8}px;
}
.select-db {
- padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
.helper {
margin: 0;
}
h4 {
- margin: 0 0 ${({ theme }) => theme.gridUnit * 4}px;
+ margin: 0 0 ${({ theme }) => theme.sizeUnit * 4}px;
}
}
`;
export const antdCollapseStyles = (theme: SupersetTheme) => css`
.ant-collapse-header {
- padding-top: ${theme.gridUnit * 3.5}px;
- padding-bottom: ${theme.gridUnit * 2.5}px;
+ padding-top: ${theme.sizeUnit * 3.5}px;
+ padding-bottom: ${theme.sizeUnit * 2.5}px;
.anticon.ant-collapse-arrow {
top: calc(50% - ${anticonHeight / 2}px);
@@ -98,7 +98,7 @@ export const antdCollapseStyles = (theme: SupersetTheme) => css`
h4 {
font-size: 16px;
margin-top: 0;
- margin-bottom: ${theme.gridUnit}px;
+ margin-bottom: ${theme.sizeUnit}px;
}
p.helper {
margin-bottom: 0;
@@ -127,28 +127,28 @@ export const antDModalNoPaddingStyles = css`
`;
export const infoTooltip = (theme: SupersetTheme) => css`
- margin-bottom: ${theme.gridUnit * 5}px;
+ margin-bottom: ${theme.sizeUnit * 5}px;
svg {
- margin-bottom: ${theme.gridUnit * 0.25}px;
+ margin-bottom: ${theme.sizeUnit * 0.25}px;
}
`;
export const toggleStyle = (theme: SupersetTheme) => css`
- padding-left: ${theme.gridUnit * 2}px;
+ padding-left: ${theme.sizeUnit * 2}px;
`;
export const formScrollableStyles = (theme: SupersetTheme) => css`
- padding: ${theme.gridUnit * 4}px ${theme.gridUnit * 4}px 0;
+ padding: ${theme.sizeUnit * 4}px ${theme.sizeUnit * 4}px 0;
`;
export const antDModalStyles = (theme: SupersetTheme) => css`
.ant-select-dropdown {
- height: ${theme.gridUnit * 40}px;
+ height: ${theme.sizeUnit * 40}px;
}
.antd5-modal-header {
- padding: ${theme.gridUnit * 4.5}px ${theme.gridUnit * 4}px
- ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4.5}px ${theme.sizeUnit * 4}px
+ ${theme.sizeUnit * 4}px;
}
.antd5-modal-close-x .close {
@@ -156,30 +156,30 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
}
.antd5-modal-body {
- height: ${theme.gridUnit * MODAL_BODY_HEIGHT}px;
+ height: ${theme.sizeUnit * MODAL_BODY_HEIGHT}px;
}
.antd5-modal-footer {
- height: ${theme.gridUnit * 16.25}px;
+ height: ${theme.sizeUnit * 16.25}px;
}
`;
export const antDAlertStyles = (theme: SupersetTheme) => css`
- margin: ${theme.gridUnit * 4}px 0;
+ margin: ${theme.sizeUnit * 4}px 0;
`;
export const StyledAlertMargin = styled.div`
${({ theme }) => css`
- margin: 0 ${theme.gridUnit * 4}px ${theme.gridUnit * 4}px;
+ margin: 0 ${theme.sizeUnit * 4}px ${theme.sizeUnit * 4}px;
`}
`;
export const antDErrorAlertStyles = (theme: SupersetTheme) => css`
- margin: ${theme.gridUnit * 8}px ${theme.gridUnit * 4}px;
+ margin: ${theme.sizeUnit * 8}px ${theme.sizeUnit * 4}px;
`;
export const antdWarningAlertStyles = (theme: SupersetTheme) => css`
- margin: ${theme.gridUnit * 4}px 0;
+ margin: ${theme.sizeUnit * 4}px 0;
.antd5-alert-message {
margin: 0;
@@ -188,15 +188,15 @@ export const antdWarningAlertStyles = (theme: SupersetTheme) => css`
export const formHelperStyles = (theme: SupersetTheme) => css`
.required {
- margin-left: ${theme.gridUnit / 2}px;
- color: ${theme.colors.error.base};
+ margin-left: ${theme.sizeUnit / 2}px;
+ color: ${theme.colorError};
}
.helper {
display: block;
- padding: ${theme.gridUnit}px 0;
+ padding: ${theme.sizeUnit}px 0;
color: ${theme.colors.grayscale.light1};
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
text-align: left;
}
`;
@@ -207,30 +207,30 @@ export const wideButton = (theme: SupersetTheme) => css`
color: ${theme.colors.primary.dark2};
&:hover,
&:focus {
- border: 1px solid ${theme.colors.primary.dark1};
- color: ${theme.colors.primary.dark1};
+ border: 1px solid ${theme.colorPrimaryText};
+ color: ${theme.colorPrimaryText};
}
`;
export const formStyles = (theme: SupersetTheme) => css`
.form-group {
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
&-w-50 {
display: inline-block;
- width: ${`calc(50% - ${theme.gridUnit * 4}px)`};
+ width: ${`calc(50% - ${theme.sizeUnit * 4}px)`};
& + .form-group-w-50 {
- margin-left: ${theme.gridUnit * 8}px;
+ margin-left: ${theme.sizeUnit * 8}px;
}
}
}
.control-label {
- color: ${theme.colors.grayscale.dark1};
- font-size: ${theme.typography.sizes.s}px;
+ color: ${theme.colorText};
+ font-size: ${theme.fontSizeSM}px;
}
.helper {
color: ${theme.colors.grayscale.light1};
- font-size: ${theme.typography.sizes.s}px;
- margin-top: ${theme.gridUnit * 1.5}px;
+ font-size: ${theme.fontSizeSM}px;
+ margin-top: ${theme.sizeUnit * 1.5}px;
}
.ant-tabs-content-holder {
overflow: auto;
@@ -240,30 +240,30 @@ export const formStyles = (theme: SupersetTheme) => css`
export const validatedFormStyles = (theme: SupersetTheme) => css`
label {
- color: ${theme.colors.grayscale.dark1};
- font-size: ${theme.typography.sizes.s}px;
+ color: ${theme.colorText};
+ font-size: ${theme.fontSizeSM}px;
margin-bottom: 0;
}
`;
export const StyledInputContainer = styled.div`
${({ theme }) => css`
- margin-bottom: ${theme.gridUnit * 6}px;
+ margin-bottom: ${theme.sizeUnit * 6}px;
&.mb-0 {
margin-bottom: 0;
}
&.mb-8 {
- margin-bottom: ${theme.gridUnit * 2}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
}
.control-label {
- color: ${theme.colors.grayscale.dark1};
- font-size: ${theme.typography.sizes.s}px;
- margin-bottom: ${theme.gridUnit * 2}px;
+ color: ${theme.colorText};
+ font-size: ${theme.fontSizeSM}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
}
&.extra-container {
- padding-top: ${theme.gridUnit * 2}px;
+ padding-top: ${theme.sizeUnit * 2}px;
}
.input-container {
@@ -272,14 +272,14 @@ export const StyledInputContainer = styled.div`
label {
display: flex;
- margin-left: ${theme.gridUnit * 2}px;
- margin-top: ${theme.gridUnit * 0.75}px;
- font-family: ${theme.typography.families.sansSerif};
- font-size: ${theme.typography.sizes.m}px;
+ margin-left: ${theme.sizeUnit * 2}px;
+ margin-top: ${theme.sizeUnit * 0.75}px;
+ font-family: ${theme.fontFamily};
+ font-size: ${theme.fontSize}px;
}
i {
- margin: 0 ${theme.gridUnit}px;
+ margin: 0 ${theme.sizeUnit}px;
}
}
@@ -301,10 +301,10 @@ export const StyledInputContainer = styled.div`
textarea,
input[type='text'],
input[type='number'] {
- padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 2}px;
+ padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 2}px;
border-style: none;
border: 1px solid ${theme.colors.grayscale.light2};
- border-radius: ${theme.gridUnit}px;
+ border-radius: ${theme.sizeUnit}px;
&[name='name'] {
flex: 0 1 auto;
@@ -315,7 +315,7 @@ export const StyledInputContainer = styled.div`
height: 0;
overflow: hidden;
transition: height 0.25s;
- margin-left: ${theme.gridUnit * 8}px;
+ margin-left: ${theme.sizeUnit * 8}px;
margin-bottom: 0;
padding: 0;
.control-label {
@@ -323,7 +323,7 @@ export const StyledInputContainer = styled.div`
}
&.open {
height: ${CTAS_CVAS_SCHEMA_FORM_HEIGHT}px;
- padding-right: ${theme.gridUnit * 5}px;
+ padding-right: ${theme.sizeUnit * 5}px;
}
}
`}
@@ -332,20 +332,20 @@ export const StyledInputContainer = styled.div`
export const StyledJsonEditor = styled(JsonEditor)`
flex: 1 1 auto;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
`;
export const StyledExpandableForm = styled.div`
- padding-top: ${({ theme }) => theme.gridUnit}px;
+ padding-top: ${({ theme }) => theme.sizeUnit}px;
.input-container {
- padding-top: ${({ theme }) => theme.gridUnit}px;
- padding-bottom: ${({ theme }) => theme.gridUnit}px;
+ padding-top: ${({ theme }) => theme.sizeUnit}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit}px;
}
&.expandable {
height: 0;
overflow: hidden;
transition: height 0.25s;
- margin-left: ${({ theme }) => theme.gridUnit * 7}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 7}px;
&.open {
height: ${EXPOSE_IN_SQLLAB_FORM_HEIGHT}px;
&.ctas-open {
@@ -356,27 +356,24 @@ export const StyledExpandableForm = styled.div`
`;
export const StyledAlignment = styled.div`
- padding: 0 ${({ theme }) => theme.gridUnit * 4}px;
- margin-top: ${({ theme }) => theme.gridUnit * 6}px;
+ padding: 0 ${({ theme }) => theme.sizeUnit * 4}px;
+ margin-top: ${({ theme }) => theme.sizeUnit * 6}px;
`;
export const buttonLinkStyles = (theme: SupersetTheme) => css`
- font-weight: ${theme.typography.weights.normal};
text-transform: initial;
- padding-right: ${theme.gridUnit * 2}px;
+ padding-right: ${theme.sizeUnit * 2}px;
`;
export const importDbButtonLinkStyles = (theme: SupersetTheme) => css`
- font-size: ${theme.gridUnit * 3.5}px;
- font-weight: ${theme.typography.weights.normal};
+ font-size: ${theme.sizeUnit * 3.5}px;
text-transform: initial;
- padding-right: ${theme.gridUnit * 2}px;
+ padding-right: ${theme.sizeUnit * 2}px;
`;
export const alchemyButtonLinkStyles = (theme: SupersetTheme) => css`
- font-weight: ${theme.typography.weights.normal};
text-transform: initial;
- padding: ${theme.gridUnit * 8}px 0 0;
+ padding: ${theme.sizeUnit * 8}px 0 0;
margin-left: 0px;
`;
@@ -388,31 +385,31 @@ export const TabHeader = styled.div`
.helper {
color: ${({ theme }) => theme.colors.grayscale.base};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
margin: 0px;
}
`;
export const CreateHeaderTitle = styled.div`
color: ${({ theme }) => theme.colors.grayscale.dark2};
- font-weight: ${({ theme }) => theme.typography.weights.bold};
- font-size: ${({ theme }) => theme.typography.sizes.m}px;
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
+ font-size: ${({ theme }) => theme.fontSize}px;
`;
export const CreateHeaderSubtitle = styled.div`
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ color: ${({ theme }) => theme.colorText};
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
`;
export const EditHeaderTitle = styled.div`
color: ${({ theme }) => theme.colors.grayscale.light1};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
`;
export const EditHeaderSubtitle = styled.div`
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- font-size: ${({ theme }) => theme.typography.sizes.l}px;
- font-weight: ${({ theme }) => theme.typography.weights.bold};
+ color: ${({ theme }) => theme.colorText};
+ font-size: ${({ theme }) => theme.fontSizeLG}px;
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
`;
export const CredentialInfoForm = styled.div`
@@ -421,9 +418,9 @@ export const CredentialInfoForm = styled.div`
}
.label-select {
- color: ${({ theme }) => theme.colors.grayscale.dark1};
+ color: ${({ theme }) => theme.colorText};
font-size: 11px;
- margin: 0 5px ${({ theme }) => theme.gridUnit * 2}px;
+ margin: 0 5px ${({ theme }) => theme.sizeUnit * 2}px;
}
.label-paste {
@@ -433,7 +430,7 @@ export const CredentialInfoForm = styled.div`
}
.input-container {
- margin: ${({ theme }) => theme.gridUnit * 7}px 0;
+ margin: ${({ theme }) => theme.sizeUnit * 7}px 0;
display: flex;
flex-direction: column;
}
@@ -442,10 +439,10 @@ export const CredentialInfoForm = styled.div`
height: 100px;
width: 100%;
border: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-radius: ${({ theme }) => theme.gridUnit}px;
+ border-radius: ${({ theme }) => theme.sizeUnit}px;
resize: vertical;
- padding: ${({ theme }) => theme.gridUnit * 1.5}px
- ${({ theme }) => theme.gridUnit * 2}px;
+ padding: ${({ theme }) => theme.sizeUnit * 1.5}px
+ ${({ theme }) => theme.sizeUnit * 2}px;
&::placeholder {
color: ${({ theme }) => theme.colors.grayscale.light1};
}
@@ -460,7 +457,7 @@ export const CredentialInfoForm = styled.div`
justify-content: space-between;
}
.input-upload-btn {
- width: ${({ theme }) => theme.gridUnit * 32}px
+ width: ${({ theme }) => theme.sizeUnit * 32}px
}
}`;
@@ -472,20 +469,20 @@ export const SelectDatabaseStyles = styled.div`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
- margin: ${({ theme }) => theme.gridUnit * 4}px;
+ margin: ${({ theme }) => theme.sizeUnit * 4}px;
}
.preferred-item {
width: 32%;
- margin-bottom: ${({ theme }) => theme.gridUnit * 2.5}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2.5}px;
}
.available {
- margin: ${({ theme }) => theme.gridUnit * 4}px;
+ margin: ${({ theme }) => theme.sizeUnit * 4}px;
.available-label {
- font-size: ${({ theme }) => theme.typography.sizes.l}px;
- font-weight: ${({ theme }) => theme.typography.weights.bold};
- margin: ${({ theme }) => theme.gridUnit * 6}px 0;
+ font-size: ${({ theme }) => theme.fontSizeLG}px;
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
+ margin: ${({ theme }) => theme.sizeUnit * 6}px 0;
}
.available-select {
width: 100%;
@@ -493,24 +490,24 @@ export const SelectDatabaseStyles = styled.div`
}
.label-available-select {
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
}
.control-label {
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
- margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ color: ${({ theme }) => theme.colorText};
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2}px;
}
`;
export const StyledFooterButton = styled(Button)`
- width: ${({ theme }) => theme.gridUnit * 40}px;
+ width: ${({ theme }) => theme.sizeUnit * 40}px;
`;
export const StyledStickyHeader = styled.div`
position: sticky;
top: 0;
- z-index: ${({ theme }) => theme.zIndex.max};
+ z-index: ${({ theme }) => theme.zIndexPopupBase};
background: ${({ theme }) => theme.colors.grayscale.light5};
height: auto;
`;
@@ -523,9 +520,9 @@ export const StyledCatalogTable = styled.div`
}
.gsheet-title {
- font-size: ${({ theme }) => theme.typography.sizes.l}px;
- font-weight: ${({ theme }) => theme.typography.weights.bold};
- margin: ${({ theme }) => theme.gridUnit * 10}px 0 16px;
+ font-size: ${({ theme }) => theme.fontSizeLG}px;
+ font-weight: ${({ theme }) => theme.fontWeightStrong};
+ margin: ${({ theme }) => theme.sizeUnit * 10}px 0 16px;
}
.catalog-label {
diff --git a/superset-frontend/src/features/databases/UploadDataModel/styles.ts b/superset-frontend/src/features/databases/UploadDataModel/styles.ts
index f4aedf457177b..da1ced245ca73 100644
--- a/superset-frontend/src/features/databases/UploadDataModel/styles.ts
+++ b/superset-frontend/src/features/databases/UploadDataModel/styles.ts
@@ -26,7 +26,7 @@ export const StyledFormItem = styled(FormItem)`
${({ theme }) => css`
flex: 1;
margin-top: 0;
- margin-bottom: ${theme.gridUnit * 2.5}px;
+ margin-bottom: ${theme.sizeUnit * 2.5}px;
}
`}
`;
@@ -39,20 +39,20 @@ export const StyledSwitchContainer = styled.div`
export const antdCollapseStyles = (theme: SupersetTheme) => css`
.ant-collapse-header {
- padding-top: ${theme.gridUnit * 3.5}px;
- padding-bottom: ${theme.gridUnit * 2.5}px;
+ padding-top: ${theme.sizeUnit * 3.5}px;
+ padding-bottom: ${theme.sizeUnit * 2.5}px;
.anticon.ant-collapse-arrow {
top: calc(50% - ${antIconHeight / 2}px);
}
.helper {
color: ${theme.colors.grayscale.base};
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
}
h4 {
- font-size: ${theme.typography.sizes.l}px;
+ font-size: ${theme.fontSizeLG}px;
margin-top: 0;
- margin-bottom: ${theme.gridUnit}px;
+ margin-bottom: ${theme.sizeUnit}px;
}
p.helper {
margin-bottom: 0;
@@ -71,14 +71,14 @@ export const antDModalNoPaddingStyles = css`
export const formStyles = (theme: SupersetTheme) => css`
.switch-label {
color: ${theme.colors.grayscale.base};
- margin-left: ${theme.gridUnit * 4}px;
+ margin-left: ${theme.sizeUnit * 4}px;
}
`;
export const antDModalStyles = (theme: SupersetTheme) => css`
.antd5-modal-header {
- padding: ${theme.gridUnit * 4.5}px ${theme.gridUnit * 4}px
- ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4.5}px ${theme.sizeUnit * 4}px
+ ${theme.sizeUnit * 4}px;
}
.antd5-modal-close-x .close {
@@ -86,11 +86,11 @@ export const antDModalStyles = (theme: SupersetTheme) => css`
}
.antd5-modal-body {
- height: ${theme.gridUnit * MODAL_BODY_HEIGHT}px;
+ height: ${theme.sizeUnit * MODAL_BODY_HEIGHT}px;
}
.antd5-modal-footer {
- height: ${theme.gridUnit * 16.25}px;
+ height: ${theme.sizeUnit * 16.25}px;
}
.info-solid-small {
diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
index 5eb31aba6a1a6..dce709cf03f8a 100644
--- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -56,39 +56,39 @@ const MARGIN_MULTIPLIER = 3;
const StyledHeader = styled.div`
${({ theme, position }) => `
position: ${position};
- margin: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px
- ${theme.gridUnit * MARGIN_MULTIPLIER}px
- ${theme.gridUnit * MARGIN_MULTIPLIER}px
- ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
- font-size: ${theme.gridUnit * 6}px;
- font-weight: ${theme.typography.weights.medium};
- padding-bottom: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
+ margin: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 1)}px
+ ${theme.sizeUnit * MARGIN_MULTIPLIER}px
+ ${theme.sizeUnit * MARGIN_MULTIPLIER}px
+ ${theme.sizeUnit * (MARGIN_MULTIPLIER + 3)}px;
+ font-size: ${theme.sizeUnit * 6}px;
+ font-weight: ${theme.fontWeightMedium};
+ padding-bottom: ${theme.sizeUnit * MARGIN_MULTIPLIER}px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.anticon:first-of-type {
- margin-right: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
+ margin-right: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 1)}px;
}
.anticon:nth-of-type(2) {
- margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 1)}px;
+ margin-left: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 1)}px;
`}
`;
const StyledTitle = styled.div`
${({ theme }) => `
- margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
- margin-bottom: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
- font-weight: ${theme.typography.weights.bold};
+ margin-left: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 3)}px;
+ margin-bottom: ${theme.sizeUnit * MARGIN_MULTIPLIER}px;
+ font-weight: ${theme.fontWeightStrong};
`}
`;
const LoaderContainer = styled.div`
${({ theme }) => `
- padding: ${theme.gridUnit * 8}px
- ${theme.gridUnit * 6}px;
+ padding: ${theme.sizeUnit * 8}px
+ ${theme.sizeUnit * 6}px;
box-sizing: border-box;
display: flex;
align-items: center;
@@ -114,10 +114,10 @@ const StyledLoader = styled.div`
div {
width: 100%;
- margin-top: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
+ margin-top: ${theme.sizeUnit * MARGIN_MULTIPLIER}px;
text-align: center;
- font-weight: ${theme.typography.weights.normal};
- font-size: ${theme.typography.sizes.l}px;
+ font-weight: ${theme.fontWeightNormal};
+ font-size: ${theme.fontSizeLG}px;
color: ${theme.colors.grayscale.light1};
}
`}
@@ -126,9 +126,9 @@ const StyledLoader = styled.div`
const TableContainerWithBanner = styled.div`
${({ theme }) => `
position: relative;
- margin: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
- margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
- height: calc(100% - ${theme.gridUnit * 60}px);
+ margin: ${theme.sizeUnit * MARGIN_MULTIPLIER}px;
+ margin-left: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 3)}px;
+ height: calc(100% - ${theme.sizeUnit * 60}px);
overflow: auto;
`}
`;
@@ -136,9 +136,9 @@ const TableContainerWithBanner = styled.div`
const TableContainerWithoutBanner = styled.div`
${({ theme }) => `
position: relative;
- margin: ${theme.gridUnit * MARGIN_MULTIPLIER}px;
- margin-left: ${theme.gridUnit * (MARGIN_MULTIPLIER + 3)}px;
- height: calc(100% - ${theme.gridUnit * 30}px);
+ margin: ${theme.sizeUnit * MARGIN_MULTIPLIER}px;
+ margin-left: ${theme.sizeUnit * (MARGIN_MULTIPLIER + 3)}px;
+ height: calc(100% - ${theme.sizeUnit * 30}px);
overflow: auto;
`}
`;
@@ -153,18 +153,18 @@ const TableScrollContainer = styled.div`
const StyledAlert = styled(Alert)`
${({ theme }) => `
- border: 1px solid ${theme.colors.info.base};
- padding: ${theme.gridUnit * 4}px;
- margin: ${theme.gridUnit * 6}px ${theme.gridUnit * 6}px
- ${theme.gridUnit * 8}px;
+ border: 1px solid ${theme.colorInfo};
+ padding: ${theme.sizeUnit * 4}px;
+ margin: ${theme.sizeUnit * 6}px ${theme.sizeUnit * 6}px
+ ${theme.sizeUnit * 8}px;
.view-dataset-button {
position: absolute;
- top: ${theme.gridUnit * 4}px;
- right: ${theme.gridUnit * 4}px;
- font-weight: ${theme.typography.weights.normal};
+ top: ${theme.sizeUnit * 4}px;
+ right: ${theme.sizeUnit * 4}px;
+ font-weight: ${theme.fontWeightNormal};
&:hover {
- color: ${theme.colors.secondary.dark3};
+ color: ${theme.colorPrimaryHover};
text-decoration: underline;
}
}
diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx
index 5aab72027222a..069c950121617 100644
--- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/MessageContent.tsx
@@ -22,8 +22,8 @@ import { EmptyState } from 'src/components/EmptyState';
import { Link } from 'react-router-dom';
const StyledContainer = styled.div`
- padding: ${({ theme }) => theme.gridUnit * 8}px
- ${({ theme }) => theme.gridUnit * 6}px;
+ padding: ${({ theme }) => theme.sizeUnit * 8}px
+ ${({ theme }) => theme.sizeUnit * 6}px;
display: flex;
align-items: center;
@@ -35,7 +35,7 @@ const StyledEmptyState = styled(EmptyState)`
max-width: 50%;
p {
- width: ${({ theme }) => theme.gridUnit * 115}px;
+ width: ${({ theme }) => theme.sizeUnit * 115}px;
}
`;
diff --git a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
index 289a67f5aa98f..bfa6d7bb95941 100644
--- a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
@@ -148,7 +148,7 @@ const emptyStateButtonText = (
);
const StyledEmptyState = styled(EmptyState)`
- margin: ${({ theme }) => 13 * theme.gridUnit}px 0;
+ margin: ${({ theme }) => 13 * theme.sizeUnit}px 0;
`;
/**
diff --git a/superset-frontend/src/features/datasets/AddDataset/EditDataset/index.tsx b/superset-frontend/src/features/datasets/AddDataset/EditDataset/index.tsx
index b647c4532ab15..c4b46b5370b85 100644
--- a/superset-frontend/src/features/datasets/AddDataset/EditDataset/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/EditDataset/index.tsx
@@ -24,12 +24,12 @@ import UsageTab from './UsageTab';
const StyledTabs = styled(Tabs)`
${({ theme }) => `
- margin-top: ${theme.gridUnit * 8.5}px;
- padding-left: ${theme.gridUnit * 4}px;
- padding-right: ${theme.gridUnit * 4}px;
+ margin-top: ${theme.sizeUnit * 8.5}px;
+ padding-left: ${theme.sizeUnit * 4}px;
+ padding-right: ${theme.sizeUnit * 4}px;
.ant-tabs-top > .ant-tabs-nav::before {
- width: ${theme.gridUnit * 50}px;
+ width: ${theme.sizeUnit * 50}px;
}
`}
`;
@@ -37,8 +37,8 @@ const StyledTabs = styled(Tabs)`
const TabStyles = styled.div`
${({ theme }) => `
.ant-badge {
- width: ${theme.gridUnit * 8}px;
- margin-left: ${theme.gridUnit * 2.5}px;
+ width: ${theme.sizeUnit * 8}px;
+ margin-left: ${theme.sizeUnit * 2.5}px;
}
`}
`;
diff --git a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
index adb52234224b9..9f6f852c0a099 100644
--- a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
@@ -37,39 +37,39 @@ interface LeftPanelProps {
const LeftPanelStyle = styled.div`
${({ theme }) => `
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
height: 100%;
background-color: ${theme.colors.grayscale.light5};
position: relative;
.emptystate {
height: auto;
- margin-top: ${theme.gridUnit * 17.5}px;
+ margin-top: ${theme.sizeUnit * 17.5}px;
}
.section-title {
- margin-top: ${theme.gridUnit * 5.5}px;
- margin-bottom: ${theme.gridUnit * 11}px;
- font-weight: ${theme.typography.weights.bold};
+ margin-top: ${theme.sizeUnit * 5.5}px;
+ margin-bottom: ${theme.sizeUnit * 11}px;
+ font-weight: ${theme.fontWeightStrong};
}
.table-title {
- margin-top: ${theme.gridUnit * 11}px;
- margin-bottom: ${theme.gridUnit * 6}px;
- font-weight: ${theme.typography.weights.bold};
+ margin-top: ${theme.sizeUnit * 11}px;
+ margin-bottom: ${theme.sizeUnit * 6}px;
+ font-weight: ${theme.fontWeightStrong};
}
.options-list {
overflow: auto;
position: absolute;
bottom: 0;
- top: ${theme.gridUnit * 92.25}px;
- left: ${theme.gridUnit * 3.25}px;
+ top: ${theme.sizeUnit * 92.25}px;
+ left: ${theme.sizeUnit * 3.25}px;
right: 0;
.no-scrollbar {
- margin-right: ${theme.gridUnit * 4}px;
+ margin-right: ${theme.sizeUnit * 4}px;
}
.options {
cursor: pointer;
- padding: ${theme.gridUnit * 1.75}px;
+ padding: ${theme.sizeUnit * 1.75}px;
border-radius: ${theme.borderRadius}px;
:hover {
background-color: ${theme.colors.grayscale.light4}
@@ -78,9 +78,9 @@ const LeftPanelStyle = styled.div`
.options-highlighted {
cursor: pointer;
- padding: ${theme.gridUnit * 1.75}px;
+ padding: ${theme.sizeUnit * 1.75}px;
border-radius: ${theme.borderRadius}px;
- background-color: ${theme.colors.primary.dark1};
+ background-color: ${theme.colorPrimaryText};
color: ${theme.colors.grayscale.light5};
}
@@ -92,22 +92,22 @@ const LeftPanelStyle = styled.div`
}
form > span[aria-label="refresh"] {
position: absolute;
- top: ${theme.gridUnit * 69}px;
- left: ${theme.gridUnit * 42.75}px;
- font-size: ${theme.gridUnit * 4.25}px;
+ top: ${theme.sizeUnit * 69}px;
+ left: ${theme.sizeUnit * 42.75}px;
+ font-size: ${theme.sizeUnit * 4.25}px;
}
.table-form {
- margin-bottom: ${theme.gridUnit * 8}px;
+ margin-bottom: ${theme.sizeUnit * 8}px;
}
.loading-container {
position: absolute;
- top: ${theme.gridUnit * 89.75}px;
+ top: ${theme.sizeUnit * 89.75}px;
left: 0;
right: 0;
text-align: center;
img {
- width: ${theme.gridUnit * 20}px;
- margin-bottom: ${theme.gridUnit * 2.5}px;
+ width: ${theme.sizeUnit * 20}px;
+ margin-bottom: ${theme.sizeUnit * 2.5}px;
}
p {
color: ${theme.colors.grayscale.light1};
diff --git a/superset-frontend/src/features/datasets/DatasetLayout/index.tsx b/superset-frontend/src/features/datasets/DatasetLayout/index.tsx
index 8f6c8c7d593ac..68f7f1d0c7144 100644
--- a/superset-frontend/src/features/datasets/DatasetLayout/index.tsx
+++ b/superset-frontend/src/features/datasets/DatasetLayout/index.tsx
@@ -58,8 +58,8 @@ export default function DatasetLayout({
{leftPanel && (
{adjustedWidth => (
diff --git a/superset-frontend/src/features/datasets/DatasetSelectLabel/index.tsx b/superset-frontend/src/features/datasets/DatasetSelectLabel/index.tsx
index e68b2fcca3aa6..93b95c282b4f1 100644
--- a/superset-frontend/src/features/datasets/DatasetSelectLabel/index.tsx
+++ b/superset-frontend/src/features/datasets/DatasetSelectLabel/index.tsx
@@ -34,12 +34,12 @@ export type Dataset = {
const TooltipContent = styled.div`
${({ theme }) => `
.tooltip-header {
- font-size: ${theme.typography.sizes.m}px;
- font-weight: ${theme.typography.weights.bold};
+ font-size: ${theme.fontSize}px;
+ font-weight: ${theme.fontWeightStrong};
}
.tooltip-description {
- margin-top: ${theme.gridUnit * 2}px;
+ margin-top: ${theme.sizeUnit * 2}px;
display: -webkit-box;
-webkit-line-clamp: 20;
-webkit-box-orient: vertical;
@@ -51,8 +51,8 @@ const TooltipContent = styled.div`
const StyledLabelContainer = styled.div`
${({ theme }) => `
- left: ${theme.gridUnit * 3}px;
- right: ${theme.gridUnit * 3}px;
+ left: ${theme.sizeUnit * 3}px;
+ right: ${theme.sizeUnit * 3}px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
@@ -61,8 +61,8 @@ const StyledLabelContainer = styled.div`
const StyledLabel = styled.span`
${({ theme }) => `
- left: ${theme.gridUnit * 3}px;
- right: ${theme.gridUnit * 3}px;
+ left: ${theme.sizeUnit * 3}px;
+ right: ${theme.sizeUnit * 3}px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
@@ -77,15 +77,11 @@ const StyledDetailWrapper = styled.div`
`;
const StyledLabelDetail = styled.span`
- ${({
- theme: {
- typography: { sizes, weights },
- },
- }) => `
+ ${({ theme: { fontSizeSM, colorTextSecondary } }) => `
overflow: hidden;
text-overflow: ellipsis;
- font-size: ${sizes.s}px;
- font-weight: ${weights.light};
+ font-size: ${fontSizeSM}px;
+ color: ${colorTextSecondary};
line-height: 1.6;
`}
`;
diff --git a/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx b/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
index 1f26ecc15aa28..d72e4d183cf90 100644
--- a/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
+++ b/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
@@ -107,7 +107,7 @@ export const useDatasetMetadataBar = ({
{status === ResourceStatus.Complete && (
@@ -121,7 +121,7 @@ export const useDatasetMetadataBar = ({
)}
);
- }, [datasetProps, result, status, theme.gridUnit]);
+ }, [datasetProps, result, status, theme.sizeUnit]);
return {
metadataBar,
diff --git a/superset-frontend/src/features/datasets/styles.ts b/superset-frontend/src/features/datasets/styles.ts
index 108504475ae73..df53b3cb5091f 100644
--- a/superset-frontend/src/features/datasets/styles.ts
+++ b/superset-frontend/src/features/datasets/styles.ts
@@ -26,8 +26,8 @@ export const StyledLayoutWrapper = styled.div`
`;
export const LeftColumn = styled.div<{ width?: number }>`
- width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
- max-width: ${({ theme, width }) => width ?? theme.gridUnit * 80}px;
+ width: ${({ theme, width }) => width ?? theme.sizeUnit * 80}px;
+ max-width: ${({ theme, width }) => width ?? theme.sizeUnit * 80}px;
flex-direction: column;
flex: 1 0 auto;
`;
@@ -57,27 +57,27 @@ export const PanelRow = styled(Row)`
export const FooterRow = styled(Row)`
flex: 0 0 auto;
- height: ${({ theme }) => theme.gridUnit * 16}px;
+ height: ${({ theme }) => theme.sizeUnit * 16}px;
z-index: 0;
`;
export const StyledLayoutHeader = styled.div`
${({ theme }) => `
flex: 0 0 auto;
- height: ${theme.gridUnit * 16}px;
+ height: ${theme.sizeUnit * 16}px;
border-bottom: 2px solid ${theme.colors.grayscale.light2};
.header-with-actions {
- height: ${theme.gridUnit * 15.5}px;
+ height: ${theme.sizeUnit * 15.5}px;
}
`}
`;
export const StyledCreateDatasetTitle = styled.div`
${({ theme }) => `
- margin: ${theme.gridUnit * 4}px;
- font-size: ${theme.typography.sizes.xl}px;
- font-weight: ${theme.typography.weights.bold};
+ margin: ${theme.sizeUnit * 4}px;
+ font-size: ${theme.fontSizeXL}px;
+ font-weight: ${theme.fontWeightStrong};
`}
`;
@@ -96,24 +96,24 @@ export const StyledLayoutDatasetPanel = styled.div`
export const StyledLayoutRightPanel = styled.div`
${({ theme }) => `
border-left: 1px solid ${theme.colors.grayscale.light2};
- color: ${theme.colors.success.base};
+ color: ${theme.colorSuccess};
`}
`;
export const StyledLayoutFooter = styled.div`
${({ theme }) => `
- height: ${theme.gridUnit * 16}px;
+ height: ${theme.sizeUnit * 16}px;
width: 100%;
border-top: 1px solid ${theme.colors.grayscale.light2};
border-bottom: 1px solid ${theme.colors.grayscale.light2};
- color: ${theme.colors.info.base};
- border-top: ${theme.gridUnit / 4}px solid
+ color: ${theme.colorInfo};
+ border-top: ${theme.sizeUnit / 4}px solid
${theme.colors.grayscale.light2};
- padding: ${theme.gridUnit * 4}px;
+ padding: ${theme.sizeUnit * 4}px;
display: flex;
justify-content: flex-end;
background-color: ${theme.colors.grayscale.light5};
- z-index: ${theme.zIndex.max}
+ z-index: ${theme.zIndexPopupBase}
`}
`;
@@ -132,7 +132,7 @@ export const HeaderComponentStyles = styled.div`
`;
export const disabledSaveBtnStyles = (theme: SupersetTheme) => css`
- width: ${theme.gridUnit * 21.5}px;
+ width: ${theme.sizeUnit * 21.5}px;
&:disabled {
background-color: ${theme.colors.grayscale.light3};
diff --git a/superset-frontend/src/features/home/ActivityTable.tsx b/superset-frontend/src/features/home/ActivityTable.tsx
index 424d3d232d6aa..3b6cce8e9dd79 100644
--- a/superset-frontend/src/features/home/ActivityTable.tsx
+++ b/superset-frontend/src/features/home/ActivityTable.tsx
@@ -78,7 +78,7 @@ interface ActivityProps {
const Styles = styled.div`
.recentCards {
max-height: none;
- grid-gap: ${({ theme }) => `${theme.gridUnit * 4}px`};
+ grid-gap: ${({ theme }) => `${theme.sizeUnit * 4}px`};
}
`;
diff --git a/superset-frontend/src/features/home/LanguagePicker.tsx b/superset-frontend/src/features/home/LanguagePicker.tsx
index 61c6a2a107d82..77387e13fea56 100644
--- a/superset-frontend/src/features/home/LanguagePicker.tsx
+++ b/superset-frontend/src/features/home/LanguagePicker.tsx
@@ -40,7 +40,7 @@ const StyledLabel = styled.div`
align-items: center;
& i {
- margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * 2}px;
}
& a {
diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx
index ebcff4a023ce6..2470882ba2ce0 100644
--- a/superset-frontend/src/features/home/Menu.tsx
+++ b/superset-frontend/src/features/home/Menu.tsx
@@ -42,7 +42,7 @@ interface MenuProps {
const StyledHeader = styled.header`
${({ theme }) => `
- background-color: ${theme.colors.grayscale.light5};
+ background-color: ${theme.colorBgElevated};
margin-bottom: 2px;
z-index: 10;
@@ -58,11 +58,11 @@ const StyledHeader = styled.header`
justify-content: center;
/* must be exactly the height of the Antd navbar */
min-height: 50px;
- padding: ${theme.gridUnit}px
- ${theme.gridUnit * 2}px
- ${theme.gridUnit}px
- ${theme.gridUnit * 4}px;
- max-width: ${theme.gridUnit * theme.brandIconMaxWidth}px;
+ padding: ${theme.sizeUnit}px
+ ${theme.sizeUnit * 2}px
+ ${theme.sizeUnit}px
+ ${theme.sizeUnit * 4}px;
+ max-width: ${theme.sizeUnit * theme.brandIconMaxWidth}px;
img {
height: 100%;
object-fit: contain;
@@ -71,25 +71,25 @@ const StyledHeader = styled.header`
border-color: transparent;
}
&:focus-visible {
- border-color: ${theme.colors.primary.dark1};
+ border-color: ${theme.colorPrimaryText};
}
}
.navbar-brand-text {
border-left: 1px solid ${theme.colors.grayscale.light2};
border-right: 1px solid ${theme.colors.grayscale.light2};
height: 100%;
- color: ${theme.colors.grayscale.dark1};
- padding-left: ${theme.gridUnit * 4}px;
- padding-right: ${theme.gridUnit * 4}px;
- margin-right: ${theme.gridUnit * 6}px;
- font-size: ${theme.gridUnit * 4}px;
+ color: ${theme.colorText};
+ padding-left: ${theme.sizeUnit * 4}px;
+ padding-right: ${theme.sizeUnit * 4}px;
+ margin-right: ${theme.sizeUnit * 6}px;
+ font-size: ${theme.sizeUnit * 4}px;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
span {
- max-width: ${theme.gridUnit * 58}px;
+ max-width: ${theme.sizeUnit * 58}px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -105,8 +105,8 @@ const StyledHeader = styled.header`
}
@media (max-width: 767px) {
.antd5-menu-item {
- padding: 0 ${theme.gridUnit * 6}px 0
- ${theme.gridUnit * 3}px !important;
+ padding: 0 ${theme.sizeUnit * 6}px 0
+ ${theme.sizeUnit * 3}px !important;
}
.antd5-menu > .antd5-menu-item > span > a {
padding: 0px;
@@ -122,7 +122,7 @@ const { SubMenu } = MainNav;
const StyledSubMenu = styled(SubMenu)`
&.antd5-menu-submenu-active {
.antd5-menu-title-content {
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
}
}
`;
diff --git a/superset-frontend/src/features/home/RightMenu.tsx b/superset-frontend/src/features/home/RightMenu.tsx
index 0c53c3abd65ba..76226c32a6483 100644
--- a/superset-frontend/src/features/home/RightMenu.tsx
+++ b/superset-frontend/src/features/home/RightMenu.tsx
@@ -23,6 +23,7 @@ import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { useQueryParams, BooleanParam } from 'use-query-params';
import { isEmpty } from 'lodash';
+import { Switch } from 'antd-v5';
import {
t,
@@ -32,6 +33,9 @@ import {
SupersetClient,
getExtensionsRegistry,
useTheme,
+ isFeatureEnabled,
+ FeatureFlag,
+ themeObject,
} from '@superset-ui/core';
import { Menu } from 'src/components/Menu';
import { Tooltip } from 'src/components/Tooltip';
@@ -59,14 +63,14 @@ import {
const extensionsRegistry = getExtensionsRegistry();
const versionInfoStyles = (theme: SupersetTheme) => css`
- padding: ${theme.gridUnit * 1.5}px ${theme.gridUnit * 4}px
- ${theme.gridUnit * 4}px ${theme.gridUnit * 7}px;
+ padding: ${theme.sizeUnit * 1.5}px ${theme.sizeUnit * 4}px
+ ${theme.sizeUnit * 4}px ${theme.sizeUnit * 7}px;
color: ${theme.colors.grayscale.base};
- font-size: ${theme.typography.sizes.xs}px;
+ font-size: ${theme.fontSizeXS}px;
white-space: nowrap;
`;
const StyledI = styled.div`
- color: ${({ theme }) => theme.colors.primary.dark1};
+ color: ${({ theme }) => theme.colorPrimaryText};
`;
const styledDisabled = (theme: SupersetTheme) => css`
@@ -79,7 +83,7 @@ const StyledDiv = styled.div<{ align: string }>`
flex-direction: row;
justify-content: ${({ align }) => align};
align-items: center;
- margin-right: ${({ theme }) => theme.gridUnit}px;
+ margin-right: ${({ theme }) => theme.sizeUnit}px;
`;
const StyledMenuItemWithIcon = styled.div`
@@ -90,8 +94,8 @@ const StyledMenuItemWithIcon = styled.div`
`;
const StyledAnchor = styled.a`
- padding-right: ${({ theme }) => theme.gridUnit}px;
- padding-left: ${({ theme }) => theme.gridUnit}px;
+ padding-right: ${({ theme }) => theme.sizeUnit}px;
+ padding-left: ${({ theme }) => theme.sizeUnit}px;
`;
const tagStyles = (theme: SupersetTheme) => css`
@@ -100,7 +104,7 @@ const tagStyles = (theme: SupersetTheme) => css`
const styledChildMenu = (theme: SupersetTheme) => css`
&:hover {
- color: ${theme.colors.primary.base} !important;
+ color: ${theme.colorPrimary} !important;
cursor: pointer !important;
}
`;
@@ -110,7 +114,7 @@ const { SubMenu } = Menu;
const StyledSubMenu = styled(SubMenu)`
&.antd5-menu-submenu-active {
.antd5-menu-title-content {
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
}
}
`;
@@ -389,7 +393,7 @@ const RightMenu = ({
)}
{environmentTag?.text && (
)}
+ {(isFeatureEnabled(FeatureFlag.DarkThemeSwitch) || true) && (
+
+ {
+ themeObject.setThemeFromSeed({}, checked);
+ }}
+ />
+
+ )}
setShowModal(true)}>
diff --git a/superset-frontend/src/features/reports/ReportModal/styles.tsx b/superset-frontend/src/features/reports/ReportModal/styles.tsx
index ad30adce8f79e..ab2ec7a43a712 100644
--- a/superset-frontend/src/features/reports/ReportModal/styles.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/styles.tsx
@@ -31,9 +31,9 @@ export const StyledModal = styled(Modal)`
export const StyledTopSection = styled.div`
padding: ${({ theme }) =>
- `${theme.gridUnit * 3}px ${theme.gridUnit * 4}px ${theme.gridUnit * 2}px`};
+ `${theme.sizeUnit * 3}px ${theme.sizeUnit * 4}px ${theme.sizeUnit * 2}px`};
label {
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.light1};
}
`;
@@ -41,19 +41,19 @@ export const StyledTopSection = styled.div`
export const StyledBottomSection = styled.div`
border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
padding: ${({ theme }) =>
- `${theme.gridUnit * 4}px ${theme.gridUnit * 4}px ${theme.gridUnit * 6}px`};
+ `${theme.sizeUnit * 4}px ${theme.sizeUnit * 4}px ${theme.sizeUnit * 6}px`};
.ant-select {
width: 100%;
}
.control-label {
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.light1};
}
`;
export const StyledIconWrapper = styled.span`
span {
- margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+ margin-right: ${({ theme }) => theme.sizeUnit * 2}px;
vertical-align: middle;
}
.text {
@@ -62,20 +62,20 @@ export const StyledIconWrapper = styled.span`
`;
export const StyledScheduleTitle = styled.div`
- margin-bottom: ${({ theme }) => theme.gridUnit * 7}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 7}px;
h4 {
- margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 3}px;
}
`;
export const StyledCronPicker = styled(CronPicker)`
- margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
- width: ${({ theme }) => theme.gridUnit * 120}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 3}px;
+ width: ${({ theme }) => theme.sizeUnit * 120}px;
`;
export const StyledCronError = styled.p`
- color: ${({ theme }) => theme.colors.error.base};
+ color: ${({ theme }) => theme.colorError};
`;
export const noBottomMargin = css`
@@ -83,36 +83,36 @@ export const noBottomMargin = css`
`;
export const StyledFooterButton = styled(Button)`
- width: ${({ theme }) => theme.gridUnit * 40}px;
+ width: ${({ theme }) => theme.sizeUnit * 40}px;
`;
export const TimezoneHeaderStyle = (theme: SupersetTheme) => css`
- margin: ${theme.gridUnit * 3}px 0 ${theme.gridUnit * 2}px;
+ margin: ${theme.sizeUnit * 3}px 0 ${theme.sizeUnit * 2}px;
`;
export const CustomWidthHeaderStyle = (theme: SupersetTheme) => css`
- margin: ${theme.gridUnit * 3}px 0 ${theme.gridUnit * 2}px;
+ margin: ${theme.sizeUnit * 3}px 0 ${theme.sizeUnit * 2}px;
`;
export const SectionHeaderStyle = (theme: SupersetTheme) => css`
- margin: ${theme.gridUnit * 3}px 0;
+ margin: ${theme.sizeUnit * 3}px 0;
`;
export const StyledMessageContentTitle = styled.div`
- margin: ${({ theme }) => theme.gridUnit * 8}px 0
- ${({ theme }) => theme.gridUnit * 4}px;
+ margin: ${({ theme }) => theme.sizeUnit * 8}px 0
+ ${({ theme }) => theme.sizeUnit * 4}px;
`;
export const StyledRadio = styled(Radio)`
display: block;
- line-height: ${({ theme }) => theme.gridUnit * 8}px;
+ line-height: ${({ theme }) => theme.sizeUnit * 8}px;
`;
export const StyledRadioGroup = styled(Radio.Group)`
- margin-left: ${({ theme }) => theme.gridUnit * 0.5}px;
+ margin-left: ${({ theme }) => theme.sizeUnit * 0.5}px;
`;
export const antDErrorAlertStyles = (theme: SupersetTheme) => css`
- margin: ${theme.gridUnit * 4}px;
+ margin: ${theme.sizeUnit * 4}px;
margin-top: 0;
`;
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
index a64d99dd51afa..34069a1881abb 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
@@ -55,7 +55,7 @@ const StyledModal = styled(Modal)`
`;
const StyledIcon = (theme: SupersetTheme) => css`
- margin: auto ${theme.gridUnit * 2}px auto 0;
+ margin: auto ${theme.sizeUnit * 2}px auto 0;
color: ${theme.colors.grayscale.base};
`;
@@ -63,27 +63,27 @@ const StyledSectionContainer = styled.div`
display: flex;
flex-direction: column;
padding: ${({ theme }) =>
- `${theme.gridUnit * 3}px ${theme.gridUnit * 4}px ${theme.gridUnit * 2}px`};
+ `${theme.sizeUnit * 3}px ${theme.sizeUnit * 4}px ${theme.sizeUnit * 2}px`};
label,
.control-label {
display: inline-block;
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
+ font-size: ${({ theme }) => theme.fontSizeSM}px;
color: ${({ theme }) => theme.colors.grayscale.base};
vertical-align: middle;
}
.info-solid-small {
vertical-align: middle;
- padding-bottom: ${({ theme }) => theme.gridUnit / 2}px;
+ padding-bottom: ${({ theme }) => theme.sizeUnit / 2}px;
}
`;
const StyledInputContainer = styled.div`
display: flex;
flex-direction: column;
- margin: ${({ theme }) => theme.gridUnit}px;
- margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
+ margin: ${({ theme }) => theme.sizeUnit}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 4}px;
.input-container {
display: flex;
@@ -100,14 +100,14 @@ const StyledInputContainer = styled.div`
}
.required {
- margin-left: ${({ theme }) => theme.gridUnit / 2}px;
- color: ${({ theme }) => theme.colors.error.base};
+ margin-left: ${({ theme }) => theme.sizeUnit / 2}px;
+ color: ${({ theme }) => theme.colorError};
}
`;
const StyledTextArea = styled(TextArea)`
resize: none;
- margin-top: ${({ theme }) => theme.gridUnit}px;
+ margin-top: ${({ theme }) => theme.sizeUnit}px;
`;
export interface RowLevelSecurityModalProps {
diff --git a/superset-frontend/src/features/tags/BulkTagModal.tsx b/superset-frontend/src/features/tags/BulkTagModal.tsx
index 3195461285365..1f567a4ad989f 100644
--- a/superset-frontend/src/features/tags/BulkTagModal.tsx
+++ b/superset-frontend/src/features/tags/BulkTagModal.tsx
@@ -28,7 +28,7 @@ import { TaggableResourceOption } from 'src/features/tags/TagModal';
const BulkTagModalContainer = styled.div`
.bulk-tag-text {
- margin-bottom: ${({ theme }) => theme.gridUnit * 2.5}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 2.5}px;
}
`;
diff --git a/superset-frontend/src/features/tags/TagModal.tsx b/superset-frontend/src/features/tags/TagModal.tsx
index 0704e19225b58..67a76b5572720 100644
--- a/superset-frontend/src/features/tags/TagModal.tsx
+++ b/superset-frontend/src/features/tags/TagModal.tsx
@@ -31,10 +31,10 @@ import { fetchObjectsByTagIds } from 'src/features/tags/tags';
const StyledModalBody = styled.div`
.ant-select-dropdown {
- max-height: ${({ theme }) => theme.gridUnit * 40}px;
+ max-height: ${({ theme }) => theme.sizeUnit * 40}px;
}
.tag-input {
- margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+ margin-bottom: ${({ theme }) => theme.sizeUnit * 3}px;
}
`;
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 09bd2a8149106..684edcc098ceb 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -82,10 +82,10 @@ const Wrapper = styled.div<{
}
& .ant-slider {
margin-top: ${
- orientation === FilterBarOrientation.Horizontal ? 0 : theme.gridUnit
+ orientation === FilterBarOrientation.Horizontal ? 0 : theme.sizeUnit
}px;
margin-bottom: ${
- orientation === FilterBarOrientation.Horizontal ? 0 : theme.gridUnit * 5
+ orientation === FilterBarOrientation.Horizontal ? 0 : theme.sizeUnit * 5
}px;
${
@@ -109,7 +109,7 @@ const Wrapper = styled.div<{
}
}
& .ant-slider-mark {
- font-size: ${theme.typography.sizes.s}px;
+ font-size: ${theme.fontSizeSM}px;
}
&:hover {
diff --git a/superset-frontend/src/hooks/useJsonTreeTheme.ts b/superset-frontend/src/hooks/useJsonTreeTheme.ts
index a052e22a63910..d9145a6c77a6a 100644
--- a/superset-frontend/src/hooks/useJsonTreeTheme.ts
+++ b/superset-frontend/src/hooks/useJsonTreeTheme.ts
@@ -20,22 +20,23 @@ import { useTheme } from '@superset-ui/core';
export const useJsonTreeTheme = () => {
const theme = useTheme();
+
return {
- base00: theme.colors.grayscale.dark2,
- base01: theme.colors.grayscale.dark1,
- base02: theme.colors.grayscale.base,
- base03: theme.colors.grayscale.light1,
- base04: theme.colors.grayscale.light2,
- base05: theme.colors.grayscale.light3,
- base06: theme.colors.grayscale.light4,
- base07: theme.colors.grayscale.light5,
- base08: theme.colors.error.base,
- base09: theme.colors.error.light1,
- base0A: theme.colors.error.light2,
- base0B: theme.colors.success.base,
- base0C: theme.colors.primary.light1,
- base0D: theme.colors.primary.base,
- base0E: theme.colors.primary.dark1,
- base0F: theme.colors.error.dark1,
+ base00: theme.colorBgContainer,
+ base01: theme.colorBgLayout,
+ base02: theme.colorBorder,
+ base03: theme.colorBorder,
+ base04: theme.colorText,
+ base05: theme.colorText,
+ base06: theme.colorText,
+ base07: theme.colorText,
+ base08: theme.colorError,
+ base09: theme.colorErrorHover,
+ base0A: theme.colorErrorText,
+ base0B: theme.colorSuccess,
+ base0C: theme.colorPrimaryBgHover,
+ base0D: theme.colorPrimary,
+ base0E: theme.colorPrimaryActive,
+ base0F: theme.colorErrorText,
};
};
diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx b/superset-frontend/src/pages/AlertReportList/index.tsx
index f60caf0cf7847..61b4ecc0d9487 100644
--- a/superset-frontend/src/pages/AlertReportList/index.tsx
+++ b/superset-frontend/src/pages/AlertReportList/index.tsx
@@ -86,8 +86,8 @@ const deleteAlerts = makeApi({
const RefreshContainer = styled.div`
width: 100%;
- padding: 0 ${({ theme }) => theme.gridUnit * 4}px
- ${({ theme }) => theme.gridUnit * 3}px;
+ padding: 0 ${({ theme }) => theme.sizeUnit * 4}px
+ ${({ theme }) => theme.sizeUnit * 3}px;
background-color: ${({ theme }) => theme.colors.grayscale.light5};
`;
@@ -97,7 +97,7 @@ const StyledHeaderWithIcon = styled.div`
justify-content: space-between;
align-items: center;
> *:first-child {
- margin-right: ${({ theme }) => theme.gridUnit}px;
+ margin-right: ${({ theme }) => theme.sizeUnit}px;
}
`;
diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx
index 3a1959b72d53f..6cf54aed834ae 100644
--- a/superset-frontend/src/pages/AllEntities/index.tsx
+++ b/superset-frontend/src/pages/AllEntities/index.tsx
@@ -53,9 +53,9 @@ interface TaggedObject {
const additionalItemsStyles = (theme: SupersetTheme) => css`
display: flex;
align-items: center;
- margin-left: ${theme.gridUnit}px;
+ margin-left: ${theme.sizeUnit}px;
& > span {
- margin-right: ${theme.gridUnit * 3}px;
+ margin-right: ${theme.sizeUnit * 3}px;
}
`;
@@ -63,17 +63,17 @@ const AllEntitiesContainer = styled.div`
${({ theme }) => `
background-color: ${theme.colors.grayscale.light4};
.select-control {
- margin-left: ${theme.gridUnit * 4}px;
- margin-right: ${theme.gridUnit * 4}px;
- margin-bottom: ${theme.gridUnit * 2}px;
+ margin-left: ${theme.sizeUnit * 4}px;
+ margin-right: ${theme.sizeUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 2}px;
}
.select-control-label {
- font-size: ${theme.gridUnit * 3}px;
+ font-size: ${theme.sizeUnit * 3}px;
color: ${theme.colors.grayscale.base};
- margin-bottom: ${theme.gridUnit * 1}px;
+ margin-bottom: ${theme.sizeUnit * 1}px;
}
.entities {
- margin: ${theme.gridUnit * 6}px; 0px;
+ margin: ${theme.sizeUnit * 6}px; 0px;
}
.pagination-container {
background-color: transparent;
@@ -83,21 +83,21 @@ const AllEntitiesContainer = styled.div`
const AllEntitiesNav = styled.div`
${({ theme }) => `
- height: ${theme.gridUnit * 12.5}px;
+ height: ${theme.sizeUnit * 12.5}px;
background-color: ${theme.colors.grayscale.light5};
- margin-bottom: ${theme.gridUnit * 4}px;
+ margin-bottom: ${theme.sizeUnit * 4}px;
.navbar-brand {
- margin-left: ${theme.gridUnit * 2}px;
- font-weight: ${theme.typography.weights.bold};
+ margin-left: ${theme.sizeUnit * 2}px;
+ font-weight: ${theme.fontWeightStrong};
}
.header {
- font-weight: ${theme.typography.weights.bold};
- margin-right: ${theme.gridUnit * 3}px;
+ font-weight: ${theme.fontWeightStrong};
+ margin-right: ${theme.sizeUnit * 3}px;
text-align: left;
- font-size: ${theme.gridUnit * 4.5}px;
- padding: ${theme.gridUnit * 3}px;
+ font-size: ${theme.sizeUnit * 4.5}px;
+ padding: ${theme.sizeUnit * 3}px;
display: inline-block;
- line-height: ${theme.gridUnit * 9}px;
+ line-height: ${theme.sizeUnit * 9}px;
}
`};
`;
diff --git a/superset-frontend/src/pages/AnnotationList/index.tsx b/superset-frontend/src/pages/AnnotationList/index.tsx
index 6e4b4169f8d4c..a6c4d3b0e6096 100644
--- a/superset-frontend/src/pages/AnnotationList/index.tsx
+++ b/superset-frontend/src/pages/AnnotationList/index.tsx
@@ -55,9 +55,9 @@ const StyledHeader = styled.div`
a,
Link {
- margin-left: ${theme.gridUnit * 4}px;
- font-size: ${theme.typography.sizes.s}px;
- font-weight: ${theme.typography.weights.normal};
+ margin-left: ${theme.sizeUnit * 4}px;
+ font-size: ${theme.fontSizeSM}px;
+ font-weight: ${theme.fontWeightNormal};
text-decoration: underline;
}
`}
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
index 5cbce4954d736..12e9a191002e0 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -74,23 +74,23 @@ const StyledContainer = styled.div`
width: 100%;
max-width: ${MAX_ADVISABLE_VIZ_GALLERY_WIDTH}px;
max-height: calc(100vh - ${ESTIMATED_NAV_HEIGHT}px);
- border-radius: ${theme.gridUnit}px;
- background-color: ${theme.colors.grayscale.light5};
+ border-radius: ${theme.sizeUnit}px;
+ background-color: ${theme.colorBgContainer};
margin-left: auto;
margin-right: auto;
- padding-left: ${theme.gridUnit * 4}px;
- padding-right: ${theme.gridUnit * 4}px;
- padding-bottom: ${theme.gridUnit * 4}px;
+ padding-left: ${theme.sizeUnit * 4}px;
+ padding-right: ${theme.sizeUnit * 4}px;
+ padding-bottom: ${theme.sizeUnit * 4}px;
h3 {
- padding-bottom: ${theme.gridUnit * 3}px;
+ padding-bottom: ${theme.sizeUnit * 3}px;
}
& .dataset {
display: flex;
flex-direction: row;
align-items: center;
- margin-bottom: ${theme.gridUnit * 5}px;
+ margin-bottom: ${theme.sizeUnit * 5}px;
& > div {
min-width: 200px;
@@ -98,15 +98,15 @@ const StyledContainer = styled.div`
}
& > span {
- color: ${theme.colors.grayscale.light1};
- margin-left: ${theme.gridUnit * 4}px;
+ color: ${theme.colorText};
+ margin-left: ${theme.sizeUnit * 4}px;
}
}
& .viz-gallery {
- border: 1px solid ${theme.colors.grayscale.light2};
- border-radius: ${theme.gridUnit}px;
- margin: ${theme.gridUnit}px 0px;
+ border: 1px solid ${theme.colorBorder};
+ border-radius: ${theme.sizeUnit}px;
+ margin: ${theme.sizeUnit}px 0px;
max-height: calc(100vh - ${ELEMENTS_EXCEPT_VIZ_GALLERY}px);
flex: 1;
}
@@ -119,8 +119,8 @@ const StyledContainer = styled.div`
align-items: center;
& > span {
- color: ${theme.colors.grayscale.light1};
- margin-right: ${theme.gridUnit * 4}px;
+ color: ${theme.colorText};
+ margin-right: ${theme.sizeUnit * 4}px;
}
}
@@ -131,22 +131,22 @@ const StyledContainer = styled.div`
}
&&&& .antd5-steps-item-icon {
- margin-right: ${theme.gridUnit * 2}px;
- width: ${theme.gridUnit * 5}px;
- height: ${theme.gridUnit * 5}px;
- line-height: ${theme.gridUnit * 5}px;
+ margin-right: ${theme.sizeUnit * 2}px;
+ width: ${theme.sizeUnit * 5}px;
+ height: ${theme.sizeUnit * 5}px;
+ line-height: ${theme.sizeUnit * 5}px;
}
&&&& .antd5-steps-item-title {
- line-height: ${theme.gridUnit * 5}px;
+ line-height: ${theme.sizeUnit * 5}px;
}
&&&& .antd5-steps-item-content {
overflow: unset;
.antd5-steps-item-description {
- margin-top: ${theme.gridUnit}px;
- padding-bottom: ${theme.gridUnit}px;
+ margin-top: ${theme.sizeUnit}px;
+ padding-bottom: ${theme.sizeUnit}px;
}
}
@@ -159,30 +159,26 @@ const StyledContainer = styled.div`
}
&&&& .ant-select-selection-placeholder {
- padding-left: ${theme.gridUnit * 3}px;
+ padding-left: ${theme.sizeUnit * 3}px;
}
&&&& .ant-select-selection-item {
- padding-left: ${theme.gridUnit * 3}px;
+ padding-left: ${theme.sizeUnit * 3}px;
}
`}
`;
const StyledStepTitle = styled.span`
- ${({
- theme: {
- typography: { sizes, weights },
- },
- }) => `
- font-size: ${sizes.m}px;
- font-weight: ${weights.bold};
+ ${({ theme: { fontSize, fontWeightStrong } }) => `
+ font-size: ${fontSize}px;
+ font-weight: ${fontWeightStrong};
`}
`;
const StyledStepDescription = styled.div`
- ${({ theme: { gridUnit } }) => `
- margin-top: ${gridUnit * 4}px;
- margin-bottom: ${gridUnit * 3}px;
+ ${({ theme: { sizeUnit } }) => `
+ margin-top: ${sizeUnit * 4}px;
+ margin-bottom: ${sizeUnit * 3}px;
`}
`;
diff --git a/superset-frontend/src/pages/ChartList/index.tsx b/superset-frontend/src/pages/ChartList/index.tsx
index 031722ab22c81..67f77bf9e74ca 100644
--- a/superset-frontend/src/pages/ChartList/index.tsx
+++ b/superset-frontend/src/pages/ChartList/index.tsx
@@ -86,7 +86,7 @@ const FlexRowContainer = styled.div`
}
svg {
- margin-right: ${({ theme }) => theme.gridUnit}px;
+ margin-right: ${({ theme }) => theme.sizeUnit}px;
}
`;
diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx
index 776dbbe817aa3..b79a4c8cd08ee 100644
--- a/superset-frontend/src/pages/DatabaseList/index.tsx
+++ b/superset-frontend/src/pages/DatabaseList/index.tsx
@@ -79,7 +79,7 @@ interface DatabaseListProps {
}
const IconCheck = styled(Icons.Check)`
- color: ${({ theme }) => theme.colors.grayscale.dark1};
+ color: ${({ theme }) => theme.colorText};
`;
const IconCancelX = styled(Icons.CancelX)`
diff --git a/superset-frontend/src/pages/DatasetCreation/DatasetCreation.test.tsx b/superset-frontend/src/pages/DatasetCreation/DatasetCreation.test.tsx
index 5666990061688..3bc28a68eacbc 100644
--- a/superset-frontend/src/pages/DatasetCreation/DatasetCreation.test.tsx
+++ b/superset-frontend/src/pages/DatasetCreation/DatasetCreation.test.tsx
@@ -30,17 +30,21 @@ jest.mock('react-router-dom', () => ({
describe('AddDataset', () => {
it('renders a blank state AddDataset', async () => {
- render(>`
SyntaxHighlighter.registerLanguage('sql', sql);
const StyledSyntaxHighlighter = styled(SyntaxHighlighter)`
- height: ${({ theme }) => theme.gridUnit * 26}px;
+ height: ${({ theme }) => theme.sizeUnit * 26}px;
overflow: hidden !important; /* needed to override inline styles */
text-overflow: ellipsis;
white-space: nowrap;
@@ -80,7 +80,7 @@ interface QueryListProps {
const StyledTableLabel = styled.div`
.count {
margin-left: 5px;
- color: ${({ theme }) => theme.colors.primary.base};
+ color: ${({ theme }) => theme.colorPrimary};
text-decoration: underline;
cursor: pointer;
}
@@ -92,7 +92,7 @@ const StyledPopoverItem = styled.div`
const TimerLabel = styled(Label)`
text-align: left;
- font-family: ${({ theme }) => theme.typography.families.monospace};
+ font-family: ${({ theme }) => theme.fontFamilyCode};
`;
function QueryList({ addDangerToast }: QueryListProps) {
@@ -158,9 +158,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
label: '',
};
if (status === QueryState.Success) {
- statusConfig.name = (
- ({
method: 'GET',
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts
deleted file mode 100644
index ff8e2aca6a769..0000000000000
--- a/superset-frontend/src/theme/index.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { addAlpha } from '@superset-ui/core';
-import { type ThemeConfig } from 'antd-v5';
-import { theme as supersetTheme } from 'src/preamble';
-import { mix } from 'polished';
-import { lightAlgorithm } from './light';
-
-export enum ThemeType {
- LIGHT = 'light',
-}
-
-const themes = {
- [ThemeType.LIGHT]: lightAlgorithm,
-};
-
-// Want to figure out which tokens look like what? Try this!
-// https://ant.design/theme-editor
-
-const baseConfig: ThemeConfig = {
- token: {
- borderRadius: supersetTheme.borderRadius,
- colorBgBase: supersetTheme.colors.primary.light4,
- colorError: supersetTheme.colors.error.base,
- colorInfo: supersetTheme.colors.info.base,
- colorLink: supersetTheme.colors.grayscale.dark1,
- colorPrimary: supersetTheme.colors.primary.base,
- colorSuccess: supersetTheme.colors.success.base,
- colorTextBase: supersetTheme.colors.grayscale.dark2,
- colorWarning: supersetTheme.colors.warning.base,
- controlHeight: 32,
- fontFamily: supersetTheme.typography.families.sansSerif,
- fontFamilyCode: supersetTheme.typography.families.monospace,
- fontSize: supersetTheme.typography.sizes.m,
- lineType: 'solid',
- lineWidth: 1,
- sizeStep: supersetTheme.gridUnit,
- sizeUnit: supersetTheme.gridUnit,
- zIndexBase: 0,
- zIndexPopupBase: supersetTheme.zIndex.max,
- },
- components: {
- Avatar: {
- containerSize: 32,
- fontSize: supersetTheme.typography.sizes.s,
- lineHeight: 32,
- },
- Badge: {
- paddingXS: supersetTheme.gridUnit * 2,
- },
- Button: {
- defaultBg: supersetTheme.colors.primary.light4,
- defaultHoverBg: mix(
- 0.1,
- supersetTheme.colors.primary.base,
- supersetTheme.colors.primary.light4,
- ),
- defaultActiveBg: mix(
- 0.25,
- supersetTheme.colors.primary.base,
- supersetTheme.colors.primary.light4,
- ),
- defaultColor: supersetTheme.colors.primary.dark1,
- defaultHoverColor: supersetTheme.colors.primary.dark1,
- defaultBorderColor: 'transparent',
- defaultHoverBorderColor: 'transparent',
- colorPrimaryHover: supersetTheme.colors.primary.dark1,
- colorPrimaryActive: mix(
- 0.2,
- supersetTheme.colors.grayscale.dark2,
- supersetTheme.colors.primary.dark1,
- ),
- primaryColor: supersetTheme.colors.grayscale.light5,
- colorPrimaryTextHover: supersetTheme.colors.grayscale.light5,
- colorError: supersetTheme.colors.error.base,
- colorErrorHover: mix(
- 0.1,
- supersetTheme.colors.grayscale.light5,
- supersetTheme.colors.error.base,
- ),
- colorErrorBg: mix(
- 0.2,
- supersetTheme.colors.grayscale.dark2,
- supersetTheme.colors.error.base,
- ),
- dangerColor: supersetTheme.colors.grayscale.light5,
- colorLinkHover: supersetTheme.colors.primary.base,
- linkHoverBg: 'transparent',
- },
- Card: {
- paddingLG: supersetTheme.gridUnit * 6,
- fontWeightStrong: supersetTheme.typography.weights.medium,
- colorBgContainer: supersetTheme.colors.grayscale.light4,
- },
- DatePicker: {
- colorBgContainer: supersetTheme.colors.grayscale.light5,
- colorBgElevated: supersetTheme.colors.grayscale.light5,
- borderRadiusSM: supersetTheme.gridUnit / 2,
- },
- Divider: {
- colorSplit: supersetTheme.colors.grayscale.light3,
- },
- Dropdown: {
- colorBgElevated: supersetTheme.colors.grayscale.light5,
- zIndexPopup: supersetTheme.zIndex.max,
- },
- Input: {
- colorBorder: supersetTheme.colors.secondary.light3,
- colorBgContainer: supersetTheme.colors.grayscale.light5,
- activeShadow: `0 0 0 ${supersetTheme.gridUnit / 2}px ${
- supersetTheme.colors.primary.light3
- }`,
- },
- InputNumber: {
- colorBorder: supersetTheme.colors.secondary.light3,
- colorBgContainer: supersetTheme.colors.grayscale.light5,
- activeShadow: `0 0 0 ${supersetTheme.gridUnit / 2}px ${
- supersetTheme.colors.primary.light3
- }`,
- },
- List: {
- itemPadding: `${supersetTheme.gridUnit + 2}px ${supersetTheme.gridUnit * 3}px`,
- paddingLG: supersetTheme.gridUnit * 3,
- colorSplit: supersetTheme.colors.grayscale.light3,
- colorText: supersetTheme.colors.grayscale.dark1,
- },
- Menu: {
- itemHeight: 32,
- colorBgContainer: supersetTheme.colors.grayscale.light5,
- subMenuItemBg: supersetTheme.colors.grayscale.light5,
- colorBgElevated: supersetTheme.colors.grayscale.light5,
- boxShadowSecondary: `0 3px 6px -4px ${addAlpha(supersetTheme.colors.grayscale.dark2, 0.12)}, 0 6px 16px 0 ${addAlpha(supersetTheme.colors.grayscale.dark2, 0.08)}, 0 9px 28px 8px ${addAlpha(supersetTheme.colors.grayscale.dark2, 0.05)}`,
- activeBarHeight: 0,
- itemHoverBg: supersetTheme.colors.secondary.light5,
- padding: supersetTheme.gridUnit * 2,
- subMenuItemBorderRadius: 0,
- horizontalLineHeight: 1.4,
- zIndexPopup: supersetTheme.zIndex.max,
- },
- Modal: {
- colorBgMask: `${supersetTheme.colors.grayscale.dark2}73`,
- contentBg: supersetTheme.colors.grayscale.light5,
- titleFontSize: supersetTheme.gridUnit * 4,
- titleColor: `${supersetTheme.colors.grayscale.dark2}D9`,
- headerBg: supersetTheme.colors.grayscale.light4,
- },
- Tag: {
- borderRadiusSM: 2,
- defaultBg: supersetTheme.colors.grayscale.light4,
- },
- Progress: {
- fontSize: supersetTheme.typography.sizes.s,
- colorText: supersetTheme.colors.text.label,
- remainingColor: supersetTheme.colors.grayscale.light4,
- },
- Popover: {
- colorBgElevated: supersetTheme.colors.grayscale.light5,
- },
- Slider: {
- trackBgDisabled: supersetTheme.colors.grayscale.light1,
- colorBgElevated: supersetTheme.colors.grayscale.light5,
- handleSizeHover: 10,
- handleLineWidthHover: 2,
- },
- Steps: {
- margin: supersetTheme.gridUnit * 2,
- iconSizeSM: 20,
- },
- Switch: {
- colorPrimaryHover: supersetTheme.colors.primary.base,
- colorTextTertiary: supersetTheme.colors.grayscale.light1,
- },
- Tooltip: {
- fontSize: supersetTheme.typography.sizes.s,
- lineHeight: 1.6,
- },
- },
-};
-
-export const getTheme = (themeType?: ThemeType) => ({
- ...baseConfig,
- algorithm: themes[themeType || ThemeType.LIGHT],
-});
diff --git a/superset-frontend/src/theme/light.ts b/superset-frontend/src/theme/light.ts
deleted file mode 100644
index 61591d99071a5..0000000000000
--- a/superset-frontend/src/theme/light.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements. See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership. The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { type MappingAlgorithm, theme } from 'antd-v5';
-import { theme as supersetTheme } from 'src/preamble';
-
-export const lightAlgorithm: MappingAlgorithm = seedToken => {
- const defaultTokens = theme.defaultAlgorithm(seedToken);
- return {
- // Map Tokens
- ...defaultTokens,
- borderRadiusLG: supersetTheme.borderRadius,
- borderRadiusOuter: supersetTheme.borderRadius,
- borderRadiusSM: supersetTheme.borderRadius,
- borderRadiusXS: supersetTheme.borderRadius,
-
- colorBgContainer: supersetTheme.colors.primary.light4,
- colorBgElevated: supersetTheme.colors.primary.base,
- colorBgLayout: supersetTheme.colors.grayscale.light4,
- colorBgMask: supersetTheme.colors.grayscale.light2,
- colorBgSpotlight: supersetTheme.colors.grayscale.dark1,
-
- colorBorder: supersetTheme.colors.grayscale.light2,
- colorBorderSecondary: supersetTheme.colors.grayscale.light3,
-
- colorErrorActive: supersetTheme.colors.error.dark1,
- colorErrorBg: supersetTheme.colors.error.light2,
- colorErrorBgActive: supersetTheme.colors.error.light1,
- colorErrorBgHover: supersetTheme.colors.error.light2,
- colorErrorBorder: supersetTheme.colors.error.light1,
- colorErrorBorderHover: supersetTheme.colors.error.light1,
- colorErrorHover: supersetTheme.colors.error.base,
- colorErrorText: supersetTheme.colors.error.base,
- colorErrorTextActive: supersetTheme.colors.error.dark1,
- colorErrorTextHover: supersetTheme.colors.error.base,
-
- colorFill: supersetTheme.colors.grayscale.light4,
- colorFillSecondary: supersetTheme.colors.grayscale.light2,
- colorFillTertiary: supersetTheme.colors.grayscale.light3,
-
- colorInfoActive: supersetTheme.colors.info.dark1,
- colorInfoBg: supersetTheme.colors.info.light2,
- colorInfoBgHover: supersetTheme.colors.info.light1,
- colorInfoBorder: supersetTheme.colors.info.light1,
- colorInfoBorderHover: supersetTheme.colors.info.dark1,
- colorInfoHover: supersetTheme.colors.info.dark1,
- colorInfoText: supersetTheme.colors.info.dark1,
- colorInfoTextActive: supersetTheme.colors.info.dark2,
- colorInfoTextHover: supersetTheme.colors.info.dark1,
-
- colorLinkActive: supersetTheme.colors.info.dark2,
- colorLinkHover: supersetTheme.colors.info.dark1,
-
- colorPrimaryActive: supersetTheme.colors.primary.dark2,
- colorPrimaryBg: supersetTheme.colors.primary.light4,
- colorPrimaryBgHover: supersetTheme.colors.primary.light3,
- colorPrimaryBorder: supersetTheme.colors.primary.light2,
- colorPrimaryBorderHover: supersetTheme.colors.primary.light1,
- colorPrimaryHover: supersetTheme.colors.primary.dark1,
- colorPrimaryText: supersetTheme.colors.primary.dark1,
- colorPrimaryTextActive: supersetTheme.colors.primary.dark2,
- colorPrimaryTextHover: supersetTheme.colors.primary.dark1,
-
- colorSuccessActive: supersetTheme.colors.success.dark1,
- colorSuccessBg: supersetTheme.colors.success.light2,
- colorSuccessBgHover: supersetTheme.colors.success.light1,
- colorSuccessBorder: supersetTheme.colors.success.light1,
- colorSuccessBorderHover: supersetTheme.colors.success.dark1,
- colorSuccessHover: supersetTheme.colors.success.dark1,
- colorSuccessText: supersetTheme.colors.success.dark1,
- colorSuccessTextActive: supersetTheme.colors.success.dark2,
- colorSuccessTextHover: supersetTheme.colors.success.dark1,
-
- colorText: supersetTheme.colors.grayscale.dark2,
- colorTextQuaternary: supersetTheme.colors.grayscale.light1,
- colorTextSecondary: supersetTheme.colors.text.label,
- colorTextTertiary: supersetTheme.colors.text.help,
-
- colorWarningActive: supersetTheme.colors.warning.dark1,
- colorWarningBg: supersetTheme.colors.warning.light2,
- colorWarningBgHover: supersetTheme.colors.warning.light1,
- colorWarningBorder: supersetTheme.colors.warning.light1,
- colorWarningBorderHover: supersetTheme.colors.warning.dark1,
- colorWarningHover: supersetTheme.colors.warning.dark1,
- colorWarningText: supersetTheme.colors.warning.dark1,
- colorWarningTextActive: supersetTheme.colors.warning.dark2,
- colorWarningTextHover: supersetTheme.colors.warning.dark1,
-
- colorWhite: supersetTheme.colors.grayscale.light5,
-
- fontSizeHeading1: supersetTheme.typography.sizes.xxl,
- fontSizeHeading2: supersetTheme.typography.sizes.xl,
- fontSizeHeading3: supersetTheme.typography.sizes.l,
- fontSizeHeading4: supersetTheme.typography.sizes.m,
- fontSizeHeading5: supersetTheme.typography.sizes.s,
-
- fontSizeLG: supersetTheme.typography.sizes.l,
- fontSizeSM: supersetTheme.typography.sizes.s,
- fontSizeXL: supersetTheme.typography.sizes.xl,
-
- lineWidthBold: supersetTheme.gridUnit / 2,
- };
-};
diff --git a/superset-frontend/src/views/App.tsx b/superset-frontend/src/views/App.tsx
index 8b4c5e8013505..3fb8409aa1c91 100644
--- a/superset-frontend/src/views/App.tsx
+++ b/superset-frontend/src/views/App.tsx
@@ -27,8 +27,8 @@ import {
import { bindActionCreators } from 'redux';
import { GlobalStyles } from 'src/GlobalStyles';
import ErrorBoundary from 'src/components/ErrorBoundary';
+import Layout from 'src/components/Layout';
import Loading from 'src/components/Loading';
-import { Layout } from 'src/components';
import Menu from 'src/features/home/Menu';
import getBootstrapData from 'src/utils/getBootstrapData';
import ToastContainer from 'src/components/MessageToasts/ToastContainer';
diff --git a/superset-frontend/src/views/CRUD/utils.tsx b/superset-frontend/src/views/CRUD/utils.tsx
index 785ac7f7ac089..4cd47b15f3c4d 100644
--- a/superset-frontend/src/views/CRUD/utils.tsx
+++ b/superset-frontend/src/views/CRUD/utils.tsx
@@ -359,14 +359,14 @@ export const CardContainer = styled.div<{
${({ showThumbnails, theme }) => `
overflow: hidden;
display: grid;
- grid-gap: ${theme.gridUnit * 12}px ${theme.gridUnit * 4}px;
+ grid-gap: ${theme.sizeUnit * 12}px ${theme.sizeUnit * 4}px;
grid-template-columns: repeat(auto-fit, 300px);
max-height: ${showThumbnails ? '314' : '148'}px;
- margin-top: ${theme.gridUnit * -6}px;
+ margin-top: ${theme.sizeUnit * -6}px;
padding: ${
showThumbnails
- ? `${theme.gridUnit * 8 + 3}px ${theme.gridUnit * 9}px`
- : `${theme.gridUnit * 8 + 1}px ${theme.gridUnit * 9}px`
+ ? `${theme.sizeUnit * 8 + 3}px ${theme.sizeUnit * 9}px`
+ : `${theme.sizeUnit * 8 + 1}px ${theme.sizeUnit * 9}px`
};
`}
`;
@@ -383,7 +383,7 @@ export const CardStyles = styled.div`
`;
export const StyledIcon = (theme: SupersetTheme) => css`
- margin: auto ${theme.gridUnit * 2}px auto 0;
+ margin: auto ${theme.sizeUnit * 2}px auto 0;
color: ${theme.colors.grayscale.base};
`;
diff --git a/superset-frontend/src/views/RootContextProviders.tsx b/superset-frontend/src/views/RootContextProviders.tsx
index c0bc5c3af140e..cefcfcb534bce 100644
--- a/superset-frontend/src/views/RootContextProviders.tsx
+++ b/superset-frontend/src/views/RootContextProviders.tsx
@@ -18,54 +18,49 @@
*/
import { Route } from 'react-router-dom';
-import { getExtensionsRegistry, ThemeProvider } from '@superset-ui/core';
+import { getExtensionsRegistry, themeObject } from '@superset-ui/core';
import { Provider as ReduxProvider } from 'react-redux';
import { QueryParamProvider } from 'use-query-params';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import getBootstrapData from 'src/utils/getBootstrapData';
-import { AntdThemeProvider } from '../components/AntdThemeProvider';
import { store } from './store';
import FlashProvider from '../components/FlashProvider';
-import { theme } from '../preamble';
+import '../preamble';
import { EmbeddedUiConfigProvider } from '../components/UiConfigContext';
import { DynamicPluginProvider } from '../components/DynamicPlugins';
const { common } = getBootstrapData();
const extensionsRegistry = getExtensionsRegistry();
-
export const RootContextProviders: React.FC = ({ children }) => {
const RootContextProviderExtension = extensionsRegistry.get(
'root.context.provider',
);
-
return (
-
-
-
-
-
-
-
-
- {RootContextProviderExtension ? (
-
- {children}
-
- ) : (
- children
- )}
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {RootContextProviderExtension ? (
+
+ {children}
+
+ ) : (
+ children
+ )}
+
+
+
+
+
+
+
);
};
diff --git a/superset-frontend/src/views/menu.tsx b/superset-frontend/src/views/menu.tsx
index 128fa9ca876bf..4c2e355be5915 100644
--- a/superset-frontend/src/views/menu.tsx
+++ b/superset-frontend/src/views/menu.tsx
@@ -25,10 +25,8 @@ import { Route, BrowserRouter } from 'react-router-dom';
import { CacheProvider } from '@emotion/react';
import { QueryParamProvider } from 'use-query-params';
import createCache from '@emotion/cache';
-import { ThemeProvider } from '@superset-ui/core';
+import { ThemeProvider, theme } from '@superset-ui/core';
import Menu from 'src/features/home/Menu';
-import { theme } from 'src/preamble';
-import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
import getBootstrapData from 'src/utils/getBootstrapData';
import { setupStore } from './store';
@@ -46,18 +44,16 @@ const app = (
// @ts-ignore: emotion types defs are incompatible between core and cache
-
-
-
-
-
-
-
-
+
+
+
+
+
+
);
diff --git a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx
index 3c35b572d0992..4c741078ae7b5 100644
--- a/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx
+++ b/superset-frontend/src/visualizations/TimeTable/SparklineCell.tsx
@@ -208,7 +208,7 @@ const SparklineCell = ({
snapTooltipToDatumX
snapTooltipToDatumY
verticalCrosshairStyle={{
- stroke: `${theme.colors.grayscale.dark1}`,
+ stroke: `${theme.colorText}`,
strokeDasharray: '3 3',
strokeWidth: 1,
}}
diff --git a/superset-frontend/tsconfig.json b/superset-frontend/tsconfig.json
index 9dba1c3f89b23..bb2199872d52f 100644
--- a/superset-frontend/tsconfig.json
+++ b/superset-frontend/tsconfig.json
@@ -32,6 +32,7 @@
"@testing-library/jest-dom",
"@types/node"
],
+ "typeRoots": ["src/types", "node_modules/@types"],
/* Emit */
"declaration": true,
diff --git a/superset-frontend/webpack.config.js b/superset-frontend/webpack.config.js
index 1bf1f72b01205..9d04e148fb364 100644
--- a/superset-frontend/webpack.config.js
+++ b/superset-frontend/webpack.config.js
@@ -426,6 +426,7 @@ const config = {
modifyVars: {
'root-entry-name': 'default',
},
+ math: 'always',
},
},
},
diff --git a/superset/config.py b/superset/config.py
index 89fbdf35a05a3..fece8505a9e28 100644
--- a/superset/config.py
+++ b/superset/config.py
@@ -564,6 +564,10 @@ class D3TimeFormat(TypedDict, total=False):
# If on, you'll want to add "https://avatars.slack-edge.com" to the list of allowed
# domains in your TALISMAN_CONFIG
"SLACK_ENABLE_AVATARS": False,
+ # Adds a switch to the navbar to enable/disable the dark theme
+ # This is used for development to expose what is dynamic (css-in-js) vs
+ # what is managed by `.less` files.
+ "DARK_THEME_SWITCH": True,
}
# ------------------------------