Skip to content

Commit 91a70ab

Browse files
jonniebigodesjonniebigodes
authored
Merge branch 'next' into copilot/fix-broken-csf-link
2 parents 33a05c3 + 4fbf0fb commit 91a70ab

File tree

15 files changed

+338
-204
lines changed

15 files changed

+338
-204
lines changed

‎code/addons/docs/src/blocks/controls/Range.tsx‎

Lines changed: 100 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -11,148 +11,128 @@ import type { ControlProps, NumberValue, RangeConfig } from './types';
1111
type RangeProps = ControlProps<NumberValue | null> & RangeConfig;
1212

1313
const RangeInput = styled.input<{ min: number; max: number; value: number }>(
14-
({ theme, min, max, value, disabled }) => ({
15-
// Resytled using http://danielstern.ca/range.css/#/
16-
'&': {
17-
width: '100%',
18-
backgroundColor: 'transparent',
19-
appearance: 'none',
20-
},
21-
22-
'&::-webkit-slider-runnable-track': {
23-
background:
24-
theme.base === 'light'
25-
? `linear-gradient(to right,
26-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
27-
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
28-
${darken(0.02, theme.input.background)} 100%)`
29-
: `linear-gradient(to right,
30-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
31-
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
32-
${lighten(0.02, theme.input.background)} 100%)`,
33-
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
14+
({ theme, min, max, value, disabled }) => {
15+
// Shared track background gradient
16+
const trackBackground =
17+
theme.base === 'light'
18+
? `linear-gradient(to right,
19+
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
20+
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
21+
${darken(0.02, theme.input.background)} 100%)`
22+
: `linear-gradient(to right,
23+
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
24+
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
25+
${lighten(0.02, theme.input.background)} 100%)`;
26+
27+
// Shared track base styles
28+
const trackBaseStyles = {
29+
background: trackBackground,
3430
borderRadius: 6,
35-
width: '100%',
36-
height: 6,
31+
boxShadow: `${theme.base == 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'} 0 0 0 1px inset`,
3732
cursor: disabled ? 'not-allowed' : 'pointer',
38-
},
33+
height: 6,
34+
width: '100%',
35+
};
36+
37+
const trackFocusStyles = {
38+
borderColor: rgba(theme.color.secondary, 0.4),
39+
};
3940

40-
'&::-webkit-slider-thumb': {
41-
marginTop: '-6px',
41+
// Shared thumb base styles
42+
const thumbBaseStyles = {
4243
width: 16,
4344
height: 16,
44-
45-
border: `1px solid ${theme.appBorderColor}`,
46-
borderRadius: '50px',
47-
boxShadow:
48-
theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
45+
borderRadius: 50,
4946
cursor: disabled ? 'not-allowed' : 'grab',
50-
appearance: 'none',
5147
background: theme.input.background,
48+
border: `1px solid ${theme.base == 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'}`,
49+
boxShadow:
50+
theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
5251
transition: 'all 150ms ease-out',
52+
};
53+
54+
// Shared thumb hover styles
55+
const thumbHoverStyles = {
56+
background: `${darken(0.05, theme.input.background)}`,
57+
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
58+
transition: 'all 50ms ease-out',
59+
};
60+
61+
// Shared thumb active styles
62+
const thumbActiveStyles = {
63+
background: `${theme.input.background}`,
64+
transform: 'scale3d(1, 1, 1) translateY(0px)',
65+
};
66+
67+
const thumbFocusStyles = {
68+
borderColor: theme.color.secondary,
69+
boxShadow: theme.base === 'light' ? `0 0px 5px 0px ${theme.color.secondary}` : 'unset',
70+
};
71+
72+
return {
73+
// Restyled using http://danielstern.ca/range.css/#/
74+
appearance: 'none',
75+
backgroundColor: 'transparent',
76+
width: '100%',
5377

54-
'&:hover': {
55-
background: `${darken(0.05, theme.input.background)}`,
56-
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
57-
transition: 'all 50ms ease-out',
58-
},
78+
// Track styles
79+
'&::-webkit-slider-runnable-track': trackBaseStyles,
80+
81+
'&::-moz-range-track': trackBaseStyles,
5982

60-
'&:active': {
61-
background: `${theme.input.background}`,
62-
transform: 'scale3d(1, 1, 1) translateY(0px)',
63-
cursor: disabled ? 'not-allowed' : 'grab',
83+
'&::-ms-track': {
84+
...trackBaseStyles,
85+
color: 'transparent',
6486
},
65-
},
6687

67-
'&:focus': {
68-
outline: 'none',
88+
// Thumb styles
89+
'&::-moz-range-thumb': {
90+
...thumbBaseStyles,
6991

70-
'&::-webkit-slider-runnable-track': {
71-
borderColor: rgba(theme.color.secondary, 0.4),
92+
'&:hover': thumbHoverStyles,
93+
'&:active': thumbActiveStyles,
7294
},
7395

7496
'&::-webkit-slider-thumb': {
75-
borderColor: theme.color.secondary,
76-
boxShadow: theme.base === 'light' ? `0 0px 5px 0px ${theme.color.secondary}` : 'unset',
97+
...thumbBaseStyles,
98+
marginTop: '-6px',
99+
appearance: 'none',
100+
101+
'&:hover': thumbHoverStyles,
102+
'&:active': thumbActiveStyles,
77103
},
78-
},
79-
80-
'&::-moz-range-track': {
81-
background:
82-
theme.base === 'light'
83-
? `linear-gradient(to right,
84-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
85-
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
86-
${darken(0.02, theme.input.background)} 100%)`
87-
: `linear-gradient(to right,
88-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
89-
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
90-
${lighten(0.02, theme.input.background)} 100%)`,
91-
boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
92-
borderRadius: 6,
93-
width: '100%',
94-
height: 6,
95-
cursor: disabled ? 'not-allowed' : 'pointer',
96-
outline: 'none',
97-
},
98104

99-
'&::-moz-range-thumb': {
100-
width: 16,
101-
height: 16,
102-
border: `1px solid ${theme.appBorderColor}`,
103-
borderRadius: '50px',
104-
boxShadow:
105-
theme.base === 'light' ? `0 1px 3px 0px ${rgba(theme.appBorderColor, 0.2)}` : 'unset',
106-
cursor: disabled ? 'not-allowed' : 'grab',
107-
background: theme.input.background,
108-
transition: 'all 150ms ease-out',
105+
'&::-ms-thumb': {
106+
...thumbBaseStyles,
107+
marginTop: 0,
109108

110-
'&:hover': {
111-
background: `${darken(0.05, theme.input.background)}`,
112-
transform: 'scale3d(1.1, 1.1, 1.1) translateY(-1px)',
113-
transition: 'all 50ms ease-out',
109+
'&:hover': thumbHoverStyles,
110+
'&:active': thumbActiveStyles,
114111
},
115112

116-
'&:active': {
117-
background: `${theme.input.background}`,
118-
transform: 'scale3d(1, 1, 1) translateY(0px)',
119-
cursor: 'grabbing',
113+
'&:focus': {
114+
outline: 'none',
115+
116+
'&::-webkit-slider-runnable-track': trackFocusStyles,
117+
'&::-moz-range-track': trackFocusStyles,
118+
'&::-ms-track': trackFocusStyles,
119+
120+
'&::-webkit-slider-thumb': thumbFocusStyles,
121+
'&::-moz-range-thumb': thumbFocusStyles,
122+
'&::-ms-thumb': thumbFocusStyles,
120123
},
121-
},
122-
'&::-ms-track': {
123-
background:
124-
theme.base === 'light'
125-
? `linear-gradient(to right,
126-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
127-
${darken(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
128-
${darken(0.02, theme.input.background)} 100%)`
129-
: `linear-gradient(to right,
130-
${theme.color.green} 0%, ${theme.color.green} ${((value - min) / (max - min)) * 100}%,
131-
${lighten(0.02, theme.input.background)} ${((value - min) / (max - min)) * 100}%,
132-
${lighten(0.02, theme.input.background)} 100%)`,
133-
boxShadow: theme.base === 'light' ? `${theme.appBorderColor} 0 0 0 1px inset` : 'unset',
134-
color: 'transparent',
135-
width: '100%',
136-
height: '6px',
137-
cursor: 'pointer',
138-
},
139-
'&::-ms-fill-lower': {
140-
borderRadius: 6,
141-
},
142-
'&::-ms-fill-upper': {
143-
borderRadius: 6,
144-
},
145-
'&::-ms-thumb': {
146-
width: 16,
147-
height: 16,
148-
background: theme.input.background,
149-
border: `1px solid ${rgba(theme.appBorderColor, 0.2)}`,
150-
borderRadius: 50,
151-
cursor: disabled ? 'not-allowed' : 'grab',
152-
marginTop: 0,
153-
},
154-
'@supports (-ms-ime-align:auto)': { 'input[type=range]': { margin: '0' } },
155-
})
124+
125+
'&::-ms-fill-lower': {
126+
borderRadius: 6,
127+
},
128+
129+
'&::-ms-fill-upper': {
130+
borderRadius: 6,
131+
},
132+
133+
'@supports (-ms-ime-align:auto)': { 'input[type=range]': { margin: '0' } },
134+
};
135+
}
156136
);
157137

158138
const RangeLabel = styled.span({

‎code/core/src/common/utils/validate-config.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66

77
import { resolveModulePath } from 'exsolve';
88

9+
import { extractFrameworkPackageName } from '..';
910
import { frameworkPackages } from './get-storybook-info';
1011

1112
const renderers = ['html', 'preact', 'react', 'server', 'svelte', 'vue', 'vue3', 'web-components'];
@@ -27,7 +28,8 @@ export function validateFrameworkName(
2728
}
2829

2930
// If we know about the framework, we don't need to validate it
30-
if (Object.keys(frameworkPackages).includes(frameworkName)) {
31+
const normalizedFrameworkName = extractFrameworkPackageName(frameworkName);
32+
if (Object.keys(frameworkPackages).includes(normalizedFrameworkName)) {
3133
return;
3234
}
3335

‎code/core/src/components/components/Badge/Badge.tsx‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -31,45 +31,37 @@ const BadgeWrapper = styled.div<BadgeProps>(
3131
switch (status) {
3232
case 'critical': {
3333
return {
34-
color: theme.color.critical,
35-
background: theme.background.critical,
34+
color: theme.fgColor.critical,
35+
background: theme.bgColor.critical,
36+
boxShadow: `inset 0 0 0 1px ${theme.borderColor.critical}`,
3637
};
3738
}
3839
case 'negative': {
3940
return {
40-
color: theme.color.negativeText,
41-
background: theme.background.negative,
42-
boxShadow:
43-
theme.base === 'light'
44-
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.negativeText)}`
45-
: 'none',
41+
color: theme.fgColor.negative,
42+
background: theme.bgColor.negative,
43+
boxShadow: `inset 0 0 0 1px ${theme.borderColor.negative}`,
4644
};
4745
}
4846
case 'warning': {
4947
return {
50-
color: theme.color.warningText,
51-
background: theme.background.warning,
52-
boxShadow:
53-
theme.base === 'light'
54-
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.warningText)}`
55-
: 'none',
48+
color: theme.fgColor.warning,
49+
background: theme.bgColor.warning,
50+
boxShadow: `inset 0 0 0 1px ${theme.borderColor.warning}`,
5651
};
5752
}
5853
case 'neutral': {
5954
return {
60-
color: theme.textMutedColor,
61-
background: theme.base === 'light' ? theme.background.app : theme.barBg,
55+
color: theme.fgColor.muted,
56+
background: theme.base === 'dark' ? theme.barBg : theme.background.app,
6257
boxShadow: `inset 0 0 0 1px ${transparentize(0.8, theme.textMutedColor)}`,
6358
};
6459
}
6560
case 'positive': {
6661
return {
67-
color: theme.color.positiveText,
68-
background: theme.background.positive,
69-
boxShadow:
70-
theme.base === 'light'
71-
? `inset 0 0 0 1px ${transparentize(0.9, theme.color.positiveText)}`
72-
: 'none',
62+
color: theme.fgColor.positive,
63+
background: theme.bgColor.positive,
64+
boxShadow: `inset 0 0 0 1px ${theme.borderColor.positive}`,
7365
};
7466
}
7567
case 'active': {

‎code/core/src/components/components/Form/Checkbox.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,29 @@ import { color, styled } from 'storybook/theming';
44

55
const Input = styled.input(({ theme }) => ({
66
appearance: 'none',
7+
backgroundColor: theme.input.background,
8+
border: `1px solid ${theme.base === 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'}`,
9+
borderRadius: 2,
710
display: 'grid',
8-
placeContent: 'center',
9-
width: 14,
10-
height: 14,
1111
flexShrink: 0,
12+
height: 14,
1213
margin: 0,
13-
border: `1px solid ${theme.input.border}`,
14-
borderRadius: 2,
15-
backgroundColor: theme.input.background,
14+
placeContent: 'center',
1615
transition: 'background-color 0.1s',
16+
width: 14,
1717

1818
'&:enabled': {
1919
cursor: 'pointer',
2020
},
2121
'&:disabled': {
22-
backgroundColor: theme.base === 'light' ? color.light : 'transparent',
22+
backgroundColor: 'transparent',
23+
borderColor: theme.input.border,
2324
},
2425
'&:disabled:checked, &:disabled:indeterminate': {
25-
backgroundColor: theme.base === 'light' ? color.mediumdark : theme.color.dark,
26+
backgroundColor: theme.base === 'dark' ? color.dark : theme.color.mediumdark,
2627
},
2728
'&:checked, &:indeterminate': {
29+
border: 'none',
2830
backgroundColor: color.secondary,
2931
},
3032
'&:checked::before': {

0 commit comments

Comments
 (0)