Kup-Radio & minor fixes

packages/ketchup-showcase/public/showcase.css

@@ -38,26 +38,24 @@
 }
 
 code.flat {
-  background: none;
-  border-radius: 0;
-  box-shadow: 0 0 2px 0px rgb(128, 128, 128);
-  color: var(--kup-primary-color);
+  background: var(--kup-gray-color-10);
+  border-radius: var(--kup-radius-00);
+  border: 1px solid var(--kup-gray-color-30);
+  color: var(--kup-gray-color-90);
   display: flex;
   font-family: var(--kup-font-family-monospace);
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   margin: auto;
   max-width: 100%;
-  padding: 20px 10px;
+  padding: var(--kup-space-04) var(--kup-space-03);
   width: max-content;
 }
 
 .code-word {
-  color: var(--kup-primary-color);
-  font-family: var(--kup-font-family-monospace);
-  font-size: 1.2em;
+  color: var(--kup-primary-color-60);
+  /* font-family: var(--kup-font-family-monospace); */
   font-weight: 600;
-  word-break: break-word;
 }
 
 .sample-section .code-word {

packages/ketchup-showcase/src/App.vue

@@ -130,7 +130,7 @@ export default {
     ) {
       dom.ketchupInit = {
         ...dom.ketchupInit,
-        theme: { name: 'dark' },
+        theme: { name: 'octane' },
       };
     }
     document.addEventListener('kup-theme-change', () => {
@@ -161,9 +161,9 @@ export default {
   methods: {
     changeTheme(e: CustomEvent<KupSwitchEventPayload>): void {
       if (e.detail.value === 'on') {
-        dom.ketchup.theme.set('dark');
+        dom.ketchup.theme.set('darkOctaneGray');
       } else {
-        dom.ketchup.theme.set('ketchup');
+        dom.ketchup.theme.set('octane');
       }
     },
     drawerReady(): void {
@@ -197,7 +197,7 @@ export default {
     },
     removeSpinner(): void {
       setTimeout(() => {
-        if (dom.ketchup.theme.name === 'dark') {
+        if (dom.ketchup.theme.name === 'darkOctaneGray') {
           theme.checked = true;
         }
         spinnerLabel.innerHTML = 'Ready!';
@@ -877,6 +877,16 @@ export default {
             value: 'KupTheme',
             visible: true,
           },
+          {
+            cells: {
+              ROUTE: {
+                value: 'kup-token',
+              },
+            },
+            icon: 'token',
+            value: 'KupToken',
+            visible: true,
+          },
           {
             cells: {
               ROUTE: {

packages/ketchup-showcase/src/plugins/router.ts

@@ -336,6 +336,11 @@ const frameworkRoutes = [
     name: 'kup-theme',
     component: () => import(`@/views/framework/kup-theme/KupTheme.vue`),
   },
+  {
+    path: `/kup-token`,
+    name: 'kup-token',
+    component: () => import(`@/views/framework/kup-token/KupToken.vue`),
+  },
   {
     path: `/kup-toolbar`,
     name: 'kup-toolbar',

packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue

@@ -15,6 +15,21 @@
     <template v-slot:4>
       <chip-input></chip-input>
     </template>
+    <template v-slot:5>
+      <chip-size></chip-size>
+    </template>
+    <template v-slot:6>
+      <chip-variant></chip-variant>
+    </template>
+    <template v-slot:7>
+      <chip-color></chip-color>
+    </template>
+    <template v-slot:8>
+      <chip-structure></chip-structure>
+    </template>
+    <template v-slot:9>
+      <chip-combination></chip-combination>
+    </template>
   </comp>
 </template>
 
@@ -24,6 +39,11 @@ import ChipBasic from '@/views/components/basic/chip/examples/ChipBasic';
 import ChipChoice from '@/views/components/basic/chip/examples/ChipChoice';
 import ChipFilter from '@/views/components/basic/chip/examples/ChipFilter';
 import ChipInput from '@/views/components/basic/chip/examples/ChipInput';
+import ChipSize from '@/views/components/basic/chip/examples/ChipSize';
+import ChipVariant from '@/views/components/basic/chip/examples/ChipVariant';
+import ChipColor from '@/views/components/basic/chip/examples/ChipColor';
+import ChipStructure from '@/views/components/basic/chip/examples/ChipStructure';
+import ChipCombination from '@/views/components/basic/chip/examples/ChipCombination';
 import Comp from '@/views/templates/Comp';
 export default {
   components: {
@@ -32,6 +52,11 @@ export default {
     ChipChoice,
     ChipFilter,
     ChipInput,
+    ChipSize,
+    ChipVariant,
+    ChipColor,
+    ChipStructure,
+    ChipCombination,
     Comp,
   },
   data() {
@@ -45,6 +70,11 @@ export default {
         'Choice chips',
         'Filter chips',
         'Input chips',
+        'Chip Size',
+        'Chip Variant',
+        'Chip Color',
+        'Chip Structure',
+        'Chip Combination',
       ],
     };
   },

packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        You can use the <span class="code-word">kup-primary</span> class to set
+        the color of the chip. The default is
+        <span class="code-word">neutral</span>.
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data"></kup-chip>
+        </div>
+        <p class="centered">Default color 'neutral'</p>
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data" class="kup-primary"></kup-chip>
+        </div>
+        <p class="centered">Set color to 'primary'</p>
+        <code class="flat">{{ markupBasicSmall }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          id: 'input1',
+          value: 'First filter',
+        },
+        {
+          id: 'input2',
+          value: 'Second filter',
+        },
+        {
+          id: 'input3',
+          value: 'Third filter',
+        },
+      ],
+      markupBasic: '<kup-chip></kup-chip>',
+      markupBasicSmall: '<kup-chip class="kup-primary"></kup-chip>',
+    };
+  },
+};
+</script>

packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipCombination.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p> You can use all the styling above to get some advanced chip: </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip
+            :data.prop="data"
+            styling="raised"
+            class="kup-primary"
+          ></kup-chip>
+        </div>
+        <p class="centered">Primary Raised Chip with icon</p>
+        <code class="flat">{{ markupBasic }}</code>
+        <code class="flat">{{ markupBasicData }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data2" styling="outlined"></kup-chip>
+        </div>
+        <p class="centered">Neutral outlined Chips'</p>
+        <code class="flat">{{ markupBasic2 }}</code>
+        <code class="flat">{{ markupBasicData2 }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          icon: 'widgets',
+          id: 'input1',
+          value: 'IconChip',
+        },
+      ],
+      data2: [
+        {
+          id: 'input1',
+          value: 'Outlined Chip',
+        },
+        {
+          id: 'input2',
+          value: 'Outlined Chip 2',
+        },
+        {
+          id: 'input2',
+          value: 'Outlined Chip 3',
+        },
+      ],
+      markupBasic: '<kup-chip styling="raised" class="kup-primary"></kup-chip>',
+      markupBasicData: '{ icon: "widgets", id: "input1", value: "IconChip"}',
+      markupBasic2: '<kup-chip styling="outlined"></kup-chip>',
+      markupBasicData2:
+        '{ id: "input1", value: "Outlined Chip"},{ id: "input2", value: "Outlined Chip 2"},{ id: "input3", value: "Outlined Chip 3"}',
+    };
+  },
+};
+</script>

packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipSize.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        You can use the <span class="code-word">sizing</span> attribute to
+        decide the size of the chip. The default is
+        <span class="code-word">medium</span>.
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data"></kup-chip>
+        </div>
+        <p class="centered">Default Sizing medium</p>
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data" sizing="small"></kup-chip>
+        </div>
+        <p class="centered">Set sizing to 'small'</p>
+        <code class="flat">{{ markupBasicSmall }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          id: 'input1',
+          value: 'First filter',
+        },
+        {
+          id: 'input2',
+          value: 'Second filter',
+        },
+        {
+          id: 'input3',
+          value: 'Third filter',
+        },
+      ],
+      markupBasic: '<kup-chip></kup-chip>',
+      markupBasicSmall: '<kup-chip sizing="small"></kup-chip>',
+    };
+  },
+};
+</script>

packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipStructure.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        The Chip component is build on 3 part: A leading optional icon, a text
+        and a trailing optional clear icon [#input chips].
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data"></kup-chip>
+        </div>
+        <p class="centered"
+          >You can change or remove the icon. In this case is passed the
+          'widgets' icon</p
+        >
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data2"></kup-chip>
+        </div>
+        <p class="centered">Without icon</p>
+        <code class="flat">{{ markupBasicWihoutIcon }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          icon: 'widgets',
+          id: 'input1',
+          value: 'IconChip',
+        },
+      ],
+      data2: [
+        {
+          id: 'input1',
+          value: 'TextChip',
+        },
+      ],
+      markupBasic: '{ icon: "widgets", id: "input1", value: "IconChip"}',
+      markupBasicWihoutIcon: '{ id: "input1", value: "TextChip"}',
+    };
+  },
+};
+</script>