fix: update config (#23)

* feat(icons): itegrate icons poc [KHCP-7647]

* chore: add comments

* refactor: config file

* fix: scss mixin

* chore: progress

* chore: progress

* revert: remove icons

* chore: rename format

config.js

@@ -24,7 +24,9 @@ const config = {
 const customFileHeader = (defaultMessage) => {
   return [
     ...defaultMessage,
-    'Source: https://github.com/Kong/design-system',
+    'Author: Kong, Inc.',
+    'License: Apache-2.0',
+    'GitHub: https://github.com/Kong/design-system',
   ]
 }
 
@@ -35,18 +37,30 @@ const customFileHeader = (defaultMessage) => {
  * Example:
  * ```css
  * .custom-container {
- *   @include kong-css-variables;
+ *   @include kui-css-variables;
  * }
  * ```
  */
 const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers
 StyleDictionary.registerFormat({
-  name: 'cssVariablesMixin',
+  name: 'css/variables/custom/sass/mixin',
   formatter: function({ dictionary, file, options }) {
     const { outputReferences } = options
 
     return fileHeader({ file }) +
-      '@mixin kong-css-variables {\n' +
+      '/**\n' +
+      ' * @kui-css-variables\n' +
+      ' * Create a custom format to utilize CSS variables inside a SCSS mixin, which allows you to\n' +
+      ' * scope the CSS variables inside of a custom selector. Example usage in https://github.com/Kong/kong-auth-elements \n' +
+      ' *\n' +
+      ' * Example:\n' +
+      ' * ```css\n' +
+      ' * .custom-container {\n' +
+      ' *   @include kui-css-variables;\n' +
+      ' * }\n' +
+      ' * ```\n' +
+      '*/\n' +
+      '@mixin kui-css-variables {\n' +
       formattedVariables({ format: 'css', dictionary, outputReferences }) +
       '\n}\n'
   },
@@ -55,11 +69,16 @@ StyleDictionary.registerFormat({
 // Create an empty platforms object
 const platforms = {}
 
-// CSS variables
+/**
+ * CSS Variables
+ */
 platforms.css = {
-  prefix: KONG_TOKEN_PREFIX,
+  prefix: KONG_TOKEN_PREFIX, // required
   transformGroup: 'css',
   buildPath: `${TOKEN_DIRECTORY}/css/`,
+  options: {
+    fileHeader: customFileHeader,
+  },
   transforms: [
     'attribute/cti',
     'name/cti/kebab',
@@ -70,20 +89,24 @@ platforms.css = {
       destination: 'variables.css',
       format: 'css/variables',
       options: {
-        fileHeader: customFileHeader,
         selector: ':root', // You can override the default selector; may be necessary for consumers (e.g. Kongponents)
       },
-      // Exclude alias tokens
-      filter: (token) => token.isSource === true,
+      // Exclude alias tokens and asset tokens compiled in a separate file
+      filter: (token) => token.isSource === true && token.attributes.category !== 'asset',
     },
   ],
 }
 
-// SCSS variables
+/**
+ * SCSS Variables
+ */
 platforms.scss = {
-  prefix: KONG_TOKEN_PREFIX,
+  prefix: KONG_TOKEN_PREFIX, // required
   transformGroup: 'scss',
   buildPath: `${TOKEN_DIRECTORY}/scss/`,
+  options: {
+    fileHeader: customFileHeader,
+  },
   transforms: [
     'attribute/cti',
     'name/cti/kebab',
@@ -94,30 +117,31 @@ platforms.scss = {
     {
       destination: '_variables.scss',
       format: 'scss/variables',
-      options: {
-        fileHeader: customFileHeader,
-      },
-      // Exclude alias tokens
-      filter: (token) => token.isSource === true,
+      // Exclude alias tokens and asset tokens compiled in a separate file
+      filter: (token) => token.isSource === true && token.attributes.category !== 'asset',
     },
     // SCSS CSS variables mixin
     {
       destination: '_mixins.scss',
-      format: 'cssVariablesMixin',
-      options: {
-        fileHeader: customFileHeader,
-      },
-      // Exclude alias tokens
-      filter: (token) => token.isSource === true,
+      format: 'css/variables/custom/sass/mixin',
+      // Exclude alias tokens and asset tokens compiled in a separate file
+      filter: (token) => token.isSource === true && token.attributes.category !== 'asset',
     },
   ],
 }
 
-// JavaScript
+/**
+ * JavaScript Variables
+ *
+ * Important: Every exported file in this platform key **must** have a corresponding TypeScript declaration export.
+ */
 platforms.javascript = {
-  prefix: KONG_TOKEN_PREFIX,
+  prefix: KONG_TOKEN_PREFIX, // required
   transformGroup: 'js',
   buildPath: `${TOKEN_DIRECTORY}/js/`,
+  options: {
+    fileHeader: customFileHeader,
+  },
   transforms: [
     'attribute/cti',
     'name/cti/constant',
@@ -128,71 +152,18 @@ platforms.javascript = {
     {
       destination: 'index.js',
       format: 'javascript/es6',
-      options: {
-        fileHeader: customFileHeader,
-      },
-      // Exclude alias tokens
-      filter: (token) => token.isSource === true,
+      // Exclude alias tokens and asset tokens compiled in a separate file
+      filter: (token) => token.isSource === true && token.attributes.category !== 'asset',
     },
-    // TypeScript types
+    // Constants TypeScript types
     {
       destination: 'index.d.ts',
       format: 'typescript/es6-declarations',
       options: {
-        fileHeader: customFileHeader,
         outputStringLiterals: true,
       },
-      // Exclude alias tokens
-      filter: (token) => token.isSource === true,
-    },
-  ],
-}
-
-// Font families
-platforms['assets/embed/scss'] = {
-  transforms: [
-    'attribute/cti',
-    'name/cti/kebab',
-    'asset/base64',
-  ],
-  buildPath: `${TOKEN_DIRECTORY}/scss/`,
-  files: [
-    {
-      destination: '_fonts.scss',
-      format: 'scss/variables',
-      options: {
-        fileHeader: customFileHeader,
-      },
-      filter: {
-        attributes: {
-          category: 'asset',
-          type: 'font',
-        },
-      },
-    },
-  ],
-}
-
-platforms['assets/embed/css'] = {
-  transforms: [
-    'attribute/cti',
-    'name/cti/kebab',
-    'asset/base64',
-  ],
-  buildPath: `${TOKEN_DIRECTORY}/css/`,
-  files: [
-    {
-      destination: 'fonts.css',
-      format: 'css/variables',
-      options: {
-        fileHeader: customFileHeader,
-      },
-      filter: {
-        attributes: {
-          category: 'asset',
-          type: 'font',
-        },
-      },
+      // Exclude alias tokens and asset tokens compiled in a separate file
+      filter: (token) => token.isSource === true && token.attributes.category !== 'asset',
     },
   ],
 }

package.json

@@ -4,7 +4,7 @@
   "description": "Kong UI Design Tokens and style dictionary",
   "scripts": {
     "build": "yarn build:clean && style-dictionary build",
-    "build:clean": "style-dictionary clean",
+    "build:clean": "rimraf ./dist",
     "lint": "eslint '**/*.{js,ts,vue,json}'",
     "lint:fix": "eslint '**/*.{js,ts,vue,json}' --fix",
     "sandbox": "run-p sandbox:open watch:tokens",
@@ -56,6 +56,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.14.1",
     "npm-run-all": "^4.1.5",
+    "rimraf": "^5.0.1",
     "sass": "^1.62.1",
     "semantic-release": "^20.1.0",
     "style-dictionary": "^3.8.0",

sandbox/App.vue

@@ -1,3 +1,19 @@
 <template>
   <router-view />
 </template>
+
+<style lang="scss">
+// Import CSS variables
+@import "../dist/tokens/css/variables.css";
+
+html,
+body {
+  font-family: var(--kui-font-family-text, 'Inter', sans-serif);
+  margin: var(--kui-space-0);
+  padding: var(--kui-space-0);
+}
+
+body {
+  padding: var(--kui-space-20) var(--kui-space-40);
+}
+</style>

sandbox/index.html

@@ -7,18 +7,10 @@
     <title>Design System Sandbox</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap"
+      rel="stylesheet">
     <!-- Files from the `../` directory are served at the root -->
-    <!-- Import CSS variables from vite public -->
-    <link href="/dist/tokens/css/variables.css" rel="stylesheet">
-    <style>
-      html,
-      body {
-        font-family: var(--kui-font-family-text, 'Inter', sans-serif);
-        margin: 0;
-        padding: 0;
-      }
-    </style>
   </head>
 
   <body>

sandbox/pages/HomeView.vue

@@ -1,4 +1,5 @@
 <template>
+  <h2>Colors</h2>
   <ColorBlock token="kui-color-background-primary" />
   <ColorBlock token="kui-color-background-warning-weakest" />
   <ColorBlock token="kui-color-background-danger" />

sandbox/vite.config.ts

@@ -12,7 +12,6 @@ export default defineConfig({
         // Reload the Vite sandbox when any of the `/dist/*` files are changed
         '../dist/**/*',
       ],
-      delay: 200,
     }),
   ],
   resolve: {