Skip to content

Commit 78f26ef

Browse files
robphoenixrobphoenix
committed
exploring
1 parent b3dc825 commit 78f26ef

File tree

8 files changed

+437
-278
lines changed

8 files changed

+437
-278
lines changed

‎packages/react/.storybook/preview.ts

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import '@utilitywarehouse/css-reset';
44
import '@utilitywarehouse/colour-system/css/colours.css';
55
import '../styles.css';
66
import '../src/storybook/styles.css';
7+
import '@utilitywarehouse/design-tokens/build/css/components/light/label.css';
78

89
const preview: Preview = {
910
parameters: {},

‎packages/react/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"dependencies": {
4242
"@radix-ui/react-radio-group": "^1.2.1",
4343
"@radix-ui/react-slot": "^1.1.0",
44+
"@utilitywarehouse/design-tokens": "0.0.1-alpha.2",
4445
"@utilitywarehouse/react-icons": "^1.11.0",
4546
"clsx": "^2.1.1"
4647
},

‎packages/react/src/components/Label/Label.css

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
.uwp-Label {
2-
--label-color: var(--color-grey1000);
3-
--label-color-disabled: var(--color-grey400);
4-
--label-font-weight: var(--font-weight-semibold);
5-
--label-font-weight-nested: var(--font-weight-regular);
6-
7-
font-family: var(--font-family-body);
8-
font-size: var(--font-size-body-md);
2+
font-family: var(--label-font-family);
3+
font-size: var(--label-font-size);
94
font-weight: var(--label-font-weight);
10-
line-height: var(--line-height-lg);
5+
line-height: var(--label-line-height);
116
color: var(--label-color);
127

138
&:where([data-disabled], [data-disabled] &) {
149
color: var(--label-color-disabled);
1510
}
1611

17-
&:where(.uwp-nested) {
12+
&:where([data-nested]) {
1813
font-weight: var(--label-font-weight-nested);
1914
}
2015
}

‎packages/react/src/components/Label/Label.tsx

+4-6
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,10 @@ import clsx from 'clsx';
55

66
import { LabelProps } from './Label.props';
77
import { Slot } from '@radix-ui/react-slot';
8+
import { withGlobalPrefix } from '../../helpers/with-global-prefix';
89

910
const componentName = 'Label';
10-
const componentClassName = 'uwp-' + componentName;
11-
12-
const classNames = {
13-
nested: 'uwp-nested',
14-
};
11+
const componentClassName = withGlobalPrefix(componentName);
1512

1613
type LabelElement = ElementRef<'label'>;
1714

@@ -32,8 +29,9 @@ export const Label = React.forwardRef<LabelElement, LabelProps>(
3229
return (
3330
<Slot
3431
ref={ref}
35-
className={clsx(componentClassName, { [classNames.nested]: nested }, className)}
32+
className={clsx(componentClassName, className)}
3633
data-disabled={disabled ? '' : undefined}
34+
data-nested={nested ? '' : undefined}
3735
data-disable-user-select={disableUserSelect ? '' : undefined}
3836
{...props}
3937
>

‎packages/web-ui/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@radix-ui/react-slot": "^1.0.2",
3939
"@radix-ui/react-use-controllable-state": "^1.0.1",
4040
"@utilitywarehouse/colour-system": "workspace:^",
41+
"@utilitywarehouse/design-tokens": "0.0.1-alpha.2",
4142
"@utilitywarehouse/react-icons": "^1.11.0",
4243
"clsx": "^2.0.0"
4344
},

‎packages/web-ui/src/components/Box/Box.stories.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useRef } from 'react';
44
import type { Meta, StoryObj } from '@storybook/react';
55

66
import { colorsCommon } from '@utilitywarehouse/colour-system';
7+
import { primitive, semantic } from '@utilitywarehouse/design-tokens';
78

89
import { Box } from './Box';
910
import { BoxProps } from './Box.props';
@@ -115,3 +116,28 @@ export const CustomComponent = {
115116
// </Box>
116117
// ),
117118
// };
119+
//
120+
121+
const { default: typography } = primitive;
122+
123+
export const TokensExploration: Story = {
124+
render: ({ children, ...args }) => {
125+
return (
126+
<Box
127+
{...args}
128+
sx={{
129+
// fontWeight: primitive.default.fontWeights.semibold,
130+
fontWeight: typography.fontWeights.semibold,
131+
}}
132+
>
133+
<Text>{children}</Text>
134+
</Box>
135+
);
136+
},
137+
args: {
138+
component: 'div',
139+
children: 'Tokens Exploration',
140+
padding: '32px',
141+
border: '2px solid rebeccapurple',
142+
},
143+
};

‎packages/web-ui/src/components/Label/Label.tsx

+92-14
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,119 @@
11
import * as React from 'react';
22

3-
import { colors } from '@utilitywarehouse/colour-system';
3+
import { components as componentTokens } from '@utilitywarehouse/design-tokens';
44

55
import type { LabelProps } from './Label.props';
66

77
import { createBox } from '../Box';
88

99
import { DATA_ATTRIBUTE_SELECTORS } from '../../helpers';
1010
import { styled } from '../../theme';
11-
import { fontWeights, fonts } from '../../tokens';
1211
import type { PropsWithSx } from '../../types';
13-
import { pxToRem } from '../../utils';
1412

1513
const componentName = 'Label';
1614
const BaseBox = createBox<'label'>({ componentName });
1715

16+
// const {
17+
// light: {
18+
// label: { fontFamily, fontSize, fontWeight, fontWeightNested, lineHeight, color, colorDisabled },
19+
// },
20+
// } = componentTokens;
21+
22+
// const StyledElement = styled(BaseBox)({
23+
// fontFamily,
24+
// fontSize,
25+
// lineHeight,
26+
// color,
27+
// fontWeight,
28+
// ':where([data-disabled],[data-disabled] &)': {
29+
// color: colorDisabled,
30+
// },
31+
// ':where([data-nested])': {
32+
// fontWeight: fontWeightNested,
33+
// },
34+
// [DATA_ATTRIBUTE_SELECTORS.disableUserSelect]: {
35+
// userSelect: 'none',
36+
// },
37+
// });
38+
39+
const {
40+
light: { label },
41+
} = componentTokens;
42+
1843
const StyledElement = styled(BaseBox)({
19-
fontFamily: fonts.secondary,
20-
fontSize: pxToRem(16),
21-
lineHeight: 1.5,
22-
'--label-color': colors.grey1000,
23-
'--label-color-disabled': colors.grey400,
24-
'--label-font-weight': fontWeights.secondary.semibold,
25-
'--label-font-weight-nested': fontWeights.secondary.regular,
26-
color: 'var(--label-color)',
27-
fontWeight: 'var(--label-font-weight)',
44+
fontFamily: label.fontFamily,
45+
fontSize: label.fontSize,
46+
fontWeight: label.fontWeight,
47+
// fontWeight: label.fontWeight.default,
48+
lineHeight: label.lineHeight,
49+
color: label.color,
50+
// color: label.color.default,
2851
':where([data-disabled],[data-disabled] &)': {
29-
'--label-color': 'var(--label-color-disabled)',
52+
color: label.colorDisabled,
53+
// color: label.color.disabled,
54+
// color: label.disabled.color,
3055
},
3156
':where([data-nested])': {
32-
'--label-font-weight': 'var(--label-font-weight-nested)',
57+
fontWeight: label.fontWeightNested,
58+
// fontWeight: label.fontWeight.nested,
59+
// fontWeight: label.nested.fontWeight,
3360
},
3461
[DATA_ATTRIBUTE_SELECTORS.disableUserSelect]: {
3562
userSelect: 'none',
3663
},
3764
});
3865

66+
// const tokens = {
67+
// fontWeightSemibold: 600,
68+
// labelFontFamily: fontFamily,
69+
// labelFontSize: fontSize,
70+
// labelFontWeight: fontWeight,
71+
// };
72+
//
73+
// const StyledElement = styled(BaseBox)({
74+
// fontFamily: tokens.labelFontFamily,
75+
// fontSize: tokens.labelFontSize,
76+
// fontWeight: tokens.labelFontWeight,
77+
// lineHeight,
78+
// color,
79+
// ':where([data-disabled],[data-disabled] &)': {
80+
// color: colorDisabled,
81+
// },
82+
// ':where([data-nested])': {
83+
// fontWeight: fontWeightNested,
84+
// },
85+
// [DATA_ATTRIBUTE_SELECTORS.disableUserSelect]: {
86+
// userSelect: 'none',
87+
// },
88+
// });
89+
90+
// const labelTokens = {
91+
// 'label-font-weight-nested': 400,
92+
// 'label-font-weight': 600,
93+
// 'label-color': '#121212',
94+
// 'label-letter-spacing': 0,
95+
// 'label-line-height': 1.5,
96+
// 'label-color-disabled': '#a0a0a0',
97+
// 'label-font-family': "'Work Sans', Arial, sans-serif",
98+
// 'label-font-size': '1rem',
99+
// };
100+
// const StyledElement = styled(BaseBox)({
101+
// fontFamily: labelTokens['label-font-family'],
102+
// fontSize:labelTokens['label-font-size'],
103+
// lineHeight,
104+
// color,
105+
// fontWeight,
106+
// ':where([data-disabled],[data-disabled] &)': {
107+
// color: colorDisabled,
108+
// },
109+
// ':where([data-nested])': {
110+
// fontWeight: fontWeightNested,
111+
// },
112+
// [DATA_ATTRIBUTE_SELECTORS.disableUserSelect]: {
113+
// userSelect: 'none',
114+
// },
115+
// });
116+
39117
/**
40118
* The Label component is used for labelling form elements, such as radio inputs.
41119
*/

0 commit comments

Comments
 (0)