Skip to content

Commit 796e9be

Browse files
tenphiCopilot
tenphi
and
Copilot
authored
feat: new var syntax (#739)
Co-authored-by: Copilot <[email protected]>
1 parent d9bc1b5 commit 796e9be

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+157
-146
lines changed

‎.changeset/seven-tomatoes-arrive.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cube-dev/ui-kit": minor
3+
---
4+
5+
New syntax for custom properties: `$` instead of `@`. The old syntax is now deprecated.

‎.changeset/violet-shirts-juggle.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cube-dev/ui-kit": patch
3+
---
4+
5+
Fix color for chart type icons.

‎src/components/GridProvider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const GridElement = tasty({
1010
});
1111

1212
const COLUMN_WIDTH =
13-
'((@grid-width - (@column-gap * (@columns-amount - 1))) / @columns-amount)';
13+
'(($grid-width - ($column-gap * ($columns-amount - 1))) / $columns-amount)';
1414

1515
export interface CubeGridProviderProps {
1616
children: ReactNode;

‎src/components/Root.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const DEFAULT_STYLES = {
3030
display: 'block',
3131
preset: 't3',
3232
...Object.keys(TOKENS).reduce((map, key) => {
33-
map[`@${key}`] = TOKENS[key];
33+
map[`$${key}`] = TOKENS[key];
3434

3535
return map;
3636
}, {}),

‎src/components/actions/Button/Button.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -101,20 +101,20 @@ export const DEFAULT_BUTTON_STYLES = {
101101
},
102102
width: {
103103
'': 'initial',
104-
'[data-size="xsmall"] & single-icon': '@size-xs @size-xs',
105-
'[data-size="small"] & single-icon': '@size-sm @size-sm',
106-
'[data-size="medium"] & single-icon': '@size-md @size-md',
107-
'[data-size="large"] & single-icon': '@size-lg @size-lg',
108-
'[data-size="xlarge"] & single-icon': '@size-xl @size-xl',
104+
'[data-size="xsmall"] & single-icon': '$size-xs $size-xs',
105+
'[data-size="small"] & single-icon': '$size-sm $size-sm',
106+
'[data-size="medium"] & single-icon': '$size-md $size-md',
107+
'[data-size="large"] & single-icon': '$size-lg $size-lg',
108+
'[data-size="xlarge"] & single-icon': '$size-xl $size-xl',
109109
'[data-type="link"]': 'initial',
110110
},
111111
height: {
112112
'': 'initial',
113-
'[data-size="xsmall"]': '@size-xs @size-xs',
114-
'[data-size="small"]': '@size-sm @size-sm',
115-
'[data-size="medium"]': '@size-md @size-md',
116-
'[data-size="large"]': '@size-lg @size-lg',
117-
'[data-size="xlarge"]': '@size-xl @size-xl',
113+
'[data-size="xsmall"]': '$size-xs $size-xs',
114+
'[data-size="small"]': '$size-sm $size-sm',
115+
'[data-size="medium"]': '$size-md $size-md',
116+
'[data-size="large"]': '$size-lg $size-lg',
117+
'[data-size="xlarge"]': '$size-xl $size-xl',
118118
'[data-type="link"]': 'initial',
119119
},
120120
whiteSpace: 'nowrap',

‎src/components/actions/CommandMenu/styled.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export const StyledCommandMenu = tasty({
2525
overflow: 'hidden',
2626
height: {
2727
'': 'initial',
28-
popover: 'initial max-content (50vh - @size-md)',
29-
tray: 'initial max-content (100vh - @size-md)',
28+
popover: 'initial max-content (50vh - $size-md)',
29+
tray: 'initial max-content (100vh - $size-md)',
3030
},
3131
},
3232
});
@@ -51,8 +51,8 @@ export const StyledSearchInput = tasty({
5151
boxSizing: 'border-box',
5252
userSelect: 'auto',
5353
height: {
54-
'': '@size-md @size-md',
55-
'[data-size="large"]': '@size-lg @size-lg',
54+
'': '$size-md $size-md',
55+
'[data-size="large"]': '$size-lg $size-lg',
5656
},
5757

5858
'&::placeholder': {

‎src/components/actions/Menu/styled.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ export const StyledHeader = tasty(Space, {
7676
whiteSpace: 'nowrap',
7777
padding: '.5x 1.5x',
7878
height: {
79-
'': 'min @size-md',
80-
'[data-size="large"]': 'min @size-lg',
79+
'': 'min $size-md',
80+
'[data-size="large"]': 'min $size-lg',
8181
},
8282
boxSizing: 'border-box',
8383
border: 'bottom',
@@ -96,8 +96,8 @@ export const StyledFooter = tasty(Space, {
9696
whiteSpace: 'nowrap',
9797
padding: '.5x 1.5x',
9898
height: {
99-
'': 'min @size-md',
100-
'[data-size="large"]': 'min @size-lg',
99+
'': 'min $size-md',
100+
'[data-size="large"]': 'min $size-lg',
101101
},
102102
boxSizing: 'border-box',
103103
border: 'top',
@@ -132,8 +132,8 @@ export const StyledItem = tasty({
132132
listStyle: 'none',
133133
flexShrink: 0,
134134
height: {
135-
'': 'min @size-md',
136-
'[data-size="large"]': 'min @size-lg',
135+
'': 'min $size-md',
136+
'[data-size="large"]': 'min $size-lg',
137137
},
138138
border: false,
139139
boxSizing: 'border-box',
@@ -165,9 +165,9 @@ export const StyledItem = tasty({
165165
// Sub-elements reused from MenuButton styles
166166
ButtonIcon: {
167167
display: 'grid',
168-
fontSize: '@icon-size',
169-
width: '@icon-size',
170-
height: '@icon-size',
168+
fontSize: '$icon-size',
169+
width: '$icon-size',
170+
height: '$icon-size',
171171
placeSelf: 'center',
172172
placeItems: 'center',
173173
},

‎src/components/content/Avatar/Avatar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ const DEFAULT_STYLES = {
1818
color: '#white',
1919
radius: 'round',
2020
placeContent: 'center',
21-
width: '@avatar-size @avatar-size @avatar-size',
22-
height: '@avatar-size @avatar-size @avatar-size',
23-
fontSize: 'calc(@avatar-size / 2)',
24-
lineHeight: 'calc(@avatar-size / 2)',
21+
width: '$avatar-size $avatar-size $avatar-size',
22+
height: '$avatar-size $avatar-size $avatar-size',
23+
fontSize: 'calc($avatar-size / 2)',
24+
lineHeight: 'calc($avatar-size / 2)',
2525
fontWeight: 500,
2626
};
2727

‎src/components/content/CopySnippet/CopySnippet.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,22 +64,22 @@ const ButtonContainer = tasty({
6464
},
6565
placeContent: 'start',
6666

67-
'@button-size': {
67+
'$button-size': {
6868
'': '5x',
6969
multiline: '4x',
7070
},
7171

72-
'@first-button-radius': {
72+
'$first-button-radius': {
7373
'': '0 1r 1r 0',
7474
multiline: '0 1r 0 0',
7575
},
7676

77-
'@last-button-radius': {
77+
'$last-button-radius': {
7878
'': '0',
7979
multiline: '0 0 0 1r',
8080
},
8181

82-
'@first-and-last-button-radius': {
82+
'$first-and-last-button-radius': {
8383
'': '0 1r 1r 0',
8484
multiline: '0 1r 0 1r',
8585
},
@@ -125,12 +125,12 @@ const ActionButton = tasty(Button, {
125125
focused: 'inset 0 0 0 1ow #purple-03',
126126
},
127127
outline: false,
128-
height: '@button-size',
128+
height: '$button-size',
129129
radius: {
130130
'': 0,
131-
':last-child': '@last-button-radius',
132-
':first-child': '@first-button-radius',
133-
':first-child & :last-child': '@first-and-last-button-radius',
131+
':last-child': '$last-button-radius',
132+
':first-child': '$first-button-radius',
133+
':first-child & :last-child': '$first-and-last-button-radius',
134134
},
135135
},
136136
});

‎src/components/fields/DatePicker/DateInputBase.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ const DateInputElement = tasty({
3333
styles: {
3434
...DEFAULT_INPUT_STYLES,
3535
height: {
36-
'': '(@size-md - 2bw)',
37-
'[data-size="small"]': '(@size-sm - 2bw)',
38-
'[data-size="large"]': '(@size-lg - 2bw)',
36+
'': '($size-md - 2bw)',
37+
'[data-size="small"]': '($size-sm - 2bw)',
38+
'[data-size="large"]': '($size-lg - 2bw)',
3939
},
4040
display: 'flex',
4141
flow: 'row',

0 commit comments

Comments
 (0)