feat(chip): adding ionic theme

Author: thetaPC

core/src/components.d.ts

@@ -890,10 +890,10 @@ export namespace Components {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"medium"`.
-          * @default 'medium'
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"small"`.
+          * @default 'large'
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "size"?: 'small' | 'large';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -6861,10 +6861,10 @@ declare namespace LocalJSX {
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"medium"`.
-          * @default 'medium'
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"small"`.
+          * @default 'large'
          */
-        "size"?: 'small' | 'medium' | 'large';
+        "size"?: 'small' | 'large';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/chip/chip.base.scss

@@ -1,6 +1,7 @@
 @use "../../themes/mixins" as mixins;
 @use "../../themes/functions.color" as colors;
 @use "./chip.base.vars.scss" as vars;
+@use "sass:meta";
 
 // Chip: Common Styles
 // --------------------------------------------------
@@ -20,6 +21,7 @@
   @include mixins.border-radius(var(--border-radius));
   @include mixins.margin(vars.$chip-margin);
   @include mixins.padding(vars.$chip-padding-vertical, vars.$chip-padding-horizontal);
+  @include mixins.typography(vars.$chip-typography);
 
   display: inline-flex;
   position: relative;
@@ -49,12 +51,6 @@
   font-size: vars.$chip-size-small-font-size;
 }
 
-:host(.chip-medium) {
-  min-height: vars.$chip-size-medium-height;
-
-  font-size: vars.$chip-size-medium-font-size;
-}
-
 :host(.chip-large) {
   min-height: vars.$chip-size-large-height;
 
@@ -110,6 +106,8 @@
 
 :host(.ion-color.chip-bold.chip-outline) {
   border-color: vars.$chip-hue-bold-semantic-outline-border-color;
+
+  background: vars.$chip-outline-bold-semantic-bg; //native would be transparent, else it would be whatevers in ion-color.chip-bold
 }
 
 // Subtle
@@ -120,6 +118,8 @@
 
 :host(.ion-color.chip-subtle.chip-outline) {
   border-color: colors.current-color(shade, $subtle: true);
+
+  background: vars.$chip-outline-subtle-semantic-bg;
 }
 
 // Outline Chip
@@ -130,11 +130,6 @@
   border-style: solid;
 }
 
-:host(.chip-outline),
-:host(.chip-outline.ion-color) {
-  background: vars.$chip-outline-bg;
-}
-
 // Chip States
 // ---------------------------------------------
 
@@ -210,10 +205,14 @@
 
 // Avatar
 ::slotted(ion-avatar) {
+  // width: vars.$chip-avatar-size;
+  // height: vars.$chip-avatar-size;
+  // @error vars.$chip-avatar-size;
+  @if vars.$chip-avatar-size != "unset" {
+    width: vars.$chip-avatar-size;
+    height: vars.$chip-avatar-size;
+  }
   flex-shrink: 0;
-
-  width: vars.$chip-avatar-size;
-  height: vars.$chip-avatar-size;
 }
 
 ::slotted(ion-avatar:first-child) {

core/src/components/chip/chip.base.vars.scss

@@ -76,8 +76,14 @@ $chip-hue-bold-semantic-outline-border-color: var(--ion-chip-hue-bold-semantic-o
 /// @prop - Outline border width
 $chip-outline-border-width: var(--ion-chip-variant-outline-border-width);
 
-/// @prop - Outline chip background color
-$chip-outline-bg: var(--ion-chip-variant-outline-bg);
+/// @prop - Outline bold chip background color for semantic colors
+$chip-outline-bold-semantic-bg: var(--ion-chip-hue-bold-semantic-outline-bg);
+
+/// @prop - Subtle chip background color for semantic colors
+$chip-hue-subtle-semantic-bg: var(--ion-chip-hue-subtle-semantic-bg);
+
+/// @prop - Outline subtle chip background color for semantic colors
+$chip-outline-subtle-semantic-bg: var(--ion-chip-hue-subtle-semantic-outline-bg);
 
 /// @prop - Focus ring color
 $chip-focus-ring-color: var(--ion-chip-state-focus-ring-color);
@@ -128,7 +134,7 @@ $chip-icon-last-child-margin: var(--ion-chip-icon-last-child-margin);
 $chip-icon-last-child-margin-start: var(--ion-chip-icon-last-child-margin-start);
 
 /// @prop - Avatar size
-$chip-avatar-size: var(--ion-chip-avatar-size);
+$chip-avatar-size: var(--ion-chip-avatar-size, revert-layer);
 
 /// @prop - Avatar margin vertical for first child
 $chip-avatar-first-child-margin-vertical: var(--ion-chip-avatar-first-child-margin-vertical);
@@ -147,3 +153,14 @@ $chip-avatar-last-child-margin-start: var(--ion-chip-avatar-last-child-margin-st
 
 /// @prop - Avatar margin end for last child
 $chip-avatar-last-child-margin-end: var(--ion-chip-avatar-last-child-margin-end);
+
+/// @prop - Typography styles for the chip
+$chip-typography: (
+  font-family: var(--ion-chip-typography-font-family),
+  font-size: var(--ion-chip-typography-font-size),
+  font-weight: var(--ion-chip-typography-font-weight),
+  letter-spacing: var(--ion-chip-typography-letter-spacing),
+  line-height: var(--ion-chip-typography-line-height),
+  text-decoration: var(--ion-chip-typography-text-decoration),
+  text-transform: var(--ion-chip-typography-text-transform),
+);

core/src/components/chip/chip.tsx

@@ -64,9 +64,9 @@ export class Chip implements ComponentInterface {
   /**
    * Set to `"small"` for a chip with less height and padding.
    *
-   * Defaults to `"medium"`.
+   * Defaults to `"small"`.
    */
-  @Prop() size?: 'small' | 'medium' | 'large' = 'medium';
+  @Prop() size?: 'small' | 'large' = 'large';
 
   render() {
     const { hue, size } = this;

core/src/themes/ionic/default.tokens.ts

@@ -1,9 +1,22 @@
+import * as colorTokens from 'outsystems-design-tokens/tokens/color scheme.json';
+import * as primitiveTokens from 'outsystems-design-tokens/tokens/primitives.json';
+import * as lightTokens from 'outsystems-design-tokens/tokens/theme/light.json';
+import * as typographyTokens from 'outsystems-design-tokens/tokens/typography.json';
+
+import { currentColor, cachedResolveOsToken } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
 import { lightTheme } from './light.tokens';
 
+const tokenMap = {
+  colorTokens,
+  primitiveTokens,
+  lightTokens,
+  typographyTokens,
+};
+
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
 
@@ -76,4 +89,102 @@ export const defaultTheme: DefaultTheme = {
     xxxl: 'var(--ion-radii-1000)',
     xxxxl: 'var(--ion-radii-full)',
   },
+
+  components: {
+    IonChip: {
+      margin: '0px',
+      padding: {
+        vertical: primitiveTokens.scale['150'].$value,
+        horizontal: primitiveTokens.scale['200'].$value,
+      },
+      typography: cachedResolveOsToken(typographyTokens.body.sm.medium.$value, tokenMap),
+      lineHeight: primitiveTokens.font['line-height']['full'].$value,
+
+      // Sizes
+      size: {
+        small: {
+          height: primitiveTokens.scale['600'].$value,
+          fontSize: primitiveTokens.font['font-size']['300'].$value,
+        },
+        large: {
+          height: primitiveTokens.scale['800'].$value,
+          fontSize: primitiveTokens.font['font-size']['350'].$value,
+        },
+      },
+
+      // States
+      state: {
+        disabled: {
+          opacity: '0.4',
+        },
+        focus: {
+          ring: {
+            color: lightTokens.primitives.blue['400'].$value,
+            width: primitiveTokens.scale['050'].$value,
+          },
+        },
+      },
+
+      // Shapes
+      shape: {
+        soft: {
+          borderRadius: primitiveTokens.scale['100'].$value,
+        },
+        round: {
+          borderRadius: primitiveTokens.scale['400'].$value,
+        },
+        rectangular: {
+          borderRadius: primitiveTokens.scale['0'].$value,
+        },
+      },
+
+      // Hues
+      hue: {
+        bold: {
+          bg: cachedResolveOsToken(colorTokens.bg.neutral.bold.default, tokenMap),
+          color: lightTokens.primitives.base.white.$value,
+
+          outline: {
+            borderColor: lightTokens.primitives.neutral['1200'].$value,
+          },
+
+          // Any of the semantic colors like primary, secondary, etc.
+          semantic: {
+            color: currentColor('contrast'),
+
+            outline: {
+              borderColor: currentColor('shade'),
+              bg: currentColor('base'),
+            },
+          },
+        },
+        subtle: {
+          bg: cachedResolveOsToken(lightTokens.primitives.neutral['100'], tokenMap),
+          color: lightTokens.primitives.neutral['800'].$value,
+
+          outline: {
+            borderColor: lightTokens.primitives.neutral['300'].$value,
+          },
+
+          semantic: {
+            outline: {
+              borderColor: currentColor('shade', null, true),
+              bg: currentColor('base', null, true),
+            },
+          },
+        },
+      },
+
+      // Variants
+      variant: {
+        outline: {
+          borderWidth: primitiveTokens.scale['025'].$value,
+        },
+      },
+
+      icon: {
+        size: primitiveTokens.font['font-size']['400'].$value,
+      },
+    },
+  },
 };