add typography styles

packages/ui/build-tokens.js

@@ -25,40 +25,6 @@ const supportedTokenTypeList = [
   'textDecoration',
 ]
 
-// old one
-
-// registerTransforms(StyleDictionary)
-
-// const sd = StyleDictionary.extend({
-//   source: 'tokens/%themeTokenSets%',
-//   platforms: {
-//     css: {
-//       transformGroup: 'tokens-studio',
-//       prefix: 'sd',
-//       buildPath: 'build/css/',
-//       files: [
-//         {
-//           destination: '_variables-%theme%.css',
-//           format: 'css/variables',
-//         },
-//       ],
-//     },
-//     js: {
-//       transformGroup: 'tokens-studio',
-//       buildPath: 'build/js/',
-//       files: [
-//         {
-//           destination: 'variables-%theme%.js',
-//           format: 'javascript/es6',
-//         },
-//       ],
-//     },
-//   },
-// })
-
-// sd.cleanAllPlatforms()
-// sd.buildAllPlatforms()
-
 registerTransforms(StyleDictionary)
 
 const formatTailwindValue = (tokenType, value) => {
@@ -153,6 +119,10 @@ function fileNameCleaner(fileName) {
   return fileName.split('/').pop().replace('.json', '')
 }
 
+/**
+ * BUILD SOURCE FILES
+ */
+
 sourceFiles.map(function (filePath) {
   const fileName = fileNameCleaner(filePath)
   const SD = StyleDictionary.extend(
@@ -161,10 +131,9 @@ sourceFiles.map(function (filePath) {
   SD.buildAllPlatforms()
 })
 
-// semanticFiles.map(function (file) {
-//   const SD = StyleDictionary.extend(getStyleDictionaryConfig(file, 'semantic', false))
-//   SD.buildAllPlatforms()
-// })
+/**
+ * BUILD THEME FILE
+ */
 
 themeFiles.map(function (filePath, i) {
   const buildTailwindFiles = filePath.includes('root') // i === 0
@@ -182,3 +151,65 @@ themeFiles.map(function (filePath, i) {
   )
   SD.buildAllPlatforms()
 })
+
+function convertToVariableIfNeeded(value) {
+  if (value.startsWith('{') && value.endsWith('}')) {
+    return `var(--${value.slice(1, -1).split('.').join('-')})`
+  }
+  return value
+}
+
+/**
+ * BUILD TYPOGRAPHY FILES
+ */
+
+/**
+ * Format for css typography classes
+ * This generates theme-independent css classes so we're fine with just using css variables here
+ */
+StyleDictionary.registerFormat({
+  name: 'css/typographyClasses',
+  formatter: (dictionary, config) =>
+    dictionary.allProperties
+      .map((prop) => {
+        return `
+.${prop.name} {
+  font: var(--${prop.name});
+  letter-spacing: ${convertToVariableIfNeeded(prop.original.value.letterSpacing)};
+  text-transform: ${convertToVariableIfNeeded(prop.original.value.textCase)};
+  text-decoration: ${convertToVariableIfNeeded(prop.original.value.textDecoration)};
+}`
+      })
+      .join('\n'),
+})
+
+function getTypographyConfig() {
+  console.log('Building: typography')
+  return {
+    source: [...semanticFiles, ...sourceFiles],
+    platforms: {
+      css: {
+        transforms: [
+          // 'resolveMath',
+          // 'size/px',
+          // 'type/fontWeight',
+          // 'size/letterspacing',
+          'name/cti/kebab',
+        ],
+        transformGroup: 'tokens-studio',
+        buildPath: 'build/css/',
+        files: [
+          {
+            destination: `source/typography-classes.css`,
+            format: 'css/typographyClasses',
+            selector: ':root',
+            filter: (token) => token.type === 'typography',
+          },
+        ],
+      },
+    },
+  }
+}
+
+const typographyBuild = StyleDictionary.extend(getTypographyConfig())
+typographyBuild.buildAllPlatforms()

packages/ui/build/css/source/global-two.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 06 May 2023 12:08:53 GMT
+ * Generated on Mon, 08 May 2023 14:42:44 GMT
  */
 
 :root {

packages/ui/build/css/source/global.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 06 May 2023 12:08:53 GMT
+ * Generated on Mon, 08 May 2023 14:42:44 GMT
  */
 
 :root {

packages/ui/build/css/source/typography-classes.css

@@ -0,0 +1,182 @@
+
+.typography-h1-bold {
+  font: var(--typography-h1-bold);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h1-regular {
+  font: var(--typography-h1-regular);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h2-bold {
+  font: var(--typography-h2-bold);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h2-regular {
+  font: var(--typography-h2-regular);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h3-bold {
+  font: var(--typography-h3-bold);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h3-regular {
+  font: var(--typography-h3-regular);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h4-bold {
+  font: var(--typography-h4-bold);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h4-regular {
+  font: var(--typography-h4-regular);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h4-mono {
+  font: var(--typography-h4-mono);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-uppercase);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h5-bold {
+  font: var(--typography-h5-bold);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-h5-regular {
+  font: var(--typography-h5-regular);
+  letter-spacing: var(--letterSpacing-1);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-base-normal {
+  font: var(--typography-body-base-normal);
+  letter-spacing: var(--letterSpacing-default);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-base-mono {
+  font: var(--typography-body-base-mono);
+  letter-spacing: var(--letterSpacing-+8);
+  text-transform: var(--textCase-uppercase);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-lg-normal {
+  font: var(--typography-body-lg-normal);
+  letter-spacing: var(--letterSpacing-default);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-xs-normal {
+  font: var(--typography-body-xs-normal);
+  letter-spacing: var(--letterSpacing-default);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-xs-code-header {
+  font: var(--typography-body-xs-code-header);
+  letter-spacing: var(--letterSpacing-increased);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-xss-code {
+  font: var(--typography-body-xss-code);
+  letter-spacing: 0.5%;
+  text-transform: var(--textCase-uppercase);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-sm-normal {
+  font: var(--typography-body-sm-normal);
+  letter-spacing: var(--letterSpacing-default);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-sm-code-header {
+  font: var(--typography-body-sm-code-header);
+  letter-spacing: var(--letterSpacing-increased);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-sm-code-normal {
+  font: var(--typography-body-sm-code-normal);
+  letter-spacing: var(--letterSpacing-default);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-body-sm-bullet-points {
+  font: var(--typography-body-sm-bullet-points);
+  letter-spacing: var(--letterSpacing-default);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-button-xs {
+  font: var(--typography-button-xs);
+  letter-spacing: var(--letterSpacing-0);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-button-sm {
+  font: var(--typography-button-sm);
+  letter-spacing: var(--letterSpacing-0);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-form-label {
+  font: var(--typography-form-label);
+  letter-spacing: var(--letterSpacing-0);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-form-label-secondary {
+  font: var(--typography-form-label-secondary);
+  letter-spacing: var(--letterSpacing-0);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}
+
+.typography-table-header {
+  font: var(--typography-table-header);
+  letter-spacing: var(--letterSpacing-0);
+  text-transform: var(--textCase-none);
+  text-decoration: var(--textDecoration-none);
+}

packages/ui/build/css/themes/dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 06 May 2023 12:08:53 GMT
+ * Generated on Mon, 08 May 2023 14:42:44 GMT
  */
 
 .dark {

packages/ui/build/css/themes/darker-dark.css

@@ -1,9 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Sat, 06 May 2023 12:08:53 GMT
+ * Generated on Mon, 08 May 2023 14:42:44 GMT
  */
 
-.dark {
+.darker-dark {
   --utilityMixNegative: #000;
   --utilityMixPositive: #fff;
   --darkenPercentage: 0.2;
@@ -20,12 +20,8 @@
   --themeVariablesBrand: #d626dc;
   --textColorBodyDefault: var(--themeVariablesTextBody);
   --backgroundColorBodyAlt: var(--themeVariablesBackgroundBodyAlt);
-  --backgroundColorBody: var(
-    --themeVariablesBackgroundBody
-  ); /* Background color used for the main page body. */
-  --backgroundColorDefault: var(
-    --themeVariablesBackground
-  ); /* Default background color for any container. */
+  --backgroundColorBody: var(--themeVariablesBackgroundBody); /* Background color used for the main page body. */
+  --backgroundColorDefault: var(--themeVariablesBackground); /* Default background color for any container. */
   --textColorBodyLightest: lch(32.6 0 0);
   --textColorBodyLighter: lch(46.5 0 0);
   --textColorBodyLight: lch(65.1 0 0);

packages/ui/build/css/themes/light.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sat, 06 May 2023 12:08:53 GMT
+ * Generated on Mon, 08 May 2023 14:42:44 GMT
  */
 
 .light {

packages/ui/copy-tokens.js

@@ -13,13 +13,13 @@ const baseUrl = `https://raw.githubusercontent.com/MildTomato/supabase-design-to
  * Files that need to be copied over from Tokens repo
  */
 const TOKEN_FILES_METADATA = [
-  // figma tokens misc config files
+  // figma tokens misc config files (comment out for now)
   { fileName: '$metadata.json', type: 'config' },
   { fileName: '$themes.json', type: 'config' },
-  // source files
+  // source files (comment out for now)
   { fileName: 'global.json', type: 'source' },
   { fileName: 'global-two.json', type: 'source' },
-  // semantic
+  // semantic (comment out for now)
   { fileName: 'typography.json', type: 'semantic' },
   // themes
   { fileName: 'root.json', type: 'theme' }, // root theme

packages/ui/package.json

@@ -6,17 +6,11 @@
   "license": "MIT",
   "scripts": {
     "build:icons": "node --experimental-modules internals/populate-icons.js",
-    "build-transform-global": "npx token-transformer tokens.json styles/tokens/01_base/global.json global",
-    "build-transform-dark": "npx token-transformer tokens.json styles/tokens/02_themes/dark.json exported/root",
-    "build-transform-light": "npx token-transformer tokens.json styles/tokens/02_themes/light.json exported/root,exported/light",
-    "build-transform-typography": "npx token-transformer tokens.json styles/tokens/03_semantic/typography.json global,typography global --resolveReferences=false",
-    "build-transform": "npm run build-transform-dark && npm run build-transform-light",
-    "build-tailwind": "node style-token.js",
+    "build-tokens": "node build-tokens.js",
     "copy-tokens": "node copy-tokens.js",
-    "build-styles": "npm run copy-tokens && npm run build-transform && node style-token.js",
+    "generate-styles": "npm run copy-tokens && npm run build-tokens",
     "build-storybook": "storybook build",
-    "storybook": "storybook dev -p 6006",
-    "build-tokens": "node build-tokens.js"
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
     "@headlessui/react": "^1.0.0",