exploring

packages/react/.storybook/preview.ts

@@ -4,6 +4,7 @@ import '@utilitywarehouse/css-reset';
 import '@utilitywarehouse/colour-system/css/colours.css';
 import '../styles.css';
 import '../src/storybook/styles.css';
+import '@utilitywarehouse/design-tokens/build/css/components/light/label.css';
 
 const preview: Preview = {
   parameters: {},

packages/react/package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@utilitywarehouse/design-tokens": "0.0.1-alpha.2",
     "@utilitywarehouse/react-icons": "^1.11.0",
     "clsx": "^2.1.1"
   },

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

@@ -1,20 +1,15 @@
 .uwp-Label {
-  --label-color: var(--color-grey1000);
-  --label-color-disabled: var(--color-grey400);
-  --label-font-weight: var(--font-weight-semibold);
-  --label-font-weight-nested: var(--font-weight-regular);
-
-  font-family: var(--font-family-body);
-  font-size: var(--font-size-body-md);
+  font-family: var(--label-font-family);
+  font-size: var(--label-font-size);
   font-weight: var(--label-font-weight);
-  line-height: var(--line-height-lg);
+  line-height: var(--label-line-height);
   color: var(--label-color);
 
   &:where([data-disabled], [data-disabled] &) {
     color: var(--label-color-disabled);
   }
 
-  &:where(.uwp-nested) {
+  &:where([data-nested]) {
     font-weight: var(--label-font-weight-nested);
   }
 }

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

@@ -5,13 +5,10 @@ import clsx from 'clsx';
 
 import { LabelProps } from './Label.props';
 import { Slot } from '@radix-ui/react-slot';
+import { withGlobalPrefix } from '../../helpers/with-global-prefix';
 
 const componentName = 'Label';
-const componentClassName = 'uwp-' + componentName;
-
-const classNames = {
-  nested: 'uwp-nested',
-};
+const componentClassName = withGlobalPrefix(componentName);
 
 type LabelElement = ElementRef<'label'>;
 
@@ -32,8 +29,9 @@ export const Label = React.forwardRef<LabelElement, LabelProps>(
     return (
       <Slot
         ref={ref}
-        className={clsx(componentClassName, { [classNames.nested]: nested }, className)}
+        className={clsx(componentClassName, className)}
         data-disabled={disabled ? '' : undefined}
+        data-nested={nested ? '' : undefined}
         data-disable-user-select={disableUserSelect ? '' : undefined}
         {...props}
       >

packages/web-ui/package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-use-controllable-state": "^1.0.1",
     "@utilitywarehouse/colour-system": "workspace:^",
+    "@utilitywarehouse/design-tokens": "0.0.1-alpha.2",
     "@utilitywarehouse/react-icons": "^1.11.0",
     "clsx": "^2.0.0"
   },

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

@@ -4,6 +4,7 @@ import { useRef } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { colorsCommon } from '@utilitywarehouse/colour-system';
+import { primitive, semantic } from '@utilitywarehouse/design-tokens';
 
 import { Box } from './Box';
 import { BoxProps } from './Box.props';
@@ -115,3 +116,28 @@ export const CustomComponent = {
 //     </Box>
 //   ),
 // };
+//
+
+const { default: typography } = primitive;
+
+export const TokensExploration: Story = {
+  render: ({ children, ...args }) => {
+    return (
+      <Box
+        {...args}
+        sx={{
+          // fontWeight: primitive.default.fontWeights.semibold,
+          fontWeight: typography.fontWeights.semibold,
+        }}
+      >
+        <Text>{children}</Text>
+      </Box>
+    );
+  },
+  args: {
+    component: 'div',
+    children: 'Tokens Exploration',
+    padding: '32px',
+    border: '2px solid rebeccapurple',
+  },
+};

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

@@ -1,41 +1,119 @@
 import * as React from 'react';
 
-import { colors } from '@utilitywarehouse/colour-system';
+import { components as componentTokens } from '@utilitywarehouse/design-tokens';
 
 import type { LabelProps } from './Label.props';
 
 import { createBox } from '../Box';
 
 import { DATA_ATTRIBUTE_SELECTORS } from '../../helpers';
 import { styled } from '../../theme';
-import { fontWeights, fonts } from '../../tokens';
 import type { PropsWithSx } from '../../types';
-import { pxToRem } from '../../utils';
 
 const componentName = 'Label';
 const BaseBox = createBox<'label'>({ componentName });
 
+// const {
+//   light: {
+//     label: { fontFamily, fontSize, fontWeight, fontWeightNested, lineHeight, color, colorDisabled },
+//   },
+// } = componentTokens;
+
+// const StyledElement = styled(BaseBox)({
+//   fontFamily,
+//   fontSize,
+//   lineHeight,
+//   color,
+//   fontWeight,
+//   ':where([data-disabled],[data-disabled] &)': {
+//     color: colorDisabled,
+//   },
+//   ':where([data-nested])': {
+//     fontWeight: fontWeightNested,
+//   },
+//   [DATA_ATTRIBUTE_SELECTORS.disableUserSelect]: {
+//     userSelect: 'none',
+//   },
+// });
+
+const {
+  light: { label },
+} = componentTokens;
+
 const StyledElement = styled(BaseBox)({
-  fontFamily: fonts.secondary,
-  fontSize: pxToRem(16),
-  lineHeight: 1.5,
-  '--label-color': colors.grey1000,
-  '--label-color-disabled': colors.grey400,
-  '--label-font-weight': fontWeights.secondary.semibold,
-  '--label-font-weight-nested': fontWeights.secondary.regular,
-  color: 'var(--label-color)',
-  fontWeight: 'var(--label-font-weight)',
+  fontFamily: label.fontFamily,
+  fontSize: label.fontSize,
+  fontWeight: label.fontWeight,
+  // fontWeight: label.fontWeight.default,
+  lineHeight: label.lineHeight,
+  color: label.color,
+  // color: label.color.default,
   ':where([data-disabled],[data-disabled] &)': {
-    '--label-color': 'var(--label-color-disabled)',
+    color: label.colorDisabled,
+    // color: label.color.disabled,
+    // color: label.disabled.color,
   },
   ':where([data-nested])': {
-    '--label-font-weight': 'var(--label-font-weight-nested)',
+    fontWeight: label.fontWeightNested,
+    // fontWeight: label.fontWeight.nested,
+    // fontWeight: label.nested.fontWeight,
   },
   [DATA_ATTRIBUTE_SELECTORS.disableUserSelect]: {
     userSelect: 'none',
   },
 });
 
+// const tokens = {
+//   fontWeightSemibold: 600,
+//   labelFontFamily: fontFamily,
+//   labelFontSize: fontSize,
+//   labelFontWeight: fontWeight,
+// };
+//
+// const StyledElement = styled(BaseBox)({
+//   fontFamily: tokens.labelFontFamily,
+//   fontSize: tokens.labelFontSize,
+//   fontWeight: tokens.labelFontWeight,
+//   lineHeight,
+//   color,
+//   ':where([data-disabled],[data-disabled] &)': {
+//     color: colorDisabled,
+//   },
+//   ':where([data-nested])': {
+//     fontWeight: fontWeightNested,
+//   },
+//   [DATA_ATTRIBUTE_SELECTORS.disableUserSelect]: {
+//     userSelect: 'none',
+//   },
+// });
+
+// const labelTokens = {
+//   'label-font-weight-nested': 400,
+//   'label-font-weight': 600,
+//   'label-color': '#121212',
+//   'label-letter-spacing': 0,
+//   'label-line-height': 1.5,
+//   'label-color-disabled': '#a0a0a0',
+//   'label-font-family': "'Work Sans', Arial, sans-serif",
+//   'label-font-size': '1rem',
+// };
+// const StyledElement = styled(BaseBox)({
+//   fontFamily: labelTokens['label-font-family'],
+//   fontSize:labelTokens['label-font-size'],
+//   lineHeight,
+//   color,
+//   fontWeight,
+//   ':where([data-disabled],[data-disabled] &)': {
+//     color: colorDisabled,
+//   },
+//   ':where([data-nested])': {
+//     fontWeight: fontWeightNested,
+//   },
+//   [DATA_ATTRIBUTE_SELECTORS.disableUserSelect]: {
+//     userSelect: 'none',
+//   },
+// });
+
 /**
  * The Label component is used for labelling form elements, such as radio inputs.
  */