Skip to content

Commit 9adbef7

Browse files
michalkvasnicakmichalkvasnicak
committed
refactor(visage): remove textinput color from theme
1 parent 21b264f commit 9adbef7

19 files changed

+53
-84
lines changed

‎packages/visage-docs/src/components/ThemeEditor.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -216,10 +216,7 @@ const colorNamesWithText: (keyof ColorPalette)[] = [
216216
'warning',
217217
];
218218

219-
const colorNamesWithoutText: (keyof ColorPalette)[] = [
220-
'textInput',
221-
'textInputBorder',
222-
];
219+
const colorNamesWithoutText: (keyof ColorPalette)[] = [];
223220

224221
interface ThemeEditorProps {
225222
onClose: () => void;

‎packages/visage-docs/src/theme.ts

-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ColorPalette } from '@byteclaw/visage';
2-
import color from 'color';
32
import { createContext } from 'react';
43

54
export const ThemeTogglerContext = createContext<{
@@ -18,12 +17,5 @@ export function toggleColorPaletteMode(palette: ColorPalette): ColorPalette {
1817
darkShadesText: palette.shadesText,
1918
shades: palette.darkShades,
2019
shadesText: palette.darkShadesText,
21-
// if default colors are same, calculate these
22-
textInput: color(palette.darkShades)
23-
.lighten(0.3)
24-
.toString(),
25-
textInputBorder: color(palette.darkShades)
26-
.darken(0.3)
27-
.toString(),
2820
};
2921
}

‎packages/visage-themes/README.md

