feat: add Claudette theme to examples

superset-frontend/package-lock.json

@@ -61644,7 +61644,7 @@
         "@storybook/types": "8.4.7",
         "@types/react-loadable": "^5.5.11",
         "core-js": "3.40.0",
-        "gh-pages": "^6.2.0",
+        "gh-pages": "^6.3.0",
         "jquery": "^3.7.1",
         "memoize-one": "^5.2.1",
         "react": "^17.0.2",

superset-frontend/packages/superset-ui-core/src/theme/exampleThemes.ts

@@ -57,5 +57,206 @@ const exampleThemes: Record<string, SerializableThemeConfig> = {
     },
     algorithm: ThemeAlgorithm.DARK,
   },
+  claudette: {
+    algorithm: 'dark',
+    token: {
+      colorPrimary: '#C15F3C',
+      colorPrimaryHover: '#d16b48',
+      colorPrimaryActive: '#a84f30',
+      colorBgBase: '#1a1a1a',
+      colorBgContainer: '#2a2a2a',
+      colorBgElevated: '#323232',
+      colorBgLayout: '#0f0f0f',
+      colorBgSpotlight: '#323232',
+      colorText: '#F4F3EE',
+      colorTextSecondary: '#B1ADA1',
+      colorTextTertiary: '#8a8680',
+      colorTextQuaternary: '#6b6862',
+      colorTextPlaceholder: '#B1ADA1',
+      colorTextLightSolid: '#F4F3EE',
+      colorBorder: '#404040',
+      colorBorderSecondary: '#303030',
+      colorFill: '#404040',
+      colorFillSecondary: '#353535',
+      colorFillTertiary: '#2a2a2a',
+      colorFillQuaternary: '#1f1f1f',
+      colorFillAlter: '#323232',
+      colorIcon: '#B1ADA1',
+      colorIconHover: '#F4F3EE',
+      fontFamily:
+        "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu'",
+      fontFamilyCode:
+        "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+      fontSize: 14,
+      borderRadius: 6,
+      borderRadiusLG: 8,
+      wireframe: false,
+    },
+  },
+  figmate: {
+    algorithm: 'light',
+    token: {
+      colorPrimary: '#0d99ff',
+      colorPrimaryHover: '#3dadff',
+      colorPrimaryActive: '#0085e6',
+      colorInfo: '#4c74f4',
+      colorInfoHover: '#6b8af5',
+      colorInfoActive: '#2d5af2',
+      colorSuccess: '#00d2aa',
+      colorSuccessHover: '#1adbba',
+      colorSuccessActive: '#00c299',
+      colorWarning: '#ffad33',
+      colorWarningHover: '#ffbf5c',
+      colorWarningActive: '#ff9900',
+      colorError: '#ff5757',
+      colorErrorHover: '#ff7a7a',
+      colorErrorActive: '#ff3333',
+      colorBgBase: '#ffffff',
+      colorBgContainer: '#fafafa',
+      colorBgElevated: '#ffffff',
+      colorBgLayout: '#f5f5f5',
+      colorText: '#1a1a1a',
+      colorTextSecondary: '#666666',
+      colorTextTertiary: '#999999',
+      colorTextQuaternary: '#cccccc',
+      colorTextPlaceholder: '#999999',
+      colorBorder: '#e6e6e6',
+      colorBorderSecondary: '#f0f0f0',
+      colorFill: '#f0f0f0',
+      colorFillSecondary: '#f5f5f5',
+      colorFillTertiary: '#fafafa',
+      colorFillQuaternary: '#ffffff',
+      colorIcon: '#666666',
+      colorIconHover: '#333333',
+      fontFamily:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+      fontFamilyCode:
+        '"SF Mono", Monaco, Inconsolata, "Roboto Mono", monospace',
+      fontSize: 14,
+      fontSizeLG: 16,
+      fontSizeXL: 20,
+      borderRadius: 8,
+      borderRadiusLG: 12,
+      borderRadiusSM: 6,
+      lineHeight: 1.5,
+      wireframe: false,
+      motion: true,
+      motionDurationSlow: '0.3s',
+      motionDurationMid: '0.2s',
+      motionDurationFast: '0.1s',
+    },
+  },
+  hubert: {
+    algorithm: 'dark',
+    token: {
+      colorPrimary: '#276EF1',
+      colorPrimaryHover: '#4285f4',
+      colorPrimaryActive: '#1557d6',
+      colorInfo: '#276EF1',
+      colorInfoHover: '#4285f4',
+      colorInfoActive: '#1557d6',
+      colorSuccess: '#3AA76D',
+      colorSuccessHover: '#4db87d',
+      colorSuccessActive: '#2d9657',
+      colorWarning: '#FFC043',
+      colorWarningHover: '#ffcd66',
+      colorWarningActive: '#e6ac26',
+      colorError: '#D44333',
+      colorErrorHover: '#dd5a4c',
+      colorErrorActive: '#bf3526',
+      colorBgBase: '#000000',
+      colorBgContainer: '#1a1a1a',
+      colorBgElevated: '#2a2a2a',
+      colorBgLayout: '#000000',
+      colorBgSpotlight: '#333333',
+      colorText: '#ffffff',
+      colorTextSecondary: '#cccccc',
+      colorTextTertiary: '#999999',
+      colorTextQuaternary: '#666666',
+      colorTextPlaceholder: '#999999',
+      colorTextLightSolid: '#ffffff',
+      colorBorder: '#333333',
+      colorBorderSecondary: '#1a1a1a',
+      colorFill: '#1a1a1a',
+      colorFillSecondary: '#2a2a2a',
+      colorFillTertiary: '#333333',
+      colorFillQuaternary: '#404040',
+      colorFillAlter: '#2a2a2a',
+      colorIcon: '#cccccc',
+      colorIconHover: '#ffffff',
+      fontFamily:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
+      fontFamilyCode:
+        '"SF Mono", Monaco, Inconsolata, "Roboto Mono", monospace',
+      fontSize: 14,
+      fontSizeLG: 16,
+      fontSizeXL: 20,
+      fontWeightStrong: 600,
+      borderRadius: 4,
+      borderRadiusLG: 6,
+      borderRadiusSM: 2,
+      lineHeight: 1.4,
+      lineWidthBold: 2,
+      wireframe: false,
+      motion: true,
+      motionDurationSlow: '0.3s',
+      motionDurationMid: '0.2s',
+      motionDurationFast: '0.1s',
+    },
+  },
+  bnb: {
+    algorithm: 'light',
+    token: {
+      colorPrimary: '#FF5A5F',
+      colorPrimaryHover: '#FF7479',
+      colorPrimaryActive: '#E5464B',
+      colorInfo: '#29696B',
+      colorInfoHover: '#3D7D7F',
+      colorInfoActive: '#1F5557',
+      colorSuccess: '#5BCACE',
+      colorSuccessHover: '#7DD4D8',
+      colorSuccessActive: '#49B6BA',
+      colorWarning: '#F4B02A',
+      colorWarningHover: '#F6C054',
+      colorWarningActive: '#E2A01E',
+      colorError: '#C32F0E',
+      colorErrorHover: '#D54428',
+      colorErrorActive: '#A8280C',
+      colorBgBase: '#ffffff',
+      colorBgContainer: '#fafafa',
+      colorBgElevated: '#ffffff',
+      colorBgLayout: '#f7f7f7',
+      colorText: '#222222',
+      colorTextSecondary: '#484848',
+      colorTextTertiary: '#767676',
+      colorTextQuaternary: '#b0b0b0',
+      colorTextPlaceholder: '#767676',
+      colorBorder: '#e8e8e8',
+      colorBorderSecondary: '#f0f0f0',
+      colorFill: '#f7f7f7',
+      colorFillSecondary: '#fafafa',
+      colorFillTertiary: '#fcfcfc',
+      colorFillQuaternary: '#ffffff',
+      colorIcon: '#767676',
+      colorIconHover: '#484848',
+      fontFamily:
+        'Circular, Circular Air Pro, Airbnb Cereal, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto',
+      fontFamilyCode:
+        '"SF Mono", Monaco, Inconsolata, "Roboto Mono", monospace',
+      fontSize: 14,
+      fontSizeLG: 16,
+      fontSizeXL: 20,
+      fontWeightStrong: 600,
+      borderRadius: 8,
+      borderRadiusLG: 12,
+      borderRadiusSM: 4,
+      lineHeight: 1.5,
+      wireframe: false,
+      motion: true,
+      motionDurationSlow: '0.3s',
+      motionDurationMid: '0.2s',
+      motionDurationFast: '0.1s',
+    },
+  },
 };
 export default exampleThemes;