You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2025/05/15 07:24:22 UTC

(superset) branch no_antd_v4_less_less created (now e749a2449a)

This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a change to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git


      at e749a2449a fix save dashboard form

This branch includes the following new commits:

     new 3038d73f01 feat: less less is more
     new 240e615e11 remove cosmo and more less
     new 34abc8c067 fix DatabaseModal
     new ef3f2ef5e2 CollapseLabelInModal
     new 10c3baddb3 Merge branch 'template_less' into no_antd_v4_less_less
     new 37e5d7c84f Merge branch 'no_antd_v4' into no_antd_v4_less_less
     new 6f07924246 merge no_antd_v4
     new 8e190c68e9 border-radius on markdown native dash comp
     new a3657fb7b5 removing top-level less on body
     new fc14abac42 removing more less
     new e4bd9ee9d8 stripping less
     new c5d054a839 removing more stuff
     new e749a2449a fix save dashboard form

The 13 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



(superset) 05/13: Merge branch 'template_less' into no_antd_v4_less_less

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 10c3baddb3558ea39a95121991bf9ef8829cc487
Merge: ef3f2ef5e2 5a67713f3f
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Tue May 13 08:37:34 2025 -0700

    Merge branch 'template_less' into no_antd_v4_less_less

 .../BigNumber/BigNumberPeriodOverPeriod/index.ts   |  1 +
 .../src/BigNumber/BigNumberTotal/index.ts          |  1 +
 .../src/BigNumber/BigNumberWithTrendline/index.ts  |  1 +
 .../plugin-chart-echarts/src/Sankey/index.ts       |  2 +-
 .../plugin-chart-echarts/src/Timeseries/index.ts   |  1 +
 .../dashboard/components/gridComponents/Row.jsx    |  6 +++-
 superset-frontend/src/dashboard/util/isEmbedded.ts | 26 +++++++++++++++++
 superset/examples/bart_lines.py                    |  8 ++---
 superset/examples/birth_names.py                   |  6 ++--
 superset/examples/country_map.py                   |  8 ++---
 superset/examples/energy.py                        |  6 ++--
 superset/examples/flights.py                       | 12 ++++----
 superset/examples/helpers.py                       | 34 ++++++++++++++++++++++
 superset/examples/long_lat.py                      |  8 ++---
 superset/examples/multiformat_time_series.py       |  8 +++--
 superset/examples/paris.py                         |  6 ++--
 superset/examples/random_time_series.py            |  5 ++--
 superset/examples/sf_population_polygons.py        |  6 ++--
 superset/examples/world_bank.py                    |  5 ++--
 19 files changed, 107 insertions(+), 43 deletions(-)


(superset) 03/13: fix DatabaseModal

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 34abc8c067f65a4b73efac8e7c45ffef273a3d34
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 12 17:46:59 2025 -0700

    fix DatabaseModal
---
 superset-frontend/src/features/databases/DatabaseModal/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