-8
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,6 @@ const theme = createNPointModularScaleTheme({
7070
/** Uses as background for success elements or as success text color */
7171
success: 'green';
7272
successText: 'white';
73-
/** Text input backgrounds */
74-
textInput: 'white';
75-
/** Text input border colors */
76-
textInputBorder: '#999';
7773
/** Uses as background for warning elements or as warning text color */
7874
warning: 'orange';
7975
warningText: 'white';
@@ -146,10 +142,6 @@ const theme = createNPointFontScaleTheme({
146142
/** Uses as background for success elements or as success text color */
147143
success: 'green';
148144
successText: 'white';
149-
/** Text input backgrounds */
150-
textInput: 'white';
151-
/** Text input border colors */
152-
textInputBorder: '#999';
153145
/** Uses as background for warning elements or as warning text color */
154146
warning: 'orange';
155147
warningText: 'white';

‎packages/visage-themes/src/__tests__/nPointFontScale.test.ts

-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@ describe('NPoint font scale theme', () => {
2424
primaryText: 'white',
2525
success: 'green',
2626
successText: 'white',
27-
textInput: 'white',
28-
textInputBorder: 'black',
2927
warning: 'orange',
3028
warningText: 'white',
3129
},

‎packages/visage-themes/src/__tests__/nPointModularScale.test.ts

-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@ describe('NPoint modular scale theme', () => {
3636
primaryText: 'white',
3737
success: 'green',
3838
successText: 'white',
39-
textInput: 'white',
40-
textInputBorder: 'black',
4139
warning: 'orange',
4240
warningText: 'white',
4341
},

‎packages/visage-themes/src/docs.ts

-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ export const docsThemeColorPalette: ColorPalette = {
2222
...generateColorScale<'danger' | 'dangerText'>('danger', '#c0392b', 5, 5),
2323
...generateColorScale<'info' | 'infoText'>('info', '#2980b9', 5, 5),
2424
...generateColorScale<'warning' | 'warningText'>('warning', '#f1c40f', 5, 5),
25-
textInput: shades.lighten(0.3).toString(),
26-
textInputBorder: shades.darken(0.3).toString(),
2725
};
2826

2927
export interface DocsThemeSettings {

‎packages/visage/src/__tests__/TestDesignSystem.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,6 @@ export function createTestTheme(faces?: VisageFaces) {
3838
neutralText: '#000',
3939
success: 'green',
4040
successText: 'white',
41-
textInput: 'white',
42-
textInputBorder: 'black',
4341
warning: 'orange',
4442
warningText: 'white',
4543
},

‎packages/visage/src/components/Checkbox.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const CheckboxToggler = createComponent(Flex, {
7272
styles={{
7373
width: '1em',
7474
height: '1em',
75-
stroke: 'textInput',
75+
stroke: 'color(shades tint(10%))',
7676
strokeWidth: '2px',
7777
fill: 'none',
7878
}}
@@ -82,7 +82,7 @@ const CheckboxToggler = createComponent(Flex, {
8282
),
8383
},
8484
styles: {
85-
backgroundColor: 'textInput',
85+
backgroundColor: 'color(shades tint(10%))',
8686
alignSelf: 'center',
8787
transition: 'all 150ms',
8888
borderColor: 'accent',

‎packages/visage/src/components/FileInput.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ const FileInputControl = createComponent('div', {
5454
'&[data-draggedover="true"]': {
5555
boxShadow: createSurfaceFocusShadow(),
5656
},
57-
backgroundColor: 'textInput',
58-
borderColor: 'textInputBorder',
57+
backgroundColor: 'color(shades tint(10%))',
58+
borderColor: 'color(shades shade(30%))',
5959
borderStyle: 'solid',
6060
borderWidth: '1px',
6161
borderRadius: 'controlBorderRadius',

‎packages/visage/src/components/Radio.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const RadioToggler = createComponent(Flex, {
9393
color: 'primaryText',
9494
borderColor: 'primary',
9595
'& > svg': {
96-
fill: 'textInput',
96+
fill: 'color(shades tint(10%))',
9797
visibility: 'visible',
9898
},
9999
},

‎packages/visage/src/components/TextArea.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,7 @@ const TextAreaBaseControl = createComponent('textarea', {
3030
...(props.disabled ? disabledControlStyles : {}),
3131
...(props.invalid ? invalidControlStyles : {}),
3232
'::placeholder': {
33-
color: 'currentColor',
34-
opacity: 0.3,
33+
color: 'color(shadesText alpha(0.3))',
3534
},
3635
}),
3736
variants: [disabledControlBooleanVariant, invalidControlBooleanVariant],

‎packages/visage/src/components/TextInput.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ import {
2121
} from './shared';
2222

2323
export const TextInputBaseStyles: VisageStyleSheet = {
24-
backgroundColor: 'textInput',
25-
borderColor: 'textInputBorder',
24+
backgroundColor: 'color(shades tint(10%))',
25+
borderColor: 'color(shades shade(30%))',
2626
borderStyle: 'solid',
2727
borderWidth: '1px',
2828
borderRadius: 'controlBorderRadius',

‎packages/visage/src/components/Toggle.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@ const ToggleControl = createComponent('input', {
7878
left: '-50%',
7979
},
8080
'& + div': {
81-
backgroundColor: 'neutral',
81+
backgroundColor:
82+
'color(shades if(isDark color(shades tint(10%)) color(shades shade(10%))))',
8283
transitionProperty: 'all',
8384
transitionDuration: '0.2s',
8485
transitionTimingFunction: 'ease-out',

‎packages/visage/src/components/__tests__/FileInput.test.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ describe('FileInput', () => {
6363
}
6464
6565
.emotion-1 {
66-
background-color: rgb(255,255,255);
67-
border-color: rgb(0,0,0);
66+
background-color: rgb(209,209,209);
67+
border-color: rgb(143,143,143);
6868
border-style: solid;
6969
border-width: 1px;
7070
border-radius: 4px;
@@ -170,8 +170,8 @@ describe('FileInput', () => {
170170
}
171171
172172
.emotion-1 {
173-
background-color: rgb(255,255,255);
174-
border-color: rgb(0,0,0);
173+
background-color: rgb(209,209,209);
174+
border-color: rgb(143,143,143);
175175
border-style: solid;
176176
border-width: 1px;
177177
border-radius: 4px;
@@ -286,8 +286,8 @@ describe('FileInput', () => {
286286
}
287287
288288
.emotion-1 {
289-
background-color: rgb(255,255,255);
290-
border-color: rgb(0,0,0);
289+
background-color: rgb(209,209,209);
290+
border-color: rgb(143,143,143);
291291
border-style: solid;
292292
border-width: 1px;
293293
border-radius: 4px;
@@ -449,8 +449,8 @@ describe('FileInput', () => {
449449
}
450450
451451
.emotion-1 {
452-
background-color: rgb(255,255,255);
453-
border-color: rgb(0,0,0);
452+
background-color: rgb(209,209,209);
453+
border-color: rgb(143,143,143);
454454
border-style: solid;
455455
border-width: 1px;
456456
border-radius: 10px;

‎packages/visage/src/components/__tests__/Toggle.test.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ describe('Toggle', () => {
168168
}
169169
170170
.emotion-0 + div {
171-
background-color: rgb(238,238,238);
171+
background-color: rgb(184,184,184);
172172
-webkit-transition-property: all;
173173
transition-property: all;
174174
-webkit-transition-duration: 0.2s;
@@ -378,7 +378,7 @@ describe('Toggle', () => {
378378
}
379379
380380
.emotion-0 + div {
381-
background-color: rgb(238,238,238);
381+
background-color: rgb(184,184,184);
382382
-webkit-transition-property: all;
383383
transition-property: all;
384384
-webkit-transition-duration: 0.2s;
@@ -589,7 +589,7 @@ describe('Toggle', () => {
589589
}
590590
591591
.emotion-0 + div {
592-
background-color: rgb(238,238,238);
592+
background-color: rgb(184,184,184);
593593
-webkit-transition-property: all;
594594
transition-property: all;
595595
-webkit-transition-duration: 0.2s;
@@ -799,7 +799,7 @@ describe('Toggle', () => {
799799
}
800800
801801
.emotion-0 + div {
802-
background-color: rgb(238,238,238);
802+
background-color: rgb(184,184,184);
803803
-webkit-transition-property: all;
804804
transition-property: all;
805805
-webkit-transition-duration: 0.2s;
@@ -1077,7 +1077,7 @@ describe('Toggle', () => {
10771077
}
10781078
10791079
.emotion-0 + div {
1080-
background-color: rgb(238,238,238);
1080+
background-color: rgb(184,184,184);
10811081
-webkit-transition-property: all;
10821082
transition-property: all;
10831083
-webkit-transition-duration: 0.2s;
@@ -1221,7 +1221,7 @@ describe('Toggle', () => {
12211221
}
12221222
12231223
.emotion-0 + div {
1224-
background-color: rgb(238,238,238);
1224+
background-color: rgb(184,184,184);
12251225
-webkit-transition-property: all;
12261226
transition-property: all;
12271227
-webkit-transition-duration: 0.2s;

‎packages/visage/src/components/__tests__/__snapshots__/Checkbox.test.tsx.snap

+12-12
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ exports[`Checkbox is extendable by CheckboxControl face 1`] = `
2828
display: -webkit-flex;
2929
display: -ms-flexbox;
3030
display: flex;
31-
background-color: rgb(255,255,255);
31+
background-color: rgb(209,209,209);
3232
-webkit-align-self: center;
3333
-ms-flex-item-align: center;
3434
align-self: center;
@@ -70,7 +70,7 @@ exports[`Checkbox is extendable by CheckboxControl face 1`] = `
7070
.emotion-1 {
7171
width: 1em;
7272
height: 1em;
73-
stroke: rgb(255,255,255);
73+
stroke: rgb(209,209,209);
7474
stroke-width: 2px;
7575
fill: none;
7676
}
@@ -197,7 +197,7 @@ exports[`Checkbox is extendable by CheckboxLabel face 1`] = `
197197
display: -webkit-flex;
198198
display: -ms-flexbox;
199199
display: flex;
200-
background-color: rgb(255,255,255);
200+
background-color: rgb(209,209,209);
201201
-webkit-align-self: center;
202202
-ms-flex-item-align: center;
203203
align-self: center;
@@ -239,7 +239,7 @@ exports[`Checkbox is extendable by CheckboxLabel face 1`] = `
239239
.emotion-1 {
240240
width: 1em;
241241
height: 1em;
242-
stroke: rgb(255,255,255);
242+
stroke: rgb(209,209,209);
243243
stroke-width: 2px;
244244
fill: none;
245245
}
@@ -353,7 +353,7 @@ exports[`Checkbox is extendable by CheckboxLabelText face 1`] = `
353353
display: -webkit-flex;
354354
display: -ms-flexbox;
355355
display: flex;
356-
background-color: rgb(255,255,255);
356+
background-color: rgb(209,209,209);
357357
-webkit-align-self: center;
358358
-ms-flex-item-align: center;
359359
align-self: center;
@@ -395,7 +395,7 @@ exports[`Checkbox is extendable by CheckboxLabelText face 1`] = `
395395
.emotion-1 {
396396
width: 1em;
397397
height: 1em;
398-
stroke: rgb(255,255,255);
398+
stroke: rgb(209,209,209);
399399
stroke-width: 2px;
400400
fill: none;
401401
}
@@ -507,7 +507,7 @@ exports[`Checkbox is extendable by CheckboxToggler face 1`] = `
507507
.emotion-1 {
508508
width: 1em;
509509
height: 1em;
510-
stroke: rgb(255,255,255);
510+
stroke: rgb(209,209,209);
511511
stroke-width: 2px;
512512
fill: none;
513513
}
@@ -547,7 +547,7 @@ exports[`Checkbox is extendable by CheckboxToggler face 1`] = `
547547
display: -webkit-flex;
548548
display: -ms-flexbox;
549549
display: flex;
550-
background-color: rgb(255,255,255);
550+
background-color: rgb(209,209,209);
551551
-webkit-align-self: center;
552552
-ms-flex-item-align: center;
553553
align-self: center;
@@ -664,7 +664,7 @@ exports[`Checkbox is extendable by styles 1`] = `
664664
display: -webkit-flex;
665665
display: -ms-flexbox;
666666
display: flex;
667-
background-color: rgb(255,255,255);
667+
background-color: rgb(209,209,209);
668668
-webkit-align-self: center;
669669
-ms-flex-item-align: center;
670670
align-self: center;
@@ -706,7 +706,7 @@ exports[`Checkbox is extendable by styles 1`] = `
706706
.emotion-1 {
707707
width: 1em;
708708
height: 1em;
709-
stroke: rgb(255,255,255);
709+
stroke: rgb(209,209,209);
710710
stroke-width: 2px;
711711
fill: none;
712712
}
@@ -820,7 +820,7 @@ exports[`Checkbox renders correctly 1`] = `
820820
display: -webkit-flex;
821821
display: -ms-flexbox;
822822
display: flex;
823-
background-color: rgb(255,255,255);
823+
background-color: rgb(209,209,209);
824824
-webkit-align-self: center;
825825
-ms-flex-item-align: center;
826826
align-self: center;
@@ -862,7 +862,7 @@ exports[`Checkbox renders correctly 1`] = `
862862
.emotion-1 {
863863
width: 1em;
864864
height: 1em;
865-
stroke: rgb(255,255,255);
865+
stroke: rgb(209,209,209);
866866
stroke-width: 2px;
867867
fill: none;
868868
}

0 commit comments

Comments
 (0)