chore: fix typography attrs and layering

packages/css/baseline/typography.css → packages/css/base/typography.css

@@ -1,8 +1,6 @@
 /** Heading */
 
 .ds-heading {
-  --dsc-bottom-spacing: var(--ds-spacing-4);
-
   margin: 0;
 
   @composes ds-heading-text--md from '../utilities.css';
@@ -96,48 +94,34 @@
 }
 
 /** Label */
-.ds-label--md {
-  font-size: var(--ds-label-md-font-size);
-  font-weight: var(--ds-label-md-font-weight);
-  letter-spacing: var(--ds-label-md-letter-spacing);
-  line-height: var(--ds-label-md-line-height);
-  color: var(--ds-color-neutral-text-default);
+.ds-label {
   display: inline-block;
   margin: 0;
   padding: 0;
-}
 
-.ds-label--xs {
-  font-weight: var(--ds-label-xs-font-weight);
-  line-height: var(--ds-label-xs-line-height);
-  font-size: var(--ds-label-xs-font-size);
-  letter-spacing: var(--ds-label-xs-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-}
+  @composes ds-label--md from '../utilities.css';
 
-.ds-label--sm {
-  font-weight: var(--ds-label-sm-font-weight);
-  line-height: var(--ds-label-sm-line-height);
-  font-size: var(--ds-label-sm-font-size);
-  letter-spacing: var(--ds-label-sm-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-}
+  font-weight: var(--ds-font-weight-medium);
 
-.ds-label--lg {
-  font-weight: var(--ds-label-lg-font-weight);
-  line-height: var(--ds-label-lg-line-height);
-  font-size: var(--ds-label-lg-font-size);
-  letter-spacing: var(--ds-label-lg-letter-spacing);
-  color: var(--ds-color-neutral-text-default);
-  display: inline-block;
-  margin: 0;
-  padding: 0;
+  &[data-size='xs'] {
+    @composes ds-label--xs from '../utilities.css';
+  }
+
+  &[data-size='sm'] {
+    @composes ds-label--sm from '../utilities.css';
+  }
+
+  &[data-size='lg'] {
+    @composes ds-label--lg from '../utilities.css';
+  }
+
+  &[data-weight='semibold'] {
+    font-weight: var(--ds-font-weight-semibold);
+  }
+
+  &[data-weight='regular'] {
+    font-weight: var(--ds-font-weight-regular);
+  }
 }
 
 /** Validation message */
@@ -187,20 +171,6 @@
   }
 }
 
-/** Font weight
- ** used for weight on Label */
-.ds-font-weight--medium {
-  font-weight: var(--ds-font-weight-medium);
-}
-
-.ds-font-weight--semibold {
-  font-weight: var(--ds-font-weight-semibold);
-}
-
-.ds-font-weight--regular {
-  font-weight: var(--ds-font-weight-regular);
-}
-
 /** Line height
  ** used for long, short Paragraph */
 .ds-line-height--sm {

packages/css/card.css

@@ -18,7 +18,7 @@
   overflow: clip; /* Needed to clip media elements and and Card.Block */
   padding: var(--dsc-card-padding);
 
-  @composes ds-paragraph from './baseline/typography.css'; /* Must be after all: unset */
+  @composes ds-paragraph from './base/typography.css'; /* Must be after all: unset */
 
   /* Style link in heading, or heading when Card is anchor */
   :is(h1, h2, h3, h4, h5, h6) a:any-link, /* Using :any-link to target both a and a:visited */

packages/css/index.css

@@ -1,11 +1,10 @@
 @charset "UTF-8";
 
-@layer ds.reset, ds.baseline, ds.theme, ds.base, ds.components;
+@layer ds.reset, ds.base, ds.theme, ds.components;
 
 /** Import order defines ordinal specificity for layers */
-@import url('./baseline/ds-reset.css') layer(ds.reset);
-@import url('./baseline/baseline.css') layer(ds.baseline);
-@import url('./baseline/typography.css') layer(ds.base.typography);
+@import url('./base/ds-reset.css') layer(ds.reset);
+@import url('./base/typography.css') layer(ds.base.typography);
 @import url('./utilities.css') layer(ds.base.utilities);
 @import url('./button.css') layer(ds.components);
 @import url('./alert.css') layer(ds.components);

packages/css/utilities.css

@@ -17,6 +17,9 @@
   --dsc-focus-border-width: 3px; /* Default focus border width */
   --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
   --dsc-focus-outline: var(--ds-color-focus-outer) solid var(--dsc-focus-border-width);
+
+  color: var(--ds-color-neutral-text-default);
+  background-color: var(--ds-color-neutral-background-default);
 }
 
 /**
@@ -195,3 +198,31 @@
   font-size: var(--ds-heading-2xl-font-size);
   letter-spacing: var(--ds-heading-2xl-letter-spacing);
 }
+
+.ds-label--md {
+  font-size: var(--ds-label-md-font-size);
+  font-weight: var(--ds-label-md-font-weight);
+  letter-spacing: var(--ds-label-md-letter-spacing);
+  line-height: var(--ds-label-md-line-height);
+}
+
+.ds-label--xs {
+  font-weight: var(--ds-label-xs-font-weight);
+  line-height: var(--ds-label-xs-line-height);
+  font-size: var(--ds-label-xs-font-size);
+  letter-spacing: var(--ds-label-xs-letter-spacing);
+}
+
+.ds-label--sm {
+  font-weight: var(--ds-label-sm-font-weight);
+  line-height: var(--ds-label-sm-line-height);
+  font-size: var(--ds-label-sm-font-size);
+  letter-spacing: var(--ds-label-sm-letter-spacing);
+}
+
+.ds-label--lg {
+  font-weight: var(--ds-label-lg-font-weight);
+  line-height: var(--ds-label-lg-line-height);
+  font-size: var(--ds-label-lg-font-size);
+  letter-spacing: var(--ds-label-lg-letter-spacing);
+}

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

@@ -36,11 +36,9 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
   return (
     <Component
       ref={ref}
-      className={cl(
-        `ds-label--${size}`,
-        weight && `ds-font-weight--${weight}`,
-        className,
-      )}
+      className={cl('ds-label', className)}
+      data-size={size}
+      data-weight={weight}
       {...rest}
     />
   );