Skip to content

Commit

Permalink
fix(explorer): transparency of header and blockheader (#2422)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sstraatemans
sstraatemans authored Jul 19, 2024
1 parent d51494a commit 0450bf3
Show file tree
Hide file tree
Showing 9 changed files with 329 additions and 74 deletions.
5 changes: 5 additions & 0 deletions .changeset/witty-melons-pretend.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@kadena/explorer': patch
---

fix transparency of the header
14 changes: 12 additions & 2 deletions packages/apps/explorer/src/components/block-table/block-header/block-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import ValueLoader from '@/components/loading-skeleton/value-loader/value-loader
import { Grid, Stack, Text } from '@kadena/kode-ui';
import classNames from 'classnames';
import React from 'react';
import { blockGridStyle, blockWrapperClass } from '../block-table.css';
import {
blockGridStyle,
blockHeaderClass,
blockWrapperClass,
} from '../block-table.css';
import { columnTitleClass, headerColumnStyle } from './block-header.css';

interface IBlockTableHeaderProps {
Expand All @@ -23,7 +27,13 @@ const BlockTableHeader: React.FC<IBlockTableHeaderProps> = ({
isLoading,
}) => {
return (
<Grid className={classNames(blockGridStyle, blockWrapperClass)}>
<Grid
className={classNames(
blockGridStyle,
blockWrapperClass,
blockHeaderClass,
)}
>
{startColumns.map((column, index) => (
<Stack key={index} className={headerColumnStyle}>
<Text as="p" variant="body" size="small" className={columnTitleClass}>
Expand Down
8 changes: 8 additions & 0 deletions packages/apps/explorer/src/components/block-table/block-table.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ export const blockWrapperClass = style([
borderWidth: 'hairline',
borderStyle: 'solid',
borderColor: 'base.subtle',
backgroundColor: 'overlay.default',
}),
]);

export const blockHeaderClass = style([
atoms({
backgroundColor: 'overlay.default',
borderColor: 'base.bold',
}),
]);

Expand Down
6 changes: 2 additions & 4 deletions packages/apps/explorer/src/components/header/styles.css.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { atoms, responsiveStyle, tokens } from '@kadena/kode-ui/styles';
import { atoms, responsiveStyle, token, tokens } from '@kadena/kode-ui/styles';
import { style } from '@vanilla-extract/css';
import { $$pageWidth } from '../layout/styles.css';

Expand All @@ -7,9 +7,7 @@ export const headerClass = style([
padding: 'sm',
}),
{
backgroundColor:
tokens.kda.foundation.color.background.surfaceHighContrast.default,

backgroundColor: token('color.background.overlay.default'),
zIndex: tokens.kda.foundation.zIndex.overlay,
},

Expand Down
1 change: 1 addition & 0 deletions packages/apps/explorer/src/components/search/search-component/search-component.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export const editingBoxClass = style([
fontSize: 'md',
position: 'absolute',
fontFamily: 'primaryFont',
backgroundColor: 'overlay.default',
}),
{
top: '45px',
Expand Down
167 changes: 129 additions & 38 deletions packages/libs/kode-ui/src/styles/tokens/contract.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,21 @@ export const tokens = createThemeContract({
* @dark `"24px"`
*/
xxl: '',
/**
* @light `"3px"`
* @dark `"3px"`
*/
'xs-outline': '',
/**
* @light `"5px"`
* @dark `"5px"`
*/
'sm-outline': '',
/**
* @light `"7px"`
* @dark `"7px"`
*/
'md-outline': '',
/**
* @light `"999rem"`
* @dark `"999rem"`
Expand Down Expand Up @@ -673,6 +688,28 @@ export const tokens = createThemeContract({
*/
toast: '',
},
effect: {
shadow: {
/**
* This is the shadow 1 description
* @light `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
* @dark `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
*/
level1: '',
/**
* This is the shadow 2 description
* @light `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
* @dark `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
*/
level2: '',
/**
* This is the shadow 3 description updated
* @light `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
* @dark `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
*/
level3: '',
},
},
color: {
accent: {
/**
Expand Down Expand Up @@ -833,6 +870,23 @@ export const tokens = createThemeContract({
* @dark {@link tokens.kda.foundation.color.neutral.n5@alpha80}
*/
default: '',
/**
* @light {@link tokens.kda.foundation.color.neutral.n0}
* @dark {@link tokens.kda.foundation.color.neutral.n5}
*/
solid: '',
},
overlay: {
/**
* @light {@link tokens.kda.foundation.color.neutral.n0@alpha95}
* @dark {@link tokens.kda.foundation.color.neutral.n5@alpha95}
*/
default: '',
/**
* @light {@link tokens.kda.foundation.color.neutral.n0}
* @dark {@link tokens.kda.foundation.color.neutral.n5}
*/
'@hover': '',
},
surface: {
/**
Expand Down Expand Up @@ -869,6 +923,16 @@ export const tokens = createThemeContract({
* @dark {@link tokens.kda.foundation.color.brand.primary.n5}
*/
default: '',
/**
* @light {@link tokens.kda.foundation.color.brand.primary.n1}
* @dark {@link tokens.kda.foundation.color.brand.primary.n1}
*/
subtle: '',
/**
* @light {@link tokens.kda.foundation.color.brand.primary.n0}
* @dark {@link tokens.kda.foundation.color.brand.primary.n0}
*/
subtlest: '',
/**
* @light {@link tokens.kda.foundation.color.brand.primary.n10}
* @dark {@link tokens.kda.foundation.color.brand.primary.n10}
Expand All @@ -890,6 +954,16 @@ export const tokens = createThemeContract({
* @dark {@link tokens.kda.foundation.color.brand.primary.n95}
*/
default: '',
/**
* @light {@link tokens.kda.foundation.color.brand.primary.n99}
* @dark {@link tokens.kda.foundation.color.brand.primary.n99}
*/
subtle: '',
/**
* @light {@link tokens.kda.foundation.color.brand.primary.n100}
* @dark {@link tokens.kda.foundation.color.brand.primary.n100}
*/
subtlest: '',
/**
* @light {@link tokens.kda.foundation.color.brand.primary.n90}
* @dark {@link tokens.kda.foundation.color.brand.primary.n90}
Expand All @@ -908,11 +982,21 @@ export const tokens = createThemeContract({
},
},
secondary: {
/**
* @light {@link tokens.kda.foundation.color.brand.secondary.n5}
* @dark {@link tokens.kda.foundation.color.brand.secondary.n5}
*/
default: '',
/**
* @light {@link tokens.kda.foundation.color.brand.secondary.n1}
* @dark {@link tokens.kda.foundation.color.brand.secondary.n1}
*/
default: '',
subtle: '',
/**
* @light {@link tokens.kda.foundation.color.brand.secondary.n0}
* @dark {@link tokens.kda.foundation.color.brand.secondary.n0}
*/
subtlest: '',
/**
* @light {@link tokens.kda.foundation.color.brand.secondary.n5}
* @dark {@link tokens.kda.foundation.color.brand.secondary.n5}
Expand All @@ -929,11 +1013,21 @@ export const tokens = createThemeContract({
*/
'@active': '',
inverse: {
/**
* @light {@link tokens.kda.foundation.color.brand.secondary.n95}
* @dark {@link tokens.kda.foundation.color.brand.secondary.n95}
*/
default: '',
/**
* @light {@link tokens.kda.foundation.color.brand.secondary.n99}
* @dark {@link tokens.kda.foundation.color.brand.secondary.n99}
*/
default: '',
subtle: '',
/**
* @light {@link tokens.kda.foundation.color.brand.secondary.n100}
* @dark {@link tokens.kda.foundation.color.brand.secondary.n100}
*/
subtlest: '',
/**
* @light {@link tokens.kda.foundation.color.brand.secondary.n95}
* @dark {@link tokens.kda.foundation.color.brand.secondary.n95}
Expand Down Expand Up @@ -1398,6 +1492,13 @@ export const tokens = createThemeContract({
'@disabled': '',
},
},
skeleton: {
/**
* @light {@link tokens.kda.foundation.color.neutral.n10}
* @dark {@link tokens.kda.foundation.color.neutral.n20@alpha80}
*/
default: '',
},
},
border: {
base: {
Expand Down Expand Up @@ -2879,6 +2980,12 @@ export const tokens = createThemeContract({
* @dark `"#131e2bcc"`
*/
'n5@alpha80': '',
/**
* [generated]
* @light `"#e4e5e5f2"`
* @dark `"#131e2bf2"`
*/
'n5@alpha95': '',
/**
* [generated]
* @light `"#d2d4d6cc"`
Expand Down Expand Up @@ -2915,6 +3022,12 @@ export const tokens = createThemeContract({
* @dark `"#e4e5e5cc"`
*/
'n95@alpha80': '',
/**
* [generated]
* @light `"#131e2bf2"`
* @dark `"#e4e5e5f2"`
*/
'n95@alpha95': '',
/**
* [generated]
* @light `"#020e1b00"`
Expand Down Expand Up @@ -4783,42 +4896,6 @@ export const tokens = createThemeContract({
},
},
},
effect: {
shadow: {
/**
* This is the shadow 1 description
* @light `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
* @dark `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
*/
level1: '',
/**
* This is the shadow 2 description
* @light `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
* @dark `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
*/
level2: '',
/**
* This is the shadow 3 description updated
* @light `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
* @dark `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
*/
level3: '',
},
},
layout: {
content: {
/**
* @light `"33.75rem"`
* @dark `"33.75rem"`
*/
minWidth: '',
/**
* @light `"42.5rem"`
* @dark `"42.5rem"`
*/
maxWidth: '',
},
},
icon: {
size: {
/**
Expand Down Expand Up @@ -4858,6 +4935,20 @@ export const tokens = createThemeContract({
xxl: '',
},
},
layout: {
content: {
/**
* @light `"33.75rem"`
* @dark `"33.75rem"`
*/
minWidth: '',
/**
* @light `"42.5rem"`
* @dark `"42.5rem"`
*/
maxWidth: '',
},
},
typography: {
family: {
/**
Expand Down
Loading

0 comments on commit 0450bf3

Please sign in to comment.