Skip to content

Commit

Permalink
spillovers
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistercrunch
mistercrunch committed Jan 7, 2025
1 parent 98b7f3d commit ce19a06
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 109 deletions.
32 changes: 16 additions & 16 deletions superset-frontend/packages/superset-ui-core/src/style/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,24 +59,14 @@ const defaultTheme = {
label: '#879399',
help: '#737373',
},
grayscale: {
base: '#666666',
dark1: '#323232',
dark2: '#000000',
light1: '#B2B2B2',
light2: '#F0F0F0',
light3: '#F7F7F7',
light4: '#FFFFFF',
light5: '#FFFFFF',
},
primary: {
base: '#20A7C9',
dark1: '#1A85A0',
dark2: '#156378',
light1: '#79CADE',
light2: '#E9F6F9',
light3: '#F3F8FA',
light4: '#F3F8FA',
light2: '#A5DAE9',
light3: '#D2EDF4',
light4: '#E9F6F9',
light5: '#F3F8FA',
},
secondary: {
Expand All @@ -85,11 +75,21 @@ const defaultTheme = {
dark2: '#282E4A',
dark3: '#1B1F31',
light1: '#8E94B0',
light2: '#ECEEF2',
light3: '#F5F5F8',
light4: '#F5F5F8',
light2: '#B4B8CA',
light3: '#D9DBE4',
light4: '#ECEEF2',
light5: '#F5F5F8',
},
grayscale: {
base: '#666666',
dark1: '#323232',
dark2: '#000000',
light1: '#B2B2B2',
light2: '#E0E0E0',
light3: '#F0F0F0',
light4: '#F7F7F7',
light5: '#FFFFFF',
},
error: {
base: '#E04355',
dark1: '#A7323F',
Expand Down
105 changes: 16 additions & 89 deletions ...-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/Theme.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@
*
* 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
* "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.
*/
Expand All @@ -25,96 +25,23 @@ export default {

export const ThemeColors = () => {
const { colors } = supersetTheme;

// Define tones to be displayed in columns
const tones = [
'dark2',
'dark1',
'base',
'light1',
'light2',
'light3',
'light4',
'light5',
];
const colorTypes = [
'primary',
'secondary',
'grayscale',
'error',
'warning',
'alert',
'success',
'info',
];
return (
return Object.keys(colors).map(collection => (
<div>
<h1>Theme Colors</h1>
<table
style={{ borderCollapse: 'collapse', width: '100%', textAlign: 'left' }}
>
<thead>
<tr>
<th style={{ border: '1px solid #ddd', padding: '8px' }}>
Category
</th>
{tones.map(tone => (
<th
key={tone}
style={{ border: '1px solid #ddd', padding: '8px' }}
>
{tone}
</th>
))}
</tr>
</thead>
<tbody>
{colorTypes.map(category => (
<tr key={category}>
<td style={{ border: '1px solid #ddd', padding: '8px' }}>
<strong>{category}</strong>
<h2>{collection}</h2>
<table style={{ width: '300px' }}>
{Object.keys(colors[collection]).map(k => {
const hex = colors[collection][k];
return (
<tr>
<td>{k}</td>
<td>
<code>{hex}</code>
</td>
{tones.map(tone => {
const color = colors[category][tone];
return (
<td
key={tone}
style={{
border: '1px solid #ddd',
padding: '8px',
backgroundColor: color || '#fff',
}}
>
{color ? <code>{color}</code> : '-'}
</td>
);
})}
<td style={{ width: '150px', backgroundColor: hex }} />
</tr>
))}
</tbody>
);
})}
</table>
<h3>
text.label: <code>{colors.text.label}</code>
</h3>
<div style={{ color: `#${colors.text.label}` }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</div>
<h3>
text.help: <code>{colors.text.help}</code>
</h3>
<div style={{ color: `#${colors.text.help}` }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</div>
<h3>The supersetTheme object</h3>
<code>
<pre>{JSON.stringify(supersetTheme, null, 2)}</pre>
</code>
</div>
);
));
};
8 changes: 4 additions & 4 deletions superset-frontend/src/components/CachedLabel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import { useState, MouseEventHandler, FC } from 'react';
import { t } from '@superset-ui/core';
import Label from 'src/components/Label';
import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
import { TooltipContent } from './TooltipContent';

export interface CacheLabelProps {
Expand All @@ -35,7 +34,7 @@ const CacheLabel: FC<CacheLabelProps> = ({
onClick,
cachedTimestamp,
}) => {
const [hovered] = useState(false);
const [hovered, setHovered] = useState(false);

const labelType = hovered ? 'primary' : 'default';
return (
Expand All @@ -47,9 +46,10 @@ const CacheLabel: FC<CacheLabelProps> = ({
className={`${className}`}
type={labelType}
onClick={onClick}
icon={<Icons.Refresh iconSize="m" />}
onMouseOver={() => setHovered(true)}
onMouseOut={() => setHovered(false)}
>
{t('Cached')}
{t('Cached')} <i className="fa fa-refresh" />
</Label>
</Tooltip>
);
Expand Down

0 comments on commit ce19a06

Please sign in to comment.