index 742dc723ab..b3fb1102c0 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
@@ -130,8 +130,6 @@ const engineSpecificAlertMapping = {
 
 const TabsStyled = styled(Tabs)`
   .antd5-tabs-content {
-    display: flex;
-    width: 100%;
     overflow: inherit;
 
     & > .antd5-tabs-tabpane {


(superset) 07/13: merge no_antd_v4

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 6f07924246359f94fab7056f77f5099e288ac61d
Merge: 37e5d7c84f a774ea8167
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Wed May 14 22:50:51 2025 -0700

    merge no_antd_v4

 .github/workflows/docker.yml                       |    3 +
 .github/workflows/superset-e2e.yml                 |   10 +-
 .github/workflows/superset-frontend.yml            |    9 +-
 superset-embedded-sdk/src/index.ts                 |   14 +
 superset-frontend/.eslintrc.js                     |    8 +-
 superset-frontend/.storybook/preview.jsx           |    2 +-
 .../cypress/e2e/dashboard/drilltodetail.test.ts    |    2 +-
 .../e2e/dashboard/horizontalFilterBar.test.ts      |    4 +-
 .../cypress/e2e/dashboard/nativeFilters.test.ts    |    2 +
 .../e2e/explore/visualizations/table.test.ts       |   32 +-
 superset-frontend/jest.config.js                   |    4 +-
 superset-frontend/package-lock.json                | 1420 ++++++--------------
 superset-frontend/package.json                     |    5 +-
 .../plugin-chart/templates/package-lock.erb        |    2 +-
 .../superset-ui-chart-controls/package.json        |    2 +-
 .../src/components/Dropdown.tsx                    |    2 +-
 .../src/components/InfoTooltipWithTrigger.tsx      |    2 +-
 .../src/components/Menu.tsx                        |    2 +-
 .../src/components/MetricOption.tsx                |    2 +-
 .../src/components/SQLPopover.tsx                  |    4 +-
 .../src/components/Select.tsx                      |    2 +-
 .../src/components/Tooltip.tsx                     |    4 +-
 .../components/RadioButtonControl.tsx              |    2 +-
 .../packages/superset-ui-core/package.json         |    2 +-
 .../src/chart-composition/tooltip/TooltipTable.tsx |    2 +-
 .../superset-ui-core/src/theme/Theme.test.tsx      |    2 +-
 .../packages/superset-ui-core/src/theme/Theme.tsx  |    2 +-
 .../packages/superset-ui-core/src/theme/index.tsx  |    2 +-
 .../packages/superset-ui-core/src/theme/types.ts   |    4 +-
 .../superset-ui-core/src/theme/utils.test.ts       |    2 +-
 .../packages/superset-ui-core/src/theme/utils.ts   |    2 +-
 .../superset-ui-core/src/ui-overrides/types.ts     |    2 +-
 .../packages/superset-ui-demo/package.json         |    2 +-
 .../storybook/shared/components/VerifyCORS.tsx     |    2 +-
 .../storybook/stories/ExampleApp.stories.jsx       |   11 +-
 .../plugins/plugin-chart-cartodiagram/package.json |    2 +-
 .../src/util/controlPanelUtil.tsx                  |    5 +-
 .../plugins/plugin-chart-table/package.json        |    4 +-
 .../plugin-chart-table/src/DataTable/DataTable.tsx |    2 +-
 .../src/DataTable/components/GlobalFilter.tsx      |    3 +-
 .../DataTable/components/SearchSelectDropdown.tsx  |    4 +-
 .../src/DataTable/components/SelectPageSize.tsx    |    2 +-
 .../plugins/plugin-chart-table/src/TableChart.tsx  |    4 +-
 superset-frontend/src/components/Alert/index.tsx   |    2 +-
 superset-frontend/src/components/Alert/types.ts    |    2 +-
 .../src/components/AntdThemeProvider/index.tsx     |    2 +-
 .../src/components/AutoComplete/index.tsx          |    2 +-
 .../src/components/AutoComplete/types.ts           |    2 +-
 superset-frontend/src/components/Avatar/index.tsx  |    2 +-
 superset-frontend/src/components/Avatar/types.ts   |    2 +-
 superset-frontend/src/components/Badge/index.tsx   |    2 +-
 superset-frontend/src/components/Badge/types.ts    |    2 +-
 .../src/components/Breadcrumb/index.tsx            |    2 +-
 .../src/components/Breadcrumb/types.ts             |    2 +-
 superset-frontend/src/components/Button/index.tsx  |    2 +-
 superset-frontend/src/components/Button/types.ts   |    2 +-
 superset-frontend/src/components/Card/index.tsx    |    2 +-
 superset-frontend/src/components/Card/types.ts     |    2 +-
 .../components/Chart/DrillBy/DrillByMenuItems.tsx  |    2 +-
 .../DrillDetail/DrillDetailTableControls.test.tsx  |    2 +-
 .../components/Chart/MenuItemWithTruncation.tsx    |    2 +-
 .../src/components/Checkbox/index.tsx              |    2 +-
 superset-frontend/src/components/Checkbox/types.ts |    2 +-
 .../src/components/Collapse/index.tsx              |    4 +
 superset-frontend/src/components/Collapse/types.ts |    2 +-
 .../src/components/CronPicker/index.tsx            |    8 +-
 .../Datasource/ChangeDatasourceModal.tsx           |    2 +-
 .../components/Datasource/CollectionTable.test.tsx |   13 +-
 .../Datasource/DatasourceEditor.test.jsx           |  327 ++---
 .../Datasource/DatasourceEditorCurrency.test.jsx   |  185 +++
 .../Datasource/DatasourceEditorRTL.test.jsx        |  125 ++
 .../src/components/DatePicker/index.tsx            |    2 +-
 .../src/components/DatePicker/types.ts             |    4 +-
 superset-frontend/src/components/Divider/index.tsx |    2 +-
 superset-frontend/src/components/Divider/types.ts  |    2 +-
 .../src/components/Dropdown/index.tsx              |    2 +-
 superset-frontend/src/components/Dropdown/types.ts |    2 +-
 .../src/components/DropdownButton/index.tsx        |    2 +-
 .../src/components/DropdownButton/types.ts         |    2 +-
 .../src/components/EmptyState/Empty.tsx            |    4 +-
 superset-frontend/src/components/Flex/index.tsx    |    2 +-
 superset-frontend/src/components/Flex/types.ts     |    2 +-
 superset-frontend/src/components/Form/Form.tsx     |    2 +-
 superset-frontend/src/components/Form/FormItem.tsx |    6 +-
 superset-frontend/src/components/Form/types.ts     |    2 +-
 superset-frontend/src/components/Grid/index.tsx    |    2 +-
 superset-frontend/src/components/Grid/types.ts     |    4 +-
 superset-frontend/src/components/Image/index.tsx   |    2 +-
 superset-frontend/src/components/Input/index.tsx   |    2 +-
 superset-frontend/src/components/Input/types.ts    |    6 +-
 superset-frontend/src/components/Layout/index.tsx  |    2 +-
 superset-frontend/src/components/Layout/types.ts   |    2 +-
 superset-frontend/src/components/List/index.ts     |    2 +-
 superset-frontend/src/components/List/types.ts     |    6 +-
 superset-frontend/src/components/Menu/index.tsx    |    4 +-
 superset-frontend/src/components/Modal/Modal.tsx   |    2 +-
 superset-frontend/src/components/Modal/types.ts    |    2 +-
 superset-frontend/src/components/Popover/index.tsx |    4 +-
 .../src/components/ProgressBar/index.tsx           |    4 +-
 superset-frontend/src/components/Radio/index.tsx   |    4 +-
 .../src/components/Select/AsyncSelect.tsx          |    2 +-
 superset-frontend/src/components/Select/Select.tsx |    2 +-
 .../src/components/Select/constants.ts             |    2 +-
 superset-frontend/src/components/Select/styles.tsx |    2 +-
 superset-frontend/src/components/Select/types.ts   |    2 +-
 .../src/components/Skeleton/Skeleton.stories.tsx   |    2 +-
 .../src/components/Skeleton/index.tsx              |    2 +-
 superset-frontend/src/components/Slider/index.tsx  |    4 +-
 superset-frontend/src/components/Space/index.tsx   |    2 +-
 superset-frontend/src/components/Spin/index.tsx    |    2 +-
 .../src/components/Steps/Steps.stories.tsx         |    2 +-
 superset-frontend/src/components/Steps/index.tsx   |    2 +-
 superset-frontend/src/components/Switch/index.tsx  |    2 +-
 .../src/components/Table/Table.test.tsx            |    2 +-
 .../src/components/Table/VirtualTable.tsx          |    4 +-
 superset-frontend/src/components/Table/index.tsx   |   12 +-
 .../Table/utils/InteractiveTableUtils.ts           |    2 +-
 .../src/components/TableCollection/index.tsx       |    2 +-
 superset-frontend/src/components/Tabs/Tabs.tsx     |    2 +-
 superset-frontend/src/components/Tag/index.tsx     |    6 +-
 .../src/components/ThemeEditor/index.tsx           |    2 +-
 superset-frontend/src/components/Tooltip/index.tsx |    2 +-
 superset-frontend/src/components/Tooltip/types.ts  |    2 +-
 superset-frontend/src/components/Tree/index.tsx    |    4 +-
 .../src/components/TreeSelect/index.tsx            |    2 +-
 .../src/components/Typography/index.tsx            |    6 +-
 superset-frontend/src/components/Upload/index.tsx  |    4 +-
 .../PropertiesModal/PropertiesModal.test.tsx       |    2 +-
 .../FilterBar/CrossFilters/CrossFilter.test.tsx    |    2 +-
 .../FilterBar/CrossFilters/CrossFilterTag.test.tsx |    4 +-
 .../CrossFilters/VerticalCollapse.test.tsx         |    2 +-
 .../FiltersConfigModal/FilterTitlePane.tsx         |    2 +
 superset-frontend/src/embedded/index.tsx           |   18 +-
 .../src/explore/components/EmbedCodeContent.jsx    |    2 +-
 .../explore/components/PropertiesModal/index.tsx   |    5 +-
 .../components/controls/CheckboxControl.jsx        |    2 +-
 .../ConditionalFormattingControl.tsx               |   10 +-
 .../LayerConfigsControl/GeoStylerWrapper.tsx       |    2 +-
 .../controls/LayerConfigsControl/types.ts          |   13 +-
 .../ZoomConfigControl/ZoomConfigControl.tsx        |    5 +-
 .../databases/DatabaseModal/index.test.tsx         |    3 +-
 .../src/features/databases/DatabaseModal/index.tsx |    5 +-
 .../src/features/databases/DatabaseModal/styles.ts |   19 -
 .../UploadDataModel/UploadDataModal.test.tsx       |   10 +-
 superset-frontend/src/features/home/RightMenu.tsx  |   28 +-
 superset-frontend/src/hooks/useLocale.ts           |   33 +-
 superset-frontend/src/types/bootstrapTypes.ts      |    2 +-
 superset-frontend/webpack.config.js                |    5 +-
 superset/config.py                                 |    2 +-
 superset/examples/helpers.py                       |    4 +-
 150 files changed, 1167 insertions(+), 1483 deletions(-)

diff --cc superset-frontend/src/components/Collapse/index.tsx
index d54e447bda,bf0d34c8b0..6ca478af17
--- a/superset-frontend/src/components/Collapse/index.tsx
+++ b/superset-frontend/src/components/Collapse/index.tsx
@@@ -15,9 -16,71 +15,13 @@@
   * specific language governing permissions and limitations
   * under the License.
   */
+ import { styled } from '@superset-ui/core';
+ import { Collapse as AntdCollapse } from 'antd';
+ import type { CollapseProps } from './types';
+ 
 -export const Collapse = styled((props: CollapseProps) => (
 -  <AntdCollapse {...props} />
 -))`
 -  ${({ modalMode }) =>
 -    modalMode &&
 -    `
 -      border-radius: 0;
 -      border-left: 0;
 -      border-right: 0;
 -    `}
 -  .antd5-collapse-item {
 -    .antd5-collapse-header {
 -      .antd5-collapse-arrow svg {
 -        transition: ${({ animateArrows }) =>
 -          animateArrows ? 'transform 0.24s' : 'none'};
 -      }
 +export { Typography } from 'src/components/Typography';
  
 -      ${({ expandIconPosition }) =>
 -        expandIconPosition &&
 -        expandIconPosition === 'right' &&
 -        `
 -            .anticon.anticon-right.antd5-collapse-arrow > svg {
 -              transform: rotate(90deg) !important;
 -            }
 -          `}
 -    }
 -
 -    ${({ ghost, bordered, theme }) =>
 -      ghost &&
 -      bordered &&
 -      `
 -        border-bottom: 1px solid ${theme.colorBorderSecondary};
 -      `}
 -    .antd5-collapse-content {
 -      color: ${({ theme }) => theme.colorText};
 -
 -      .antd5-collapse-content-box {
 -        .loading.inline {
 -          margin: ${({ theme }) => theme.sizeUnit * 12}px auto;
 -          display: block;
 -        }
 -      }
 -    }
 -  }
 -
 -  .hidden-collapse-header .antd5-collapse-header {
 -    display: none;
 -  }
 -
 -  .antd5-collapse-item-active {
 -    .antd5-collapse-header {
 -      ${({ expandIconPosition }) =>
 -        expandIconPosition &&
 -        expandIconPosition === 'right' &&
 -        `
 -            .anticon.anticon-right.antd5-collapse-arrow > svg {
 -              transform: rotate(-90deg) !important;
 -            }
 -          `}
 -    }
 -  }
 -`;
 -
 -export type { CollapseProps };
 +export type { CollapseProps } from './types';
 +export type { CollapseLabelInModalProps } from './CollapseLabelInModal';
 +export { CollapseLabelInModal } from './CollapseLabelInModal';
 +export { Collapse } from './Collapse';


(superset) 02/13: remove cosmo and more less

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 240e615e113086633afd07e1fdd7c3fad1db2109
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 12 14:59:55 2025 -0700

    remove cosmo and more less
---
 superset-frontend/package-lock.json                |   3 +-
 .../assets/stylesheets/less/cosmo/cosmoTheme.js    |  84 --
 .../assets/stylesheets/less/cosmo/variables.less   | 851 ---------------------
 .../stylesheets/less/cosmo/variables.less.hbs      | 851 ---------------------
 .../src/assets/stylesheets/less/variables.less     |   9 -
 .../src/assets/stylesheets/less/variables.less.hbs |   9 -
 .../src/assets/stylesheets/superset.less           |  71 --
 .../src/assets/stylesheets/superset.less.hbs       | 157 ----
 8 files changed, 2 insertions(+), 2033 deletions(-)

diff --git a/superset-frontend/package-lock.json b/superset-frontend/package-lock.json
index 1edc591ce3..6bae38d074 100644
--- a/superset-frontend/package-lock.json
+++ b/superset-frontend/package-lock.json
@@ -54002,7 +54002,8 @@
         "@superset-ui/legacy-preset-chart-nvd3": "*",
         "@superset-ui/plugin-chart-echarts": "*",
         "@superset-ui/plugin-chart-table": "*",
-        "@superset-ui/plugin-chart-word-cloud": "*"
+        "@superset-ui/plugin-chart-word-cloud": "*",
+        "antd-v5": "npm:antd@^5.18.0"
       }
     },
     "packages/superset-ui-demo/node_modules/@storybook/builder-webpack5": {
diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/cosmoTheme.js b/superset-frontend/src/assets/stylesheets/less/cosmo/cosmoTheme.js
deleted file mode 100644
index 817049da65..0000000000
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/cosmoTheme.js
+++ /dev/null
@@ -1,84 +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.
- */
-/* eslint-disable */
-(function () {
-  $(window).scroll(function () {
-    var top = $(document).scrollTop();
-    $('.splash').css({
-      'background-position': '0px -' + (top / 3).toFixed(2) + 'px',
-    });
-    if (top > 50) $('#home > .navbar').removeClass('navbar-transparent');
-    else $('#home > .navbar').addClass('navbar-transparent');
-  });
-
-  $("a[href='#']").click(function (e) {
-    e.preventDefault();
-  });
-
-  var $button = $(
-    "<div id='source-button' class='btn btn-primary btn-xs'>&lt; &gt;</div>",
-  ).click(function () {
-    var html = $(this).parent().html();
-    html = cleanSource(html);
-    $('#source-modal pre').text(html);
-    $('#source-modal').modal();
-  });
-
-  $('.bs-component [data-toggle="popover"]').popover();
-  $('.bs-component [data-toggle="tooltip"]').tooltip();
-
-  $('.bs-component').hover(
-    function () {
-      $(this).append($button);
-      $button.show();
-    },
-    function () {
-      $button.hide();
-    },
-  );
-
-  function cleanSource(html) {
-    html = html
-      .replace(/×/g, '&times;')
-      .replace(/«/g, '&laquo;')
-      .replace(/»/g, '&raquo;')
-      .replace(/←/g, '&larr;')
-      .replace(/→/g, '&rarr;');
-
-    var lines = html.split(/\n/);
-
-    lines.shift();
-    lines.splice(-1, 1);
-
-    var indentSize = lines[0].length - lines[0].trim().length,
-      re = new RegExp(' {' + indentSize + '}');
-
-    lines = lines.map(function (line) {
-      if (line.match(re)) {
-        line = line.substring(indentSize);
-      }
-
-      return line;
-    });
-
-    lines = lines.join('\n');
-
-    return lines;
-  }
-})();
diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less
deleted file mode 100644
index 6fa2dc07ae..0000000000
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less
+++ /dev/null
@@ -1,851 +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.
- */
-// Forked Cosmo 3.3.7
-// Variables
-// --------------------------------------------------
-
-// == Colors
-//
-// ## Gray and brand colors for use across Bootstrap.
-
-@gray-base: #141414; // 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>`.
-@body-bg: #ffffff;
-// ** Global text color on `<body>`.
-@text-color: #3d3d3d;
-
-// ** 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 `<body>`.
-@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 `<th>`s and `<td>`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
-//
-// ##
-
-// ** `<input>` background color
-@input-bg: @lightest; // superset-var
-// ** `<input disabled>` background color
-@input-bg-disabled: @gray-lighter;
-
-// ** Text color for `<input>`s
-@input-color: @text-color;
-// ** `<input>` border color
-@input-border: @gray-light; // superset-var
-
-// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
-// ** Default `.form-control` border radius
-// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`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: #858585; // superset-var
-// ** Tooltip background color
-@tooltip-bg: rgba(0,0,0,0.88);
-@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/cosmo/variables.less.hbs b/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs
deleted file mode 100644
index 4ba7da9ce6..0000000000
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/variables.less.hbs
+++ /dev/null
@@ -1,851 +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.
- */
-// 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>`.
-@body-bg: {{theme.colorBgContainer}};
-// ** Global text color on `<body>`.
-@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 `<body>`.
-@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 `<th>`s and `<td>`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
-//
-// ##
-
-// ** `<input>` background color
-@input-bg: @lightest; // superset-var
-// ** `<input disabled>` background color
-@input-bg-disabled: @gray-lighter;
-
-// ** Text color for `<input>`s
-@input-color: @text-color;
-// ** `<input>` border color
-@input-border: @gray-light; // superset-var
-
-// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
-// ** Default `.form-control` border radius
-// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`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/variables.less b/superset-frontend/src/assets/stylesheets/less/variables.less
index 6906946574..98f196c4f6 100644
--- a/superset-frontend/src/assets/stylesheets/less/variables.less
+++ b/superset-frontend/src/assets/stylesheets/less/variables.less
@@ -200,12 +200,3 @@
 /************************************************************************/
 @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/less/variables.less.hbs b/superset-frontend/src/assets/stylesheets/less/variables.less.hbs
index e6f7d0036a..fef44e5975 100644
--- a/superset-frontend/src/assets/stylesheets/less/variables.less.hbs
+++ b/superset-frontend/src/assets/stylesheets/less/variables.less.hbs
@@ -200,12 +200,3 @@
 /************************************************************************/
 @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/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
index 7bf8c27fff..fe5daa7dbc 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -42,10 +42,6 @@ input.form-control {
   background-color: @lightest;
 }
 
-.disabledButton {
-  pointer-events: none;
-}
-
 .col-left-fixed {
   width: 350px;
   position: absolute;
@@ -124,19 +120,6 @@ span.title-block {
   }
 }
 
-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,
@@ -229,23 +212,6 @@ table.table-no-hover tr:hover {
   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;
 
@@ -401,14 +367,6 @@ table.table-no-hover tr:hover {
   display: inline;
 }
 
-.form-actions-container button {
-  display: flex;
-
-  .caret {
-    margin: 0 8px;
-  }
-}
-
 .list-container .filter-action {
   margin: 10px 10px 0 10px;
   padding-bottom: 15px;
@@ -514,35 +472,6 @@ 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;
 }
diff --git a/superset-frontend/src/assets/stylesheets/superset.less.hbs b/superset-frontend/src/assets/stylesheets/superset.less.hbs
index 7bf8c27fff..0ad8c76adc 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less.hbs
+++ b/superset-frontend/src/assets/stylesheets/superset.less.hbs
@@ -22,40 +22,10 @@
 
 @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;
@@ -69,27 +39,6 @@ input.form-control {
   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;
 }
@@ -124,32 +73,6 @@ span.title-block {
   }
 }
 
-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;
@@ -161,32 +84,6 @@ img.viz-thumb-option {
   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;
@@ -229,23 +126,6 @@ table.table-no-hover tr:hover {
   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;
 
@@ -401,14 +281,6 @@ table.table-no-hover tr:hover {
   display: inline;
 }
 
-.form-actions-container button {
-  display: flex;
-
-  .caret {
-    margin: 0 8px;
-  }
-}
-
 .list-container .filter-action {
   margin: 10px 10px 0 10px;
   padding-bottom: 15px;
@@ -514,35 +386,6 @@ 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;
 }


(superset) 06/13: Merge branch 'no_antd_v4' into no_antd_v4_less_less

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 37e5d7c84f85f7823900e3bbd517b4cb506f9bdf
Merge: 10c3baddb3 516c916f38
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Tue May 13 08:39:34 2025 -0700

    Merge branch 'no_antd_v4' into no_antd_v4_less_less



(superset) 13/13: fix save dashboard form

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit e749a2449a3690b7b091584327082a4f942d456f
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Thu May 15 00:23:44 2025 -0700

    fix save dashboard form
---
 .../src/assets/stylesheets/superset.less.hbs       | 21 -------
 .../src/components/Datasource/DatasourceModal.tsx  |  1 +
 .../src/dashboard/components/SaveModal.tsx         | 72 ++++++++++++----------
 3 files changed, 42 insertions(+), 52 deletions(-)

diff --git a/superset-frontend/src/assets/stylesheets/superset.less.hbs b/superset-frontend/src/assets/stylesheets/superset.less.hbs
index 7843b4defd..b9b10ee82c 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less.hbs
+++ b/superset-frontend/src/assets/stylesheets/superset.less.hbs
@@ -34,34 +34,17 @@
   font-size: @font-size-s;
 }
 
-.widget-is-cached {
-  display: none;
-}
-
 .header span.label {
   margin-left: 5px;
   margin-right: 5px;
 }
 
-.notbtn {
-  cursor: default;
-  box-shadow: none;
-  border: 1px solid @gray;
-}
-
 .nvtooltip {
   table td {
     font-size: @font-size-s !important;
   }
 }
 
-img.viz-thumb-option {
-  width: 100px;
-  border: 1px solid @gray;
-  margin-right: 5px;
-  border-radius: @border-radius-large;
-}
-
 .editable-title input {
   outline: none;
   background: transparent;
@@ -164,10 +147,6 @@ img.viz-thumb-option {
   margin-left: 5px;
 }
 
-.m-l-10 {
-  margin-left: 10px;
-}
-
 .m-l-25 {
   margin-left: 25px;
 }
diff --git a/superset-frontend/src/components/Datasource/DatasourceModal.tsx b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
index ebd8a9190f..d87a5a9bc7 100644
--- a/superset-frontend/src/components/Datasource/DatasourceModal.tsx
+++ b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
@@ -326,6 +326,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
           <Button
             data-test="datasource-modal-cancel"
             buttonSize="small"
+            buttonStyle="secondary"
             className="m-r-5"
             onClick={onHide}
           >
diff --git a/superset-frontend/src/dashboard/components/SaveModal.tsx b/superset-frontend/src/dashboard/components/SaveModal.tsx
index c2c6c3816a..a248dc5140 100644
--- a/superset-frontend/src/dashboard/components/SaveModal.tsx
+++ b/superset-frontend/src/dashboard/components/SaveModal.tsx
@@ -19,8 +19,8 @@
 /* eslint-env browser */
 import { createRef, PureComponent } from 'react';
 import { Radio, RadioChangeEvent } from 'src/components/Radio';
-import { Button, Checkbox, Input, Divider } from 'src/components';
-import { t, JsonResponse } from '@superset-ui/core';
+import { Button, Checkbox, Form, Input, Divider, Space } from 'src/components';
+import { t, themeObject, JsonResponse } from '@superset-ui/core';
 
 import ModalTrigger, { ModalTriggerRef } from 'src/components/ModalTrigger';
 import {
@@ -160,56 +160,66 @@ class SaveModal extends PureComponent<SaveModalProps, SaveModalState> {
   }
 
   render() {
+    const { theme } = themeObject;
     return (
       <ModalTrigger
         ref={this.modal}
         triggerNode={this.props.triggerNode}
         modalTitle={t('Save dashboard')}
         modalBody={
-          <div>
-            <Radio
-              value={SAVE_TYPE_OVERWRITE}
-              onChange={this.handleSaveTypeChange}
-              checked={this.state.saveType === SAVE_TYPE_OVERWRITE}
-              disabled={!this.props.canOverwrite}
-            >
-              {t('Overwrite Dashboard [%s]', this.props.dashboardTitle)}
-            </Radio>
+          <Form layout="vertical">
+            <Form.Item>
+              <Radio
+                value={SAVE_TYPE_OVERWRITE}
+                onChange={this.handleSaveTypeChange}
+                checked={this.state.saveType === SAVE_TYPE_OVERWRITE}
+                disabled={!this.props.canOverwrite}
+              >
+                {t('Overwrite Dashboard [%s]', this.props.dashboardTitle)}
+              </Radio>
+            </Form.Item>
+
             <Divider />
-            <Radio
-              value={SAVE_TYPE_NEWDASHBOARD}
-              onChange={this.handleSaveTypeChange}
-              checked={this.state.saveType === SAVE_TYPE_NEWDASHBOARD}
-            >
-              {t('Save as:')}
-            </Radio>
-            <Input
-              type="text"
-              placeholder={t('[dashboard name]')}
-              value={this.state.newDashName}
-              onFocus={e => this.handleNameChange(e.target.value)}
-              onChange={e => this.handleNameChange(e.target.value)}
-            />
-            <div className="m-l-25 m-t-5">
+
+            <Form.Item style={{ marginBottom: theme.sizeUnit }}>
+              <Radio
+                value={SAVE_TYPE_NEWDASHBOARD}
+                onChange={this.handleSaveTypeChange}
+                checked={this.state.saveType === SAVE_TYPE_NEWDASHBOARD}
+              >
+                {t('Save as:')}
+              </Radio>
+            </Form.Item>
+
+            <Form.Item style={{ marginBottom: theme.sizeUnit }}>
+              <Input
+                placeholder={t('[dashboard name]')}
+                value={this.state.newDashName}
+                onFocus={e => this.handleNameChange(e.target.value)}
+                onChange={e => this.handleNameChange(e.target.value)}
+              />
+            </Form.Item>
+
+            <Form.Item>
               <Checkbox
                 checked={this.state.duplicateSlices}
                 onChange={() => this.toggleDuplicateSlices()}
               >
                 {t('also copy (duplicate) charts')}
               </Checkbox>
-            </div>
-          </div>
+            </Form.Item>
+          </Form>
         }
         modalFooter={
-          <div>
+          <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <Button
+              type="primary"
               data-test="modal-save-dashboard-button"
-              buttonStyle="primary"
               onClick={this.saveDashboard}
             >
               {t('Save')}
             </Button>
-          </div>
+          </Space>
         }
       />
     );


(superset) 01/13: feat: less less is more

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 3038d73f01e84d30628893a8287f4dd236005d76
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 12 14:51:29 2025 -0700

    feat: less less is more
---
 .../src/components/ControlHeader.tsx               |   1 -
 .../src/components/ControlSubSectionHeader.tsx     |   2 +-
 .../superset-ui-core/src/theme/GlobalStyles.tsx    |   7 +
 .../assets/stylesheets/less/cosmo/bootswatch.less  | 509 ---------------------
 .../stylesheets/less/cosmo/bootswatch.less.hbs     | 509 ---------------------
 .../src/assets/stylesheets/less/index.less         |   1 -
 .../src/assets/stylesheets/less/index.less.hbs     |   1 -
 .../src/assets/stylesheets/superset.less           |  28 ++
 .../src/explore/components/ControlHeader.tsx       |   1 +
 .../explore/components/ControlPanelsContainer.tsx  |   1 -
 .../controls/DatasourceControl/index.jsx           |   5 +-
 11 files changed, 39 insertions(+), 1026 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlHeader.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlHeader.tsx
index 65d52fe557..c64cd86a20 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlHeader.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlHeader.tsx
@@ -100,7 +100,6 @@ export function ControlHeader({
             tabIndex={0}
             onClick={onClick}
             className={labelClass}
-            style={{ cursor: onClick ? 'pointer' : '' }}
           >
             {label}
           </span>{' '}
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
index 06e8233725..f87c5130c6 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ControlSubSectionHeader.tsx
@@ -21,8 +21,8 @@ import { styled, css } from '@superset-ui/core';
 export const ControlSubSectionHeader = styled.div`
   ${({ theme }) => css`
     font-weight: ${theme.fontWeightStrong};
-    font-size: ${theme.fontSizeSM};
     margin-bottom: ${theme.sizeUnit}px;
+    font-size: ${theme.fontSizeSM}px;
   `}
 `;
 export default ControlSubSectionHeader;
diff --git a/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx b/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
index 7399ff0d0a..3f49e0ee0e 100644
--- a/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
@@ -32,6 +32,7 @@ export const GlobalStyles = () => {
         a {
           color: ${theme.colorLink};
         }
+        -webkit-font-smoothing: antialiased;
 
         h1,
         h2,
@@ -71,6 +72,12 @@ export const GlobalStyles = () => {
             padding: 5px 10px 6px;
           }
         }
+
+        // Overriding bootstrap styles
+        // TODO - remove bootstrap .less and delete this section
+        label {
+          font-weight: ${theme.fontWeightNormal};
+        }
       `}
     />
   );
diff --git a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less
deleted file mode 100644
index c9ece15bb6..0000000000
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less
+++ /dev/null
@@ -1,509 +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.
- */
-// 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/bootswatch.less.hbs b/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs
deleted file mode 100644
index c9ece15bb6..0000000000
--- a/superset-frontend/src/assets/stylesheets/less/cosmo/bootswatch.less.hbs
+++ /dev/null
@@ -1,509 +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.
- */
-// 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/index.less b/superset-frontend/src/assets/stylesheets/less/index.less
index fc91c477db..a2a9279550 100644
--- a/superset-frontend/src/assets/stylesheets/less/index.less
+++ b/superset-frontend/src/assets/stylesheets/less/index.less
@@ -21,7 +21,6 @@
 @import '~bootstrap/less/bootstrap.less';
 @import './fonts.less';
 @import './variables.less';
-@import './cosmo/bootswatch.less';
 
 html,
 body {
diff --git a/superset-frontend/src/assets/stylesheets/less/index.less.hbs b/superset-frontend/src/assets/stylesheets/less/index.less.hbs
index fc91c477db..a2a9279550 100644
--- a/superset-frontend/src/assets/stylesheets/less/index.less.hbs
+++ b/superset-frontend/src/assets/stylesheets/less/index.less.hbs
@@ -21,7 +21,6 @@
 @import '~bootstrap/less/bootstrap.less';
 @import './fonts.less';
 @import './variables.less';
-@import './cosmo/bootswatch.less';
 
 html,
 body {
diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
index 1c244ccaed..7bf8c27fff 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -38,6 +38,10 @@ i {
   white-space: nowrap;
 }
 
+input.form-control {
+  background-color: @lightest;
+}
+
 .disabledButton {
   pointer-events: none;
 }
@@ -183,6 +187,30 @@ 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;
diff --git a/superset-frontend/src/explore/components/ControlHeader.tsx b/superset-frontend/src/explore/components/ControlHeader.tsx
index 0ecfca0220..81abac0c9d 100644
--- a/superset-frontend/src/explore/components/ControlHeader.tsx
+++ b/superset-frontend/src/explore/components/ControlHeader.tsx
@@ -120,6 +120,7 @@ const ControlHeader: FC<ControlHeaderProps> = ({
           css={(theme: SupersetTheme) => css`
             margin-bottom: ${theme.sizeUnit * 0.5}px;
             position: relative;
+            font-size: ${theme.fontSizeSM}px;
           `}
         >
           {leftNode && <span>{leftNode} </span>}
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index 993aacf0a7..c44b56aae5 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -562,7 +562,6 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
           css={(theme: SupersetTheme) => css`
             font-size: ${theme.fontSize}px;
             line-height: 1.3;
-            font-weight: ${theme.fontWeightMedium};
           `}
         >
           {label}
diff --git a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
index 916c38303e..7e3a572399 100644
--- a/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx
@@ -84,7 +84,7 @@ const Styles = styled.div`
     margin: ${({ theme }) => 2 * theme.sizeUnit}px;
   }
   .antd5-dropdown-trigger {
-    margin-left: ${({ theme }) => 2 * theme.sizeUnit}px;
+    margin-left: ${({ theme }) => theme.sizeUnit}px;
   }
   .btn-group .open .dropdown-toggle {
     box-shadow: none;
@@ -102,9 +102,8 @@ const Styles = styled.div`
   .title-select {
     flex: 1 1 100%;
     display: inline-block;
-    padding: ${({ theme }) => theme.sizeUnit * 2}px;
+    padding: ${({ theme }) => theme.sizeUnit * 2}px 0px;
     border-radius: ${({ theme }) => theme.borderRadius}px;
-    text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;


(superset) 11/13: stripping less

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit e4bd9ee9d8dfc1d984f1f998468449990174c831
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Wed May 14 23:59:28 2025 -0700

    stripping less
---
 .../src/assets/stylesheets/superset.less           | 117 ---------------------
 .../src/assets/stylesheets/superset.less.hbs       | 117 ---------------------
 .../src/components/Datasource/DatasourceEditor.jsx |   6 +-
 3 files changed, 5 insertions(+), 235 deletions(-)

diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
index 0ad8c76adc..a00ebd9db5 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -18,7 +18,6 @@
  */
 @import './less/index.less';
 @import './less/variables.less';
-@import './less/index.less';
 
 @datasource-sql-expression-width: 315px;
 
@@ -35,10 +34,6 @@
   font-size: @font-size-s;
 }
 
-.slice_info {
-  cursor: pointer;
-}
-
 .widget-is-cached {
   display: none;
 }
@@ -54,11 +49,6 @@
   border: 1px solid @gray;
 }
 
-hr {
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
 span.title-block {
   background-color: @gray-bg;
   border-radius: @border-radius-large;
@@ -80,10 +70,6 @@ img.viz-thumb-option {
   border-radius: @border-radius-large;
 }
 
-.select2-drop.bigdrop .select2-results {
-  max-height: 700px;
-}
-
 .editable-title input {
   outline: none;
   background: transparent;
@@ -213,18 +199,6 @@ img.viz-thumb-option {
   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;
 }
@@ -286,17 +260,6 @@ img.viz-thumb-option {
   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%;
@@ -313,83 +276,3 @@ iframe {
 .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;
-}
-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/assets/stylesheets/superset.less.hbs b/superset-frontend/src/assets/stylesheets/superset.less.hbs
index 0ad8c76adc..a00ebd9db5 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less.hbs
+++ b/superset-frontend/src/assets/stylesheets/superset.less.hbs
@@ -18,7 +18,6 @@
  */
 @import './less/index.less';
 @import './less/variables.less';
-@import './less/index.less';
 
 @datasource-sql-expression-width: 315px;
 
@@ -35,10 +34,6 @@
   font-size: @font-size-s;
 }
 
-.slice_info {
-  cursor: pointer;
-}
-
 .widget-is-cached {
   display: none;
 }
@@ -54,11 +49,6 @@
   border: 1px solid @gray;
 }
 
-hr {
-  margin-top: 15px;
-  margin-bottom: 15px;
-}
-
 span.title-block {
   background-color: @gray-bg;
   border-radius: @border-radius-large;
@@ -80,10 +70,6 @@ img.viz-thumb-option {
   border-radius: @border-radius-large;
 }
 
-.select2-drop.bigdrop .select2-results {
-  max-height: 700px;
-}
-
 .editable-title input {
   outline: none;
   background: transparent;
@@ -213,18 +199,6 @@ img.viz-thumb-option {
   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;
 }
@@ -286,17 +260,6 @@ img.viz-thumb-option {
   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%;
@@ -313,83 +276,3 @@ iframe {
 .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;
-}
-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/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index defd724488..f8c1474dff 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -1033,7 +1033,11 @@ class DatasourceEditor extends PureComponent {
             <div>{t('Click the lock to prevent further changes.')}</div>
           )}
         </EditLockContainer>
-        <div className="m-l-10 m-t-20 m-b-10">
+        <div
+          css={theme => css`
+            margin-top: ${theme.sizeUnit * 3}px;
+          `}
+        >
           {DATASOURCE_TYPES_ARR.map(type => (
             <Radio
               key={type.key}


(superset) 12/13: removing more stuff

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit c5d054a839e35b227484479e4e9fabf3b60919f7
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Thu May 15 00:02:48 2025 -0700

    removing more stuff
---
 .../src/assets/stylesheets/superset.less           | 88 ----------------------
 .../src/assets/stylesheets/superset.less.hbs       | 88 ----------------------
 2 files changed, 176 deletions(-)

diff --git a/superset-frontend/src/assets/stylesheets/superset.less b/superset-frontend/src/assets/stylesheets/superset.less
index a00ebd9db5..7843b4defd 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -49,14 +49,6 @@
   border: 1px solid @gray;
 }
 
-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;
@@ -124,30 +116,11 @@ img.viz-thumb-option {
     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;
-    }
   }
 }
 
@@ -199,67 +172,6 @@ img.viz-thumb-option {
   margin-left: 25px;
 }
 
-.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;
-}
-
-.list-container .filter-action {
-  margin: 10px 10px 0 10px;
-  padding-bottom: 15px;
-}
-
 iframe {
   border: none;
   width: 100%;
diff --git a/superset-frontend/src/assets/stylesheets/superset.less.hbs b/superset-frontend/src/assets/stylesheets/superset.less.hbs
index a00ebd9db5..7843b4defd 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less.hbs
+++ b/superset-frontend/src/assets/stylesheets/superset.less.hbs
@@ -49,14 +49,6 @@
   border: 1px solid @gray;
 }
 
-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;
@@ -124,30 +116,11 @@ img.viz-thumb-option {
     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;
-    }
   }
 }
 
@@ -199,67 +172,6 @@ img.viz-thumb-option {
   margin-left: 25px;
 }
 
-.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;
-}
-
-.list-container .filter-action {
-  margin: 10px 10px 0 10px;
-  padding-bottom: 15px;
-}
-
 iframe {
   border: none;
   width: 100%;


(superset) 08/13: border-radius on markdown native dash comp

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 8e190c68e95940605bd3ce4189e46776882b92e5
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Wed May 14 23:08:24 2025 -0700

    border-radius on markdown native dash comp
---
 superset-frontend/packages/superset-ui-core/src/theme/index.tsx     | 2 +-
 superset-frontend/src/components/Collapse/Collapse.tsx              | 2 +-
 superset-frontend/src/components/Collapse/index.tsx                 | 6 ------
 .../src/dashboard/components/gridComponents/Markdown.jsx            | 1 +
 4 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/theme/index.tsx b/superset-frontend/packages/superset-ui-core/src/theme/index.tsx
index cb5fd38720..770c07dda0 100644
--- a/superset-frontend/packages/superset-ui-core/src/theme/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/theme/index.tsx
@@ -52,7 +52,7 @@ export function useTheme() {
 const styled = emotionStyled;
 
 // launching in in dark mode for now while iterating
-const themeObject = Theme.fromConfig({});
+const themeObject = Theme.fromConfig({ algorithm: 'dark' });
 
 const { theme } = themeObject;
 const supersetTheme = theme;
diff --git a/superset-frontend/src/components/Collapse/Collapse.tsx b/superset-frontend/src/components/Collapse/Collapse.tsx
index 4f991b6a0f..4f1eb3a37b 100644
--- a/superset-frontend/src/components/Collapse/Collapse.tsx
+++ b/superset-frontend/src/components/Collapse/Collapse.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 import { styled } from '@superset-ui/core';
-import { Collapse as AntdCollapse } from 'antd-v5';
+import { Collapse as AntdCollapse } from 'antd';
 import type { CollapseProps } from './types';
 
 export const Collapse = styled((props: CollapseProps) => (
diff --git a/superset-frontend/src/components/Collapse/index.tsx b/superset-frontend/src/components/Collapse/index.tsx
index 6ca478af17..6bba675f2f 100644
--- a/superset-frontend/src/components/Collapse/index.tsx
+++ b/superset-frontend/src/components/Collapse/index.tsx
@@ -15,12 +15,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled } from '@superset-ui/core';
-import { Collapse as AntdCollapse } from 'antd';
-import type { CollapseProps } from './types';
-
-export { Typography } from 'src/components/Typography';
-
 export type { CollapseProps } from './types';
 export type { CollapseLabelInModalProps } from './CollapseLabelInModal';
 export { CollapseLabelInModal } from './CollapseLabelInModal';
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx b/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
index d186c67034..663d45f9d5 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx
@@ -103,6 +103,7 @@ const MarkdownStyles = styled.div`
       .dashboard-component-chart-holder {
         overflow-y: auto;
         overflow-x: hidden;
+        border-radius: ${theme.borderRadius}px;
       }
 
       .dashboard--editing & {


(superset) 10/13: removing more less

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit fc14abac42956f8c4f812bcf3386ef8529862c68
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Wed May 14 23:30:42 2025 -0700

    removing more less
---
 .../superset-ui-core/src/theme/GlobalStyles.tsx    |  6 ++
 .../packages/superset-ui-core/src/theme/index.tsx  |  2 +-
 .../src/assets/stylesheets/less/index.less         |  8 --
 .../src/assets/stylesheets/less/index.less.hbs     | 24 ------
 .../assets/stylesheets/reactable-pagination.less   | 61 ---------------
 .../stylesheets/reactable-pagination.less.hbs      | 61 ---------------
 .../src/assets/stylesheets/superset.less           | 86 ----------------------
 7 files changed, 7 insertions(+), 241 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx b/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
index 355453e5dc..9835af933c 100644
--- a/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
@@ -78,6 +78,12 @@ export const GlobalStyles = () => {
         label {
           font-weight: ${theme.fontWeightNormal};
         }
+        #app {
+          flex: 1 1 auto;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+        }
       `}
     />
   );
diff --git a/superset-frontend/packages/superset-ui-core/src/theme/index.tsx b/superset-frontend/packages/superset-ui-core/src/theme/index.tsx
index 770c07dda0..b984b6ada7 100644
--- a/superset-frontend/packages/superset-ui-core/src/theme/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/theme/index.tsx
@@ -52,7 +52,7 @@ export function useTheme() {
 const styled = emotionStyled;
 
 // launching in in dark mode for now while iterating
-const themeObject = Theme.fromConfig({ algorithm: 'dark' });
+const themeObject = Theme.fromConfig({ algorithm: 'default' });
 
 const { theme } = themeObject;
 const supersetTheme = theme;
diff --git a/superset-frontend/src/assets/stylesheets/less/index.less b/superset-frontend/src/assets/stylesheets/less/index.less
index 7e519abd90..bbd7791391 100644
--- a/superset-frontend/src/assets/stylesheets/less/index.less
+++ b/superset-frontend/src/assets/stylesheets/less/index.less
@@ -20,11 +20,3 @@
 
 @import '~bootstrap/less/bootstrap.less';
 @import './fonts.less';
-@import './variables.less';
-
-#app {
-  flex: 1 1 auto;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
diff --git a/superset-frontend/src/assets/stylesheets/less/index.less.hbs b/superset-frontend/src/assets/stylesheets/less/index.less.hbs
index a2a9279550..bbd7791391 100644
--- a/superset-frontend/src/assets/stylesheets/less/index.less.hbs
+++ b/superset-frontend/src/assets/stylesheets/less/index.less.hbs
@@ -20,27 +20,3 @@
 
 @import '~bootstrap/less/bootstrap.less';
 @import './fonts.less';
-@import './variables.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/reactable-pagination.less b/superset-frontend/src/assets/stylesheets/reactable-pagination.less
deleted file mode 100644
index 9b48d2143a..0000000000
--- a/superset-frontend/src/assets/stylesheets/reactable-pagination.less
+++ /dev/null
@@ -1,61 +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 './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/reactable-pagination.less.hbs b/superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs
deleted file mode 100644
index 9b48d2143a..0000000000
--- a/superset-frontend/src/assets/stylesheets/reactable-pagination.less.hbs
+++ /dev/null
@@ -1,61 +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 './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 b/superset-frontend/src/assets/stylesheets/superset.less
index fe5daa7dbc..0ad8c76adc 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -22,36 +22,10 @@
 
 @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;
-}
-
-.col-left-fixed {
-  width: 350px;
-  position: absolute;
-  float: left;
-}
-
-.col-offset {
-  margin-left: 365px;
-}
-
 .slice_description {
   padding: 8px;
   margin: 5px 0;
@@ -65,27 +39,6 @@ input.form-control {
   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;
 }
@@ -120,19 +73,6 @@ span.title-block {
   }
 }
 
-.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;
@@ -144,32 +84,6 @@ img.viz-thumb-option {
   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;


(superset) 09/13: removing top-level less on body

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit a3657fb7b56cc8776bac072e4eb7435671c419d1
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Wed May 14 23:11:09 2025 -0700

    removing top-level less on body
---
 superset-frontend/src/assets/stylesheets/less/index.less | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/superset-frontend/src/assets/stylesheets/less/index.less b/superset-frontend/src/assets/stylesheets/less/index.less
index a2a9279550..7e519abd90 100644
--- a/superset-frontend/src/assets/stylesheets/less/index.less
+++ b/superset-frontend/src/assets/stylesheets/less/index.less
@@ -22,22 +22,6 @@
 @import './fonts.less';
 @import './variables.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;


(superset) 04/13: CollapseLabelInModal

Posted by ma...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch no_antd_v4_less_less
in repository https://gitbox.apache.org/repos/asf/superset.git

commit ef3f2ef5e2b26c9b984eb78dc2e2ed32766ea839
Author: Maxime Beauchemin <ma...@gmail.com>
AuthorDate: Mon May 12 19:39:57 2025 -0700

    CollapseLabelInModal
---
 .../superset-ui-core/src/theme/GlobalStyles.tsx    |  2 +-
 .../Collapse/{index.tsx => Collapse.tsx}           |  3 +-
 .../Collapse/CollapseLabelInModal.tsx}             | 64 ++++++++----------
 .../src/components/Collapse/index.tsx              | 75 ++--------------------
 superset-frontend/src/components/index.ts          |  7 +-
 .../components/ExploreChartHeader/index.jsx        |  8 +--
 .../src/features/alerts/AlertReportModal.tsx       | 12 ++--
 .../databases/DatabaseModal/ExtraOptions.tsx       | 69 +++++++++-----------
 8 files changed, 79 insertions(+), 161 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx b/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
index 3f49e0ee0e..355453e5dc 100644
--- a/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx
@@ -27,12 +27,12 @@ export const GlobalStyles = () => {
         body {
           background-color: ${theme.colorBgBase};
           color: ${theme.colorText};
+          -webkit-font-smoothing: antialiased;
         }
 
         a {
           color: ${theme.colorLink};
         }
-        -webkit-font-smoothing: antialiased;
 
         h1,
         h2,
diff --git a/superset-frontend/src/components/Collapse/index.tsx b/superset-frontend/src/components/Collapse/Collapse.tsx
similarity index 95%
copy from superset-frontend/src/components/Collapse/index.tsx
copy to superset-frontend/src/components/Collapse/Collapse.tsx
index 2a61c088f3..4f991b6a0f 100644
--- a/superset-frontend/src/components/Collapse/index.tsx
+++ b/superset-frontend/src/components/Collapse/Collapse.tsx
@@ -2,8 +2,7 @@
  * 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
+ * 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
  *
diff --git a/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx b/superset-frontend/src/components/Collapse/CollapseLabelInModal.tsx
similarity index 53%
rename from superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
rename to superset-frontend/src/components/Collapse/CollapseLabelInModal.tsx
index a19f82597e..1a7926989d 100644
--- a/superset-frontend/src/features/alerts/components/ValidatedPanelHeader.tsx
+++ b/superset-frontend/src/components/Collapse/CollapseLabelInModal.tsx
@@ -2,8 +2,7 @@
  * 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
+ * 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
  *
@@ -16,62 +15,55 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { t, useTheme } from '@superset-ui/core';
-import { Icons } from 'src/components/Icons';
-import { Space } from 'src/components/Space';
+import { useTheme } from '@superset-ui/core';
 import { Typography } from 'src/components/Typography';
 
-const ValidatedPanelHeader = ({
+interface CollapseLabelInModalProps {
+  title: React.ReactNode;
+  subtitle: React.ReactNode;
+  validateCheckStatus?: boolean;
+  testId?: string;
+}
+
+export const CollapseLabelInModal: React.FC<CollapseLabelInModalProps> = ({
   title,
   subtitle,
-  validateCheckStatus,
+  validateCheckStatus = false,
   testId,
-}: {
-  title: string;
-  subtitle: string;
-  validateCheckStatus: boolean;
-  testId?: string;
-}): JSX.Element => {
+}) => {
   const theme = useTheme();
-  const checkmark = (
-    <Icons.CheckCircleOutlined
-      iconSize="m"
-      iconColor={theme.colors.success.base}
-    />
-  );
   return (
-    <div>
-      <Space size="small" data-test={testId}>
-        <Typography.Title
-          level={5}
-          style={{
-            margin: 0,
-          }}
-        >
-          {t(title)}
-        </Typography.Title>
-        {validateCheckStatus ? (
-          <span>{checkmark}</span>
-        ) : (
+    <div data-test={testId}>
+      <Typography.Title
+        style={{
+          marginTop: 0,
+          marginBottom: theme.sizeUnit / 2,
+          fontSize: theme.fontSizeLG,
+        }}
+      >
+        {title}{' '}
+        {validateCheckStatus && (
           <span
             style={{
-              color: theme.colors.error.base,
+              color: theme.colorErrorText,
               fontSize: theme.fontSizeLG,
             }}
           >
             *
           </span>
         )}
-      </Space>
+      </Typography.Title>
       <Typography.Paragraph
         style={{
           margin: 0,
+          fontSize: theme.fontSizeSM,
+          color: theme.colorTextDescription,
         }}
       >
-        {subtitle ? t(subtitle) : undefined}
+        {subtitle}
       </Typography.Paragraph>
     </div>
   );
 };
 
-export default ValidatedPanelHeader;
+export type { CollapseLabelInModalProps };
diff --git a/superset-frontend/src/components/Collapse/index.tsx b/superset-frontend/src/components/Collapse/index.tsx
index 2a61c088f3..d54e447bda 100644
--- a/superset-frontend/src/components/Collapse/index.tsx
+++ b/superset-frontend/src/components/Collapse/index.tsx
@@ -2,8 +2,7 @@
  * 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
+ * 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
  *
@@ -16,71 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { styled } from '@superset-ui/core';
-import { Collapse as AntdCollapse } from 'antd-v5';
-import type { CollapseProps } from './types';
+export { Typography } from 'src/components/Typography';
 
-export const Collapse = styled((props: CollapseProps) => (
-  <AntdCollapse {...props} />
-))`
-  ${({ modalMode }) =>
-    modalMode &&
-    `
-      border-radius: 0;
-      border-left: 0;
-      border-right: 0;
-    `}
-  .antd5-collapse-item {
-    .antd5-collapse-header {
-      .antd5-collapse-arrow svg {
-        transition: ${({ animateArrows }) =>
-          animateArrows ? 'transform 0.24s' : 'none'};
-      }
-
-      ${({ expandIconPosition }) =>
-        expandIconPosition &&
-        expandIconPosition === 'right' &&
-        `
-            .anticon.anticon-right.antd5-collapse-arrow > svg {
-              transform: rotate(90deg) !important;
-            }
-          `}
-    }
-
-    ${({ ghost, bordered, theme }) =>
-      ghost &&
-      bordered &&
-      `
-        border-bottom: 1px solid ${theme.colorBorderSecondary};
-      `}
-    .antd5-collapse-content {
-      color: ${({ theme }) => theme.colorText};
-
-      .antd5-collapse-content-box {
-        .loading.inline {
-          margin: ${({ theme }) => theme.sizeUnit * 12}px auto;
-          display: block;
-        }
-      }
-    }
-  }
-
-  .hidden-collapse-header .antd5-collapse-header {
-    display: none;
-  }
-
-  .antd5-collapse-item-active {
-    .antd5-collapse-header {
-      ${({ expandIconPosition }) =>
-        expandIconPosition &&
-        expandIconPosition === 'right' &&
-        `
-            .anticon.anticon-right.antd5-collapse-arrow > svg {
-              transform: rotate(-90deg) !important;
-            }
-          `}
-    }
-  }
-`;
-
-export type { CollapseProps };
+export type { CollapseProps } from './types';
+export type { CollapseLabelInModalProps } from './CollapseLabelInModal';
+export { CollapseLabelInModal } from './CollapseLabelInModal';
+export { Collapse } from './Collapse';
diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts
index 4ce5156314..7cef78f5a6 100644
--- a/superset-frontend/src/components/index.ts
+++ b/superset-frontend/src/components/index.ts
@@ -63,7 +63,12 @@ export {
   type CheckboxProps,
   type CheckboxChangeEvent,
 } from './Checkbox';
-export { Collapse, type CollapseProps } from './Collapse';
+export {
+  Collapse,
+  type CollapseProps,
+  CollapseLabelInModal,
+  type CollapseLabelInModalProps,
+} from './Collapse';
 export {
   ConfirmStatusChange,
   type ConfirmStatusChangeProps,
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index e3bcc49a41..77e09a33b6 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -21,7 +21,7 @@ import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import { Tooltip, AlteredSliceTag, Button, DeleteModal } from 'src/components';
-import { css, logging, SupersetClient, t, useTheme } from '@superset-ui/core';
+import { css, logging, SupersetClient, t } from '@superset-ui/core';
 import { chartPropShape } from 'src/dashboard/util/propShapes';
 import { Icons } from 'src/components/Icons';
 import PropertiesModal from 'src/explore/components/PropertiesModal';
@@ -83,7 +83,6 @@ export const ExploreChartHeader = ({
   saveDisabled,
   metadata,
 }) => {
-  const theme = useTheme();
   const dispatch = useDispatch();
   const { latestQueryFormData, sliceFormData } = chart;
   const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState(false);
@@ -238,11 +237,8 @@ export const ExploreChartHeader = ({
                 disabled={saveDisabled}
                 data-test="query-save-button"
                 css={saveButtonStyles}
+                icon={<Icons.SaveOutlined />}
               >
-                <Icons.SaveOutlined
-                  iconSize="l"
-                  iconColor={theme.colors.primary.dark2}
-                />
                 {t('Save')}
               </Button>
             </div>
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index e4de3f5965..c9da9a0c9d 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -47,6 +47,7 @@ import {
   Select,
   AsyncSelect,
   Checkbox,
+  CollapseLabelInModal,
   TreeSelect,
   type CheckboxChangeEvent,
 } from 'src/components';
@@ -82,7 +83,6 @@ import { Typography } from 'src/components/Typography';
 import NumberInput from './components/NumberInput';
 import { AlertReportCronScheduler } from './components/AlertReportCronScheduler';
 import { NotificationMethod } from './components/NotificationMethod';
-import ValidatedPanelHeader from './components/ValidatedPanelHeader';
 import { buildErrorTooltipMessage } from './buildErrorTooltipMessage';
 
 const TIMEOUT_MIN = 1;
@@ -1470,7 +1470,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
           {
             key: 'general',
             label: (
-              <ValidatedPanelHeader
+              <CollapseLabelInModal
                 title={TRANSLATIONS.GENERAL_TITLE}
                 subtitle={t(
                   'Set up basic details, such as name and description.',
@@ -1556,7 +1556,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
                 {
                   key: 'condition',
                   label: (
-                    <ValidatedPanelHeader
+                    <CollapseLabelInModal
                       title={TRANSLATIONS.ALERT_CONDITION_TITLE}
                       subtitle={t(
                         'Define the database, SQL query, and triggering conditions for alert.',
@@ -1667,7 +1667,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
           {
             key: 'contents',
             label: (
-              <ValidatedPanelHeader
+              <CollapseLabelInModal
                 title={
                   isReport
                     ? TRANSLATIONS.REPORT_CONTENTS_TITLE
@@ -1835,7 +1835,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
           {
             key: 'schedule',
             label: (
-              <ValidatedPanelHeader
+              <CollapseLabelInModal
                 title={TRANSLATIONS.SCHEDULE_TITLE}
                 subtitle={t(
                   'Define delivery schedule, timezone, and frequency settings.',
@@ -1918,7 +1918,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
           {
             key: 'notification',
             label: (
-              <ValidatedPanelHeader
+              <CollapseLabelInModal
                 title={TRANSLATIONS.NOTIFICATION_TITLE}
                 subtitle={t('Choose notification method and recipients.')}
                 validateCheckStatus={
diff --git a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
index ce30a04205..bf743c0c2c 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx
@@ -22,7 +22,6 @@ import {
   t,
   DatabaseConnectionExtension,
   isFeatureEnabled,
-  SupersetTheme,
   useTheme,
   FeatureFlag,
 } from '@superset-ui/core';
@@ -31,9 +30,9 @@ import {
   Checkbox,
   Collapse,
   InfoTooltip,
+  CollapseLabelInModal,
   type CheckboxChangeEvent,
 } from 'src/components';
-import { Typography } from 'src/components/Typography';
 import {
   StyledInputContainer,
   StyledJsonEditor,
@@ -99,12 +98,12 @@ const ExtraOptions = ({
         {
           key: 'sql-lab',
           label: (
-            <div>
-              <Typography.Title level={4}>{t('SQL Lab')}</Typography.Title>
-              <Typography.Paragraph>
-                {t('Adjust how this database will interact with SQL Lab.')}
-              </Typography.Paragraph>
-            </div>
+            <CollapseLabelInModal
+              title={t('SQL Lab')}
+              subtitle={t(
+                'Adjust how this database will interact with SQL Lab.',
+              )}
+            />
           ),
           children: (
             <>
@@ -289,12 +288,10 @@ const ExtraOptions = ({
         {
           key: 'performance',
           label: (
-            <div>
-              <Typography.Title level={4}>{t('Performance')}</Typography.Title>
-              <Typography.Paragraph>
-                {t('Adjust performance settings of this database.')}
-              </Typography.Paragraph>
-            </div>
+            <CollapseLabelInModal
+              title={t('Performance')}
+              subtitle={t('Adjust performance settings of this database.')}
+            />
           ),
           children: (
             <>
@@ -416,12 +413,10 @@ const ExtraOptions = ({
         {
           key: 'security',
           label: (
-            <div>
-              <Typography.Title level={4}>{t('Security')}</Typography.Title>
-              <Typography.Paragraph>
-                {t('Add extra connection information.')}
-              </Typography.Paragraph>
-            </div>
+            <CollapseLabelInModal
+              title={t('Security')}
+              subtitle={t('Add extra connection information.')}
+            />
           ),
           children: (
             <>
@@ -544,20 +539,16 @@ const ExtraOptions = ({
                   ? ('icon' as const)
                   : ('disabled' as const),
                 label: (
-                  <div>
-                    {ExtraExtensionLogo && <ExtraExtensionLogo />}
-                    <span
-                      css={(theme: SupersetTheme) => ({
-                        fontSize: theme.fontSizeLG,
-                        fontWeight: theme.fontWeightStrong,
-                      })}
-                    >
-                      {extraExtension?.title}
-                    </span>
-                    <p>
-                      <ExtensionDescription />
-                    </p>
-                  </div>
+                  <CollapseLabelInModal
+                    key={extraExtension?.title}
+                    title={
+                      <>
+                        {ExtraExtensionLogo && <ExtraExtensionLogo />}
+                        {extraExtension?.title}
+                      </>
+                    }
+                    subtitle={<ExtensionDescription />}
+                  />
                 ),
                 children: (
                   <StyledInputContainer css={no_margin_bottom}>
@@ -573,12 +564,10 @@ const ExtraOptions = ({
         {
           key: 'other',
           label: (
-            <div>
-              <Typography.Title level={4}>{t('Other')}</Typography.Title>
-              <Typography.Paragraph>
-                {t('Additional settings.')}
-              </Typography.Paragraph>
-            </div>
+            <CollapseLabelInModal
+              title={t('Other')}
+              subtitle={t('Additional settings.')}
+            />
           ),
           children: (
             <>