Added theme and baseline layers

packages/cli/src/tokens/configs.ts

@@ -78,6 +78,7 @@ type GetConfig = (options: {
 
 export const colorModeVariables: GetConfig = ({ mode = 'light', outPath, theme }) => {
   const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
+  const layer = `ds.theme.color.${mode}`;
 
   return {
     log: { verbosity: 'silent' },
@@ -89,6 +90,7 @@ export const colorModeVariables: GetConfig = ({ mode = 'light', outPath, theme }
         mode,
         theme,
         selector,
+        layer,
         //
         prefix,
         buildPath: `${outPath}/${theme}/`,
@@ -112,6 +114,7 @@ export const colorModeVariables: GetConfig = ({ mode = 'light', outPath, theme }
 
 export const semanticVariables: GetConfig = ({ outPath, theme }) => {
   const selector = `:root`;
+  const layer = `ds.theme.semantic`;
 
   /**
    * This is a workaround for our formatters to support transative transformers while retaining outputReference.
@@ -134,6 +137,7 @@ export const semanticVariables: GetConfig = ({ outPath, theme }) => {
         basePxFontSize,
         isCalculatedToken,
         selector,
+        layer,
         //
         prefix,
         buildPath: `${outPath}/${theme}/`,
@@ -198,6 +202,7 @@ export const typescriptTokens: GetConfig = ({ mode = 'unknown', outPath, theme }
 
 export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => {
   const selector = `${typography === 'primary' ? ':root, ' : ''}[data-ds-typography="${typography}"]`;
+  const layer = `ds.theme.typography.${typography}`;
 
   return {
     log: { verbosity: 'silent' },
@@ -207,6 +212,7 @@ export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => {
         prefix,
         typography,
         selector,
+        layer,
         buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
         transforms: [nameKebab.name, 'ts/size/px', sizeRem.name, 'ts/size/lineheight', 'ts/typography/fontWeight'],

packages/cli/src/tokens/formats/css-classes.ts

@@ -49,7 +49,7 @@ export const cssClassesTypography: Format = {
   name: 'ds/css-classes-typography',
   format: async function ({ dictionary, file, options, platform }) {
     const { outputReferences } = options;
-    const { selector, typography } = platform;
+    const { selector, layer } = platform;
 
     const header = await fileHeader({ file });
 
@@ -124,6 +124,6 @@ export const cssClassesTypography: Format = {
     const variables = formattedTokens.variables.join('\n');
     const content = selector ? `${selector} {\n${variables}\n${classes}\n}` : classes;
 
-    return header + `@layer ds.base.typography.${typography} {\n${content}\n}\n`;
+    return header + `@layer ${layer} {\n${content}\n}\n`;
   },
 };

packages/cli/src/tokens/formats/css-variables.ts

@@ -19,7 +19,7 @@ export const cssVariables: Format = {
   format: async function ({ dictionary, file, options, platform }) {
     const { allTokens } = dictionary;
     const { outputReferences } = options;
-    const { selector, isCalculatedToken, mode } = platform;
+    const { selector, isCalculatedToken, mode, layer } = platform;
 
     const mode_ = mode as string;
 
@@ -51,6 +51,6 @@ export const cssVariables: Format = {
     const content = `{\n${formattedVariables.join('\n')}\n}\n`;
     const autoSelectorContent = ['light', 'dark'].includes(mode_) ? prefersColorScheme(mode_, content) : '';
 
-    return header + `${selector} ${content}` + autoSelectorContent;
+    return header + `@layer ${layer} {\n${selector} ${content} ${autoSelectorContent}\n}\n`;
   },
 };

packages/css/baseline/ds-reset.css

@@ -2,21 +2,19 @@
 
 /* https://wiki.csswg.org/ideas/mistakes */
 
-@layer ds.reset {
-  [class^='ds-'],
-  [class^='ds-']::before,
-  [class^='ds-']::after {
-    box-sizing: border-box;
-  }
+[class^='ds-'],
+[class^='ds-']::before,
+[class^='ds-']::after {
+  box-sizing: border-box;
+}
 
-  /* Inherit fonts for inputs and buttons */
-  input[class^='ds-'],
-  button[class^='ds-'],
-  textarea[class^='ds-'],
-  select[class^='ds-'] {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    font-weight: inherit;
-  }
+/* Inherit fonts for inputs and buttons */
+input[class^='ds-'],
+button[class^='ds-'],
+textarea[class^='ds-'],
+select[class^='ds-'] {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
 }

packages/css/baseline/reset.css

@@ -2,95 +2,93 @@
 
 /* https://wiki.csswg.org/ideas/mistakes */
 
-@layer ds.reset {
-  /* Box sizing rules */
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
-  /* Prevent font size inflation */
-  html {
-    text-size-adjust: none;
-  }
+/* Prevent font size inflation */
+html {
+  text-size-adjust: none;
+}
 
-  /* Remove default margin in favour of better control in authored CSS */
-  body,
-  h1,
-  h2,
-  h3,
-  h4,
-  p,
-  figure,
-  blockquote,
-  dl,
-  dd {
-    margin-block-end: 0;
-  }
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-end: 0;
+}
 
-  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-  ul[role='list'],
-  ol[role='list'] {
-    list-style: none;
-  }
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
 
-  /* Set core body defaults */
-  body {
-    min-height: 100vh;
-    line-height: 1.5;
-  }
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
 
-  /* Set shorter line heights on headings and interactive elements */
-  h1,
-  h2,
-  h3,
-  h4,
-  button,
-  input,
-  label {
-    line-height: 1.1;
-  }
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
 
-  /* Balance text wrapping on headings */
-  h1,
-  h2,
-  h3,
-  h4 {
-    text-wrap: balance;
-  }
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
 
-  /* A elements that don't have a class get default styles */
-  a:not([class]) {
-    text-decoration-skip-ink: auto;
-    /* stylelint-disable-next-line value-keyword-case */
-    color: currentColor;
-  }
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  /* stylelint-disable-next-line value-keyword-case */
+  color: currentColor;
+}
 
-  /* Make images easier to work with */
-  img,
-  picture {
-    max-width: 100%;
-    display: block;
-  }
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
 
-  /* Inherit fonts for inputs and buttons */
-  input,
-  button,
-  textarea,
-  select {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-  }
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+}
 
-  /* Make sure textareas without a rows attribute are not tiny */
-  textarea:not([rows]) {
-    min-height: 10em;
-  }
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
 
-  /* Anything that has been anchored to should have extra scroll margin */
-  :target {
-    scroll-margin-block: 5ex;
-  }
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
 }

packages/css/baseline/typography/error-message.css

@@ -0,0 +1,29 @@
+.ds-error-message {
+  --dsc-bottom-spacing: var(--ds-spacing-5);
+
+  margin: 0;
+}
+
+.ds-error-message--error {
+  color: var(--ds-color-danger-text-subtle);
+}
+
+.ds-error-message--spacing {
+  margin-bottom: var(--dsc-bottom-spacing);
+}
+
+.ds-error_message--lg {
+  --dsc-bottom-spacing: var(--ds-spacing-5);
+}
+
+.ds-error_message--md {
+  --dsc-bottom-spacing: var(--ds-spacing-5);
+}
+
+.ds-error_message--sm {
+  --dsc-bottom-spacing: var(--ds-spacing-4);
+}
+
+.ds-error_message--xs {
+  --dsc-bottom-spacing: var(--ds-spacing-3);
+}

packages/css/baseline/typography/heading.css

@@ -0,0 +1,38 @@
+.ds-heading {
+  --dsc-bottom-spacing: var(--ds-spacing-6);
+
+  margin: 0;
+  color: var(--ds-color-neutral-text-default);
+}
+
+.ds-heading--spacing {
+  margin-bottom: var(--dsc-bottom-spacing);
+}
+
+.ds-heading--2xl {
+  --dsc-bottom-spacing: var(--ds-spacing-7);
+}
+
+.ds-heading--xl {
+  --dsc-bottom-spacing: var(--ds-spacing-6);
+}
+
+.ds-heading--lg {
+  --dsc-bottom-spacing: var(--ds-spacing-5);
+}
+
+.ds-heading--md {
+  --dsc-bottom-spacing: var(--ds-spacing-4);
+}
+
+.ds-heading--sm {
+  --dsc-bottom-spacing: var(--ds-spacing-3);
+}
+
+.ds-heading--xs {
+  --dsc-bottom-spacing: var(--ds-spacing-2);
+}
+
+.ds-heading--2xs {
+  --dsc-bottom-spacing: var(--ds-spacing-1);
+}

packages/css/baseline/typography/ingress.css

@@ -0,0 +1,26 @@
+.ds-ingress {
+  --dsc-bottom-spacing: var(--ds-spacing-5);
+
+  margin: 0;
+  color: var(--ds-color-neutral-text-default);
+}
+
+.ds-ingress--spacing {
+  margin-bottom: var(--dsc-bottom-spacing);
+}
+
+.ds-ingress--lg {
+  --dsc-bottom-spacing: var(--ds-spacing-6);
+}
+
+.ds-ingress--md {
+  --dsc-bottom-spacing: var(--ds-spacing-5);
+}
+
+.ds-ingress--sm {
+  --dsc-bottom-spacing: var(--ds-spacing-7);
+}
+
+.ds-ingress--xs {
+  --dsc-bottom-spacing: var(--ds-spacing-8);
+}