feat(tokens): add new tokens json files

core/scripts/tokens.js

@@ -1,73 +1,114 @@
-/* For generating Design Tokens, we use Style Dictionary for several reasons:
-- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
-- It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
-- It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
-- It can easily scale to different necessities we might have in the future.
-*/
+// For generating Design Tokens, we use Style Dictionary for several reasons:
+// - It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
+// - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
+// - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
+// - It can easily scale to different necessities we might have in the future.
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const StyleDictionary = require('style-dictionary');
 
 const { fileHeader } = StyleDictionary.formatHelpers;
-
-// Empty for as an example of how we can add some extra variables, not from the tokens JSON
-const customVariables = ``;
-
-// Prefix for all generated variables
+const customVariables = ''; // Empty for example of how we can add some extra variables, not from the tokens JSON
 const variablesPrefix = 'ionic';
 
 function hexToRgb(hex) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
+  return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null;
+}
+
+function generateShadowValue(shadow) {
+  return `${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${shadow.color}`;
+}
+
+function generateFontFamilyValue(prop, variableType = 'css') {
+  const propName = prop.name.split('-').slice(0, -1).join('-');
+  return variableType === 'scss'
+    ? `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, "${prop.value}", sans-serif);`
+    : `--${variablesPrefix}-${propName}: "${prop.value}", sans-serif;`;
+}
+
+function generateTypographyValue(prop, dictionary) {
+  const typography = prop.value;
+  const fontSizeMap = createTypeMap(dictionary, 'font-size');
+  const fontWeightMap = createTypeMap(dictionary, 'font-weight');
+  const lineHeightMap = createTypeMap(dictionary, 'line-height');
+  const letterSpacingMap = createTypeMap(dictionary, 'letter-spacing');
+
+  return `
+$${variablesPrefix}-${prop.name}: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]},
+  font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]},
+  letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0},
+  line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]},
+  text-transform: ${typography.textTransform},
+  text-decoration: ${typography.textDecoration}
+);
+`;
+}
+
+function createTypeMap(dictionary, type) {
+  return Object.fromEntries(
+    Object.entries(dictionary.properties[type]).map(([key, token]) => [token.value, token.attributes.type])
+  );
+}
+
+function generateRgbValue(prop) {
+  const rgb = hexToRgb(prop.value);
+  return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${
+    rgb
+      ? `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`
+      : ``
+  }`;
 }
 
 // CSS vanilla :root format
 StyleDictionary.registerFormat({
   name: 'rootFormat',
   formatter({ dictionary, file }) {
-    // Add a prefix to all variable names
-    const prefixedVariables = dictionary.allProperties.map((prop) => {
-      const rgb = hexToRgb(prop.value);
-      return `  --${variablesPrefix}-${prop.name}: ${prop.value};${
-        rgb ? `\n  --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
-      }`;
-    });
+    const prefixedVariables = dictionary.allProperties
+      .filter((prop) => prop['$type'] !== 'typography')
+      .map((prop) => {
+        if (prop.attributes.category.startsWith('Elevation')) {
+          const cssShadow = prop.value.map(generateShadowValue).join(', ');
+          return `--${variablesPrefix}-${prop.name}: ${cssShadow};`;
+        } else if (prop.attributes.category.match('font-family')) {
+          return generateFontFamilyValue(prop);
+        } else {
+          const rgb = hexToRgb(prop.value);
+          return `  --${variablesPrefix}-${prop.name}: ${prop.value};${
+            rgb ? `\n  --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
+          }`;
+        }
+      });
 
-    return (
-      fileHeader({ file }) +
-      ':root {\n' +
-      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
-      customVariables +
-      '\n}\n'
-    );
+    return fileHeader({ file }) + ':root {\n' + prefixedVariables.join('\n') + customVariables + '\n}\n';
   },
 });
 
-// scss variables format
+// SCSS variables format
 StyleDictionary.registerFormat({
   name: 'scssVariablesFormat',
   formatter({ dictionary, file }) {
-    // Add a prefix to all variable names
-    const prefixedVariables = dictionary.allProperties.map((prop) => {
-      const rgb = hexToRgb(prop.value);
-      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${
-        rgb
-          ? `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`
-          : ``
-      }`;
+    const typographyProperties = dictionary.allProperties.filter((prop) => prop['$type'] === 'typography');
+    const otherProperties = dictionary.allProperties.filter((prop) => prop['$type'] !== 'typography');
+
+    const sortedProperties = [...otherProperties, ...typographyProperties];
+
+    const prefixedVariables = sortedProperties.map((prop) => {
+      if (prop.attributes.category.startsWith('Elevation')) {
+        const cssShadow = prop.value.map(generateShadowValue).join(', ');
+        return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${cssShadow});`;
+      } else if (prop.attributes.category.match('font-family')) {
+        return generateFontFamilyValue(prop, 'scss');
+      } else if (prop['$type'] === 'typography') {
+        return generateTypographyValue(prop, dictionary);
+      } else {
+        return generateRgbValue(prop);
+      }
     });
 
-    return (
-      fileHeader({ file }) +
-      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
-      customVariables +
-      '\n'
-    );
+    return fileHeader({ file }) + prefixedVariables.join('\n') + customVariables + '\n';
   },
 });
 
@@ -80,41 +121,31 @@ StyleDictionary.registerFormat({
       const className = `${prop.name}`;
       let utilityClass = '';
 
+      if (tokenType.startsWith('Elevation')) {
+        return `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
+      } else if (prop['$type'] === 'typography') {
+        return generateTypographyUtilityClass(prop, dictionary);
+      } else if (prop.attributes.category.match('font-family') || tokenType === 'scale') {
+        return;
+      }
+
       switch (tokenType) {
         case 'color':
-          utilityClass = `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
-.${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
+        case 'state':
+        case 'Guidelines':
+        case 'Disabled':
+        case 'Hover':
+        case 'Pressed':
+          utilityClass = generateColorUtilityClasses(prop, className);
           break;
-        case 'border':
-          const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${borderAttribute}: $ionic-${prop.name};\n}`;
+        case 'border-size':
+          utilityClass = `.${variablesPrefix}-${className} {\n  border-width: $ionic-${prop.name};\n}`;
           break;
         case 'font':
-          let fontAttribute;
-          switch (prop.attributes.type) {
-            case 'size':
-              fontAttribute = 'font-size';
-              break;
-            case 'weight':
-              fontAttribute = 'font-weight';
-              break;
-            case 'line-height':
-              fontAttribute = 'line-height';
-              break;
-            case 'letter-spacing':
-              fontAttribute = 'letter-spacing';
-              break;
-            case 'family':
-              return;
-          }
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
-          break;
-        case 'elevation':
-          utilityClass = `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
+          utilityClass = generateFontUtilityClass(prop, className);
           break;
         case 'space':
-          utilityClass = `.${variablesPrefix}-margin-${className} {\n  --margin-start: #{$ionic-${prop.name}};\n  --margin-end: #{$ionic-${prop.name}};\n  --margin-top: #{$ionic-${prop.name}};\n  --margin-bottom: #{$ionic-${prop.name}};\n\n  @include margin(${prop.value});\n};\n 
-.${variablesPrefix}-padding-${className} {\n  --padding-start: #{$ionic-${prop.name}};\n  --padding-end: #{$ionic-${prop.name}};\n  --padding-top: #{$ionic-${prop.name}};\n  --padding-bottom: #{$ionic-${prop.name}};\n\n  @include padding(${prop.value});\n};\n`;
+          utilityClass = generateSpaceUtilityClasses(prop, className);
           break;
         default:
           utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
@@ -131,6 +162,55 @@ StyleDictionary.registerFormat({
   },
 });
 
+function generateTypographyUtilityClass(prop, dictionary) {
+  const typography = prop.value;
+  const fontSizeMap = createTypeMap(dictionary, 'font-size');
+  const fontWeightMap = createTypeMap(dictionary, 'font-weight');
+  const lineHeightMap = createTypeMap(dictionary, 'line-height');
+  const letterSpacingMap = createTypeMap(dictionary, 'letter-spacing');
+
+  return `
+.${variablesPrefix}-${prop.name} {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]};
+  font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]};
+  letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0};
+  line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]};
+  text-transform: ${typography.textTransform};
+  text-decoration: ${typography.textDecoration};
+};
+`;
+}
+
+function generateColorUtilityClasses(prop, className) {
+  return `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
+.${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
+}
+
+function generateFontUtilityClass(prop, className) {
+  let fontAttribute;
+  switch (prop.attributes.type) {
+    case 'size':
+      fontAttribute = 'font-size';
+      break;
+    case 'weight':
+      fontAttribute = 'font-weight';
+      break;
+    case 'line-height':
+      fontAttribute = 'line-height';
+      break;
+    case 'letter-spacing':
+      fontAttribute = 'letter-spacing';
+      break;
+  }
+  return `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
+}
+
+function generateSpaceUtilityClasses(prop, className) {
+  return `.${variablesPrefix}-margin-${className} {\n  --margin-start: #{$ionic-${prop.name}};\n  --margin-end: #{$ionic-${prop.name}};\n  --margin-top: #{$ionic-${prop.name}};\n  --margin-bottom: #{$ionic-${prop.name}};\n\n  @include margin($ionic-${prop.name});\n};\n
+.${variablesPrefix}-padding-${className} {\n  --padding-start: #{$ionic-${prop.name}};\n  --padding-end: #{$ionic-${prop.name}};\n  --padding-top: #{$ionic-${prop.name}};\n  --padding-bottom: #{$ionic-${prop.name}};\n\n  @include padding($ionic-${prop.name});\n};\n`;
+}
+
 // Make Style Dictionary comply with the $ format on properties from W3C Guidelines
 const w3cTokenJsonParser = {
   pattern: /\.json|\.tokens\.json|\.tokens$/,
@@ -150,7 +230,7 @@ StyleDictionary.registerParser(w3cTokenJsonParser);
 
 // Generate Tokens
 StyleDictionary.extend({
-  source: ['./src/foundations/*.json'],
+  source: ['./src/foundations/tokens/*.json', './src/foundations/tokens/theme/*.json'],
   platforms: {
     css: {
       buildPath: './src/foundations/',

core/src/components/button/button.ionic.scss

@@ -132,20 +132,20 @@
 // -------------------------------------------------------------------------------
 
 :host(.button-soft) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-medium};
+  --border-radius: #{globals.$ionic-border-radius-200};
 }
 
 :host(.button-soft.button-xsmall),
 :host(.button-soft.button-small) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+  --border-radius: #{globals.$ionic-border-radius-100};
 }
 
 :host(.button-round) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-full};
+  --border-radius: #{globals.$ionic-border-radius-full};
 }
 
 :host(.button-rectangular) {
-  --border-radius: #{globals.$ionic-border-radius-square};
+  --border-radius: #{globals.$ionic-border-radius-0};
 }
 
 // Button Focused

core/src/components/card/card.ionic.scss

@@ -4,15 +4,15 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ionic-color-neutral-0};
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+  --background: #{globals.$ionic-color-base-white};
+  --border-radius: #{globals.$ionic-border-radius-100};
 
-  @include globals.padding(globals.$ionic-space-base);
+  @include globals.padding(globals.$ionic-space-400);
   @include globals.border-radius(var(--border-radius));
 
   display: block;
 
-  border: #{globals.$ionic-border-size-small} solid #{globals.$ionic-color-neutral-50};
+  border: #{globals.$ionic-border-size-025} solid #{globals.$ionic-color-neutral-500};
 
   background: var(--background);
   color: var(--color);
@@ -22,9 +22,9 @@
 // ---------------------------------------------
 
 :host(.card-round) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-large};
+  --border-radius: #{globals.$ionic-border-radius-400};
 }
 
 :host(.card-rectangular) {
-  --border-radius: #{globals.$ionic-border-radius-square};
+  --border-radius: #{globals.$ionic-border-radius-0};
 }