feat: update tailwind preset, add sensitive colors

emdgroup-liquid · Nov 5, 2021 · 0b7cfe0 · 0b7cfe0
1 parent 8d1c931
commit 0b7cfe0
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 51 deletions.
diff --git a/scripts/updateDesignTokens.ts b/scripts/updateDesignTokens.ts
@@ -198,7 +198,7 @@ async function getTokensFromFigma(
   const { document, styles } = (await result.json()).nodes[nodeId]
   const { children: figmaData } = document
   const { themes, variants } = parseThemesAndVariants(
-    figmaData.find(({ name }) => name.indexOf('Theme Colors') === 0).children,
+    figmaData.find(({ name }) => name === 'Themes').children,
     styles
   )
 
@@ -213,7 +213,7 @@ async function getTokensFromFigma(
     colors: {
       ...variants,
       ...parseColors(
-        figmaData.find((child) => child.name === 'Accessible Colors').children
+        figmaData.find((child) => child.name === 'Colors').children
       ),
     },
     typography: parseTypography(
@@ -402,7 +402,6 @@ function generateJSONTokenFile(tokenCollection) {
   )
 }
 
-// eslint-disable-next-line @typescript-eslint/no-extra-semi
 ;(async () => {
   try {
     const tokenCollection = await getTokensFromFigma()

diff --git a/src/liquid/global/styles/colors/colors.css b/src/liquid/global/styles/colors/colors.css
@@ -52,6 +52,10 @@
   --ld-col-rr-alpha-low: rgba(230, 30, 80, 0.2);
   --ld-col-rr-alpha-lowest: rgba(230, 30, 80, 0.1);
   --ld-col-rr: rgb(230, 30, 80);
+  --ld-col-sb: rgb(150, 215, 210);
+  --ld-col-sg: rgb(180, 220, 150);
+  --ld-col-sp: rgb(225, 195, 205);
+  --ld-col-sy: rgb(255, 220, 185);
   --ld-col-vc-100: rgb(248, 253, 254);
   --ld-col-vc-200: rgb(100, 211, 222);
   --ld-col-vc-300: rgb(45, 190, 205);

diff --git a/src/liquid/global/styles/colors/index.md b/src/liquid/global/styles/colors/index.md
@@ -112,6 +112,13 @@ Use rich colors for the structure of interfaces, actionable items, and validatio
 <docs-color var="--ld-col-vy-500"></docs-color>
 <docs-color var="--ld-col-vy-600"></docs-color>
 
+### Sensitive Colors
+
+<docs-color var="--ld-col-sb"></docs-color>
+<docs-color var="--ld-col-sg"></docs-color>
+<docs-color var="--ld-col-sp"></docs-color>
+<docs-color var="--ld-col-sy"></docs-color>
+
 ## Theme palettes
 
 ### Bubblegum

diff --git a/src/liquid/global/styles/design-tokens.json b/src/liquid/global/styles/design-tokens.json
@@ -251,7 +251,11 @@
     "wht-alpha-medium": "rgba(255, 255, 255, 0.5)",
     "wht-alpha-low": "rgba(255, 255, 255, 0.2)",
     "wht-alpha-lowest": "rgba(255, 255, 255, 0.1)",
-    "wht-alpha-none": "rgba(255, 255, 255, 0)"
+    "wht-alpha-none": "rgba(255, 255, 255, 0)",
+    "sg": "rgb(180, 220, 150)",
+    "sy": "rgb(255, 220, 185)",
+    "sb": "rgb(150, 215, 210)",
+    "sp": "rgb(225, 195, 205)"
   },
   "typography": {
     "display": {
@@ -415,4 +419,4 @@
     "m": "0.25rem",
     "l": "0.5rem"
   }
-}
+}
diff --git a/src/liquid/global/styles/tailwindPreset.ts b/src/liquid/global/styles/tailwindPreset.ts
@@ -1,70 +1,133 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const plugin = require('tailwindcss/plugin')
-const designTokens = require('./design-tokens.json')
-
-function decToHex(value) {
-  if (value > 255) {
-    return 'FF'
-  } else if (value < 0) {
-    return '00'
-  } else {
-    return value.toString(16).padStart(2, '0')
+const designTokens: DesignTokens = require('./design-tokens.json')
+
+type Theme = Record<string, string> & {
+  default?: boolean
+}
+
+type Typo = {
+  fontFamily: string
+  fontSize: string
+  lineHeight: string
+}
+
+type DesignTokens = {
+  borderRadii: Record<string, string>
+  colors: Record<string, string>
+  shadows: Record<string, string>
+  spacings: Record<string, string>
+  themes: Record<string, Theme>
+  typography: {
+    body: Record<string, Typo>
+    display: Record<string, Typo>
   }
 }
-function rgbToHex(r, g, b) {
-  return '#' + decToHex(r) + decToHex(g) + decToHex(b)
+
+type TailwindColorObject = {
+  [key: string]: TailwindColorObject | string
 }
-function colorValueToHex(colorValue: string) {
-  const rgbRegex = /(\d{1,3}), (\d{1,3}), (\d{1,3})/g
-  const extraction = rgbRegex.exec(colorValue)
-  return rgbToHex(
-    parseInt(extraction[1]),
-    parseInt(extraction[2]),
-    parseInt(extraction[3])
-  )
+
+const colors = { thm: {} }
+const createNestedColorFromFlat = (
+  key: string,
+  colorObject: TailwindColorObject,
+  colorTokenReference?: string
+) => {
+  const nameParts = key.split('-')
+  let currentColorObject = colorObject
+
+  nameParts.forEach((namePart, index) => {
+    const lastIndex = nameParts.length - 1
+
+    if (index === lastIndex) {
+      if (lastIndex === 0) {
+        if (!currentColorObject[namePart]) {
+          currentColorObject[namePart] = {}
+        }
+
+        currentColorObject[namePart]['DEFAULT'] = colorTokenReference
+          ? colors[colorTokenReference].DEFAULT
+          : `var(--ld-thm-${key})`
+        return
+      }
+
+      currentColorObject[namePart] = colorTokenReference
+        ? designTokens.colors[colorTokenReference]
+        : `var(--ld-thm-${key})`
+      return
+    }
+
+    if (!currentColorObject[namePart]) {
+      currentColorObject[namePart] = {}
+    }
+
+    currentColorObject = currentColorObject[namePart] as TailwindColorObject
+  })
 }
 
 // Extract colors
-// Tailwind's background-opacity utility only works with hex color values, so we convert rgb to hex.
-const colors = {}
 Object.entries(designTokens.colors).forEach(([key, value]) => {
-  const hex = colorValueToHex(value as string)
+  const [name, isDefault] = key.split('/')
+  const nameParts = name.split('-')
+  let currentColorObject = colors
 
-  const [, base, modifier, isDefault] =
-    /^([a-z-]+)(\d)*(\/default)?$/.exec(key) || []
+  nameParts.forEach((namePart, index) => {
+    const lastIndex = nameParts.length - 1
+    const defaultIndex = nameParts.length - 2
 
-  if (!modifier) {
-    colors[key] = hex
-    return
-  }
+    if (index === lastIndex) {
+      if (lastIndex === 0) {
+        if (!currentColorObject[namePart]) {
+          currentColorObject[namePart] = {}
+        }
 
-  if (!colors[base]) {
-    colors[base] = {}
-  }
+        currentColorObject[namePart].DEFAULT = value
+        return
+      }
 
-  if (isDefault) {
-    colors[base].DEFAULT = hex
-  }
-  colors[base][modifier.padEnd(3, '0')] = hex
-})
-Object.entries(designTokens.themes).forEach(([theme, themeColors]) => {
-  colors[theme] = {}
-  Object.entries(themeColors).forEach(([key, value]) => {
-    colors[theme][key] = colorValueToHex(value)
+      currentColorObject[namePart] = value
+      return
+    }
+
+    if (!currentColorObject[namePart]) {
+      currentColorObject[namePart] = {}
+    }
+
+    if (isDefault && index === defaultIndex) {
+      currentColorObject[namePart].DEFAULT = value
+    }
+
+    currentColorObject = currentColorObject[namePart]
   })
 })
 
+// Extract theme colors
+Object.entries(designTokens.themes).forEach(
+  ([themeName, theme], themeIndex) => {
+    const isFirstTheme = themeIndex === 0
+    colors[themeName] = {}
+
+    Object.entries(theme).forEach(([key, value]) => {
+      if (typeof value !== 'boolean') {
+        createNestedColorFromFlat(key, colors[themeName], value)
+
+        if (isFirstTheme) {
+          // Creates dynamic colors based on custom properties
+          createNestedColorFromFlat(key, colors.thm)
+        }
+      }
+    })
+  }
+)
+
 // Extract typography
 const typography = {}
-const fontSize = designTokens
+const fontSize = {}
 Object.entries({
   ...designTokens.typography.display,
   ...designTokens.typography.body,
-} as {
-  fontSize: string
-  lineHeight: string
-  fontFamily: string
-}[]).forEach(([key, value]) => {
+}).forEach(([key, value]) => {
   typography[`.typo-${key}`] = value
   fontSize[key] = value.fontSize
 })