feat(kicon): introduce kui tokens [KHCP-7707]

Kong · Jul 21, 2023 · 7c238b9 · 7c238b9
1 parent b4d5cd8
commit 7c238b9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 29 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -34,6 +34,7 @@
 /src/components/KDateTimePicker @adamdehaven @jillztom @portikM
 /src/components/KDropdownMenu @adamdehaven @jillztom @portikM
 /src/components/KEmptyState @adamdehaven @jillztom @portikM
+/src/components/KIcon @adamdehaven @jillztom @portikM
 /src/components/KInput @adamdehaven @jillztom @portikM
 /src/components/KPop @adamdehaven @jillztom @portikM
 /src/components/KPrompt @adamdehaven @jillztom @portikM

diff --git a/docs/components/icon.md b/docs/components/icon.md
@@ -28,7 +28,7 @@ The name of the icon. This required prop will only recognize icons from the foll
             :class="{ hasBg: isToggled.value }"
           >
             <KIcon
-            size="24"
+            size="24px"
             :icon="icon" />
             <span>{{ icon }}</span>
           </div>
@@ -60,7 +60,7 @@ The `State icons` do not support the `color` prop.
           :class="{ hasBg: isToggled.value }"
         >
           <KIcon
-          size="96"
+          size="96px"
           :icon="icon" />
           <span>{{ icon }}</span>
         </div>
@@ -89,10 +89,10 @@ The `State icons` do not support the `color` prop.
 
 This prop takes a string that will replace the SVG default height and width. If height and width is not present by default `24` is applied.
 
-<KIcon icon="gear" size="50" />
+<KIcon icon="gear" size="48px" />
 
 ```html
-<KIcon icon="gear" size="50" />
+<KIcon icon="gear" size="48px" />
 ```
 
 ### color
@@ -109,10 +109,10 @@ Overrides the default svg color.
 
 Overrides the secondary svg color (if one exists).
 
-<KIcon icon="warning" color="var(--black-70)" secondaryColor="var(--yellow-400)" />
+<KIcon icon="warning" color="blue" secondaryColor="yellow" />
 
 ```html
-<KIcon icon="warning" color="var(--black-70)" secondaryColor="var(--yellow-400)" />
+<KIcon icon="warning" color="blue" secondaryColor="yellow" />
 ```
 
 ::: tip NOTE
@@ -158,7 +158,7 @@ You can read more about the viewBox attribute
 
 - `svgElements` - Used to add svg customization elements
 
-<KIcon icon="check" size="50" color="url('#linear-gradient')" class="mr-2">
+<KIcon icon="check" size="48px" color="url('#linear-gradient')" class="mr-2">
   <template v-slot:svgElements>
     <defs>
       <linearGradient id="linear-gradient" x1="0" x2="1">
@@ -170,7 +170,7 @@ You can read more about the viewBox attribute
   </template>
 </KIcon>
 
-<KIcon icon="search" size="50" color="url('#linear-gradient2')" class="mr-2">
+<KIcon icon="search" size="48px" color="url('#linear-gradient2')" class="mr-2">
   <template v-slot:svgElements>
     <defs>
       <linearGradient id="linear-gradient2" gradientTransform="rotate(90)">
@@ -181,7 +181,7 @@ You can read more about the viewBox attribute
   </template>
 </KIcon>
 
-<KIcon icon="cogwheel" size="50" color="dark-grey">
+<KIcon icon="cogwheel" size="48px" color="dark-grey">
   <template v-slot:svgElements>
     <animateTransform
       attributeName="transform"
@@ -195,7 +195,7 @@ You can read more about the viewBox attribute
 </KIcon>
 
 ```html
-<KIcon icon="check" size="50" color="url('#linear-gradient')">
+<KIcon icon="check" size="48px" color="url('#linear-gradient')">
   <template v-slot:svgElements>
     <defs>
       <linearGradient id="linear-gradient" x1="0" x2="1">
@@ -207,7 +207,7 @@ You can read more about the viewBox attribute
   </template>
 </KIcon>
 
-<KIcon icon="search" size="50" color="url('#linear-gradient2')">
+<KIcon icon="search" size="48px" color="url('#linear-gradient2')">
   <template v-slot:svgElements>
     <defs>
       <linearGradient id="linear-gradient2" gradientTransform="rotate(90)">
@@ -218,7 +218,7 @@ You can read more about the viewBox attribute
   </template>
 </KIcon>
 
-<KIcon icon="cogwheel" size="50" color="dark-grey">
+<KIcon icon="cogwheel" size="48px" color="dark-grey">
   <template v-slot:svgElements>
     <animateTransform
       attributeName="transform"
@@ -253,7 +253,7 @@ Check out the [contributing](/guide/adding-icons-to-kicon) docs to learn about a
     display: flex;
     align-items: center;
     &.hasBg .kong-icon {
-      background-color: var(--blue-200);
+      background-color: blue;
     }
   }
   span {
@@ -268,7 +268,7 @@ Check out the [contributing](/guide/adding-icons-to-kicon) docs to learn about a
     display: flex;
     align-items: center;
     &.hasBg .kong-icon {
-      background-color: var(--blue-200);
+      background-color: blue;
     }
   }
   span {

diff --git a/src/components/KIcon/KIcon.vue b/src/components/KIcon/KIcon.vue
@@ -28,20 +28,21 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, nextTick, watch, useAttrs, useSlots } from 'vue'
 import * as allIcons from './icons'
+import { KUI_ICON_SIZE_50 } from '@kong/design-tokens'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 const icons: Record<string, any> = allIcons
 
 const DEFAULTS = {
-  size: '24',
+  size: KUI_ICON_SIZE_50,
   viewBox: '0 0 24 24',
 }
 
 const props = defineProps({
   /**
-     * Checks for valid icon name
-     */
+  * Checks for valid icon name
+  */
   icon: {
     type: String,
     validator: (value: string): boolean => {
@@ -50,15 +51,15 @@ const props = defineProps({
     required: true,
   },
   /**
-     * Optional - Overrides default height and width with equal value
-     */
+  * Optional - Overrides default height and width with equal value
+  */
   size: {
     type: String,
     default: '',
   },
   /**
-     * Optional - Sets Fill color
-     */
+  * Optional - Sets Fill color
+  */
   color: {
     type: String,
     default: null,
@@ -68,29 +69,29 @@ const props = defineProps({
     default: null,
   },
   /**
-     * Optional - Defines viewbox dimensions
-     */
+  * Optional - Defines viewbox dimensions
+  */
   viewBox: {
     type: String,
     default: '',
   },
   /**
-     * Optional - Replaces default title attribute
-     */
+  * Optional - Replaces default title attribute
+  */
   title: {
     type: String,
     default: '',
   },
   /**
-     * Optional - Prevents title from being shown on hover. Used by KTooltip
-     */
+  * Optional - Prevents title from being shown on hover. Used by KTooltip
+  */
   hideTitle: {
     type: Boolean,
     default: false,
   },
   /**
-     * If testMode enabled use the icon name for the title so we can test
-     */
+  * If testMode enabled use the icon name for the title so we can test
+  */
   testMode: {
     type: Boolean,
     default: false,