feat(badge): add badge component code

packages/styles/components/_c.badge.scss

@@ -0,0 +1,17 @@
+/* mqp:start */
+.mc-badge {
+  @include set-badge-base();
+  @include set-font-face('semi-bold');
+  @include set-font-scale('04', 's');
+  @include set-badge-theme(get-token(color, badge, 'info'));
+
+  @each $name, $props in $badges {
+    @if ($name != 'info') {
+      &--#{$name} {
+        @include set-badge-theme($props);
+      }
+    }
+  }
+}
+
+/* mqp:end */

packages/styles/settings-tools/_all-settings.scss

@@ -40,4 +40,5 @@
 @import "./_s.card.scss";
 @import "./_s.stepper";
 @import "./_s.modal";
+@import "./_s.badges";
 @import "./_s.visually-hidden";

packages/styles/settings-tools/_s.badges.scss

@@ -0,0 +1,22 @@
+$badges: get-token(color, badge);
+
+$badge-border: get-border('s');
+
+@mixin set-badge-base {
+  @include set-border-radius();
+
+  border: $badge-border solid transparent;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 $mu050;
+  margin: 0;
+  vertical-align: middle;
+  min-height: 1.375rem;
+  flex-shrink: 0;
+}
+
+@mixin set-badge-theme($props) {
+  color: map-get($props, 'text');
+  border-color: map-get($props, 'border');
+  background-color: map-get($props, 'background');
+}

packages/tokens/build/android/colors.xml

@@ -2,6 +2,21 @@
 
 
 <resources>
+  <color name="color_badge_info_background">#ffecfcfd</color>
+  <color name="color_badge_info_border">#ff25a8d0</color>
+  <color name="color_badge_info_text">#ff1e5f82</color>
+  <color name="color_badge_success_background">#ffeaf3e2</color>
+  <color name="color_badge_success_border">#ff78be20</color>
+  <color name="color_badge_success_text">#ff158110</color>
+  <color name="color_badge_warning_background">#fffff5eb</color>
+  <color name="color_badge_warning_border">#fffc961e</color>
+  <color name="color_badge_warning_text">#ff974f20</color>
+  <color name="color_badge_danger_background">#fffeedee</color>
+  <color name="color_badge_danger_border">#ffdf382b</color>
+  <color name="color_badge_danger_text">#ff8b2226</color>
+  <color name="color_badge_neutral_background">#ffeeeef0</color>
+  <color name="color_badge_neutral_border">#ff887f87</color>
+  <color name="color_badge_neutral_text">#ff554f52</color>
   <color name="color_primary_01_100">#ffeaf3e2</color>
   <color name="color_primary_01_200">#ffcbe3b5</color>
   <color name="color_primary_01_300">#ffadd585</color>

packages/tokens/build/ios/StyleDictionaryColor.h

@@ -3,9 +3,27 @@
 // StyleDictionaryColor.h
 //
 
+//
+
 #import <UIKit/UIKit.h>
 
+
 typedef NS_ENUM(NSInteger, StyleDictionaryColorName) {
+ColorBadgeInfoBackground,
+ColorBadgeInfoBorder,
+ColorBadgeInfoText,
+ColorBadgeSuccessBackground,
+ColorBadgeSuccessBorder,
+ColorBadgeSuccessText,
+ColorBadgeWarningBackground,
+ColorBadgeWarningBorder,
+ColorBadgeWarningText,
+ColorBadgeDangerBackground,
+ColorBadgeDangerBorder,
+ColorBadgeDangerText,
+ColorBadgeNeutralBackground,
+ColorBadgeNeutralBorder,
+ColorBadgeNeutralText,
 ColorPrimary01100,
 ColorPrimary01200,
 ColorPrimary01300,

packages/tokens/build/ios/StyleDictionaryColor.m

@@ -3,8 +3,11 @@
 // StyleDictionaryColor.m
 //
 
+//
+
 #import "StyleDictionaryColor.h"
 
+
 @implementation StyleDictionaryColor
 
 + (UIColor *)color:(StyleDictionaryColorName)colorEnum{
@@ -17,6 +20,21 @@ + (NSArray *)values {
 
   dispatch_once(&onceToken, ^{
     colorArray = @[
+[UIColor colorWithRed:0.925f green:0.988f blue:0.992f alpha:1.000f],
+[UIColor colorWithRed:0.145f green:0.659f blue:0.816f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.373f blue:0.510f alpha:1.000f],
+[UIColor colorWithRed:0.918f green:0.953f blue:0.886f alpha:1.000f],
+[UIColor colorWithRed:0.471f green:0.745f blue:0.125f alpha:1.000f],
+[UIColor colorWithRed:0.082f green:0.506f blue:0.063f alpha:1.000f],
+[UIColor colorWithRed:1.000f green:0.961f blue:0.922f alpha:1.000f],
+[UIColor colorWithRed:0.988f green:0.588f blue:0.118f alpha:1.000f],
+[UIColor colorWithRed:0.592f green:0.310f blue:0.125f alpha:1.000f],
+[UIColor colorWithRed:0.996f green:0.929f blue:0.933f alpha:1.000f],
+[UIColor colorWithRed:0.875f green:0.220f blue:0.169f alpha:1.000f],
+[UIColor colorWithRed:0.545f green:0.133f blue:0.149f alpha:1.000f],
+[UIColor colorWithRed:0.933f green:0.933f blue:0.941f alpha:1.000f],
+[UIColor colorWithRed:0.533f green:0.498f blue:0.529f alpha:1.000f],
+[UIColor colorWithRed:0.333f green:0.310f blue:0.322f alpha:1.000f],
 [UIColor colorWithRed:0.918f green:0.953f blue:0.886f alpha:1.000f],
 [UIColor colorWithRed:0.796f green:0.890f blue:0.710f alpha:1.000f],
 [UIColor colorWithRed:0.678f green:0.835f blue:0.522f alpha:1.000f],

packages/tokens/build/ios/StyleDictionarySize.h

@@ -2,9 +2,12 @@
 // StyleDictionarySize.h
 //
 
+//
+
 #import <Foundation/Foundation.h>
 
 
+
 extern float const SizeFont10;
 extern float const SizeFont11;
 extern float const SizeFont12;

packages/tokens/build/ios/StyleDictionarySize.m

@@ -3,9 +3,12 @@
 // StyleDictionarySize.m
 //
 
+//
+
 #import "StyleDictionarySize.h"
 
 
+
 float const SizeFont10 = 41.00f;
 float const SizeFont11 = 49.00f;
 float const SizeFont12 = 59.00f;

packages/tokens/build/ios/StyleDictionarySize.swift

@@ -3,69 +3,72 @@
 // StyleDictionarySize.swift
 //
 
+//
+
+
 import UIKit
 
 public class StyleDictionarySize {
-    public static let sizeFont01 = CGFloat(10.90) /* 11px */
-    public static let sizeFont02 = CGFloat(12.00) /* 12px */
-    public static let sizeFont03 = CGFloat(13.00) /* 13px */
-    public static let sizeFont04 = CGFloat(14.00) /* 14px */
-    public static let sizeFont05 = CGFloat(16.00) /* 16px */
-    public static let sizeFont06 = CGFloat(18.00) /* 18px */
-    public static let sizeFont07 = CGFloat(23.00) /* 23px */
-    public static let sizeFont08 = CGFloat(28.00) /* 28px */
-    public static let sizeFont09 = CGFloat(34.00) /* 34px */
-    public static let sizeFont10 = CGFloat(41.00) /* 41px */
-    public static let sizeFont11 = CGFloat(49.00) /* 49px */
-    public static let sizeFont12 = CGFloat(59.00) /* 59px */
+    public static let sizeFont01 = CGFloat(10.90)
+    public static let sizeFont02 = CGFloat(12.00)
+    public static let sizeFont03 = CGFloat(13.00)
+    public static let sizeFont04 = CGFloat(14.00)
+    public static let sizeFont05 = CGFloat(16.00)
+    public static let sizeFont06 = CGFloat(18.00)
+    public static let sizeFont07 = CGFloat(23.00)
+    public static let sizeFont08 = CGFloat(28.00)
+    public static let sizeFont09 = CGFloat(34.00)
+    public static let sizeFont10 = CGFloat(41.00)
+    public static let sizeFont11 = CGFloat(49.00)
+    public static let sizeFont12 = CGFloat(59.00)
     public static let sizeGutterScreenM = CGFloat(32.00)
     public static let sizeGutterScreenS = CGFloat(16.00)
-    public static let sizeLine01L = CGFloat(16.00) /* 16px */
-    public static let sizeLine01M = CGFloat(14.00) /* 14px */
-    public static let sizeLine01S = CGFloat(12.00) /* 12px */
-    public static let sizeLine01Xs = CGFloat(12.00) /* 12px */
-    public static let sizeLine02L = CGFloat(18.00) /* 18px */
-    public static let sizeLine02M = CGFloat(16.00) /* 16px */
-    public static let sizeLine02S = CGFloat(14.00) /* 14px */
-    public static let sizeLine02Xs = CGFloat(12.00) /* 12px */
-    public static let sizeLine03L = CGFloat(20.00) /* 20px */
-    public static let sizeLine03M = CGFloat(18.00) /* 18px */
-    public static let sizeLine03S = CGFloat(16.00) /* 16px */
-    public static let sizeLine03Xs = CGFloat(14.00) /* 14px */
-    public static let sizeLine04L = CGFloat(22.00) /* 22px */
-    public static let sizeLine04M = CGFloat(18.00) /* 18px */
-    public static let sizeLine04S = CGFloat(16.00) /* 16px */
-    public static let sizeLine04Xs = CGFloat(14.00) /* 14px */
-    public static let sizeLine05L = CGFloat(24.00) /* 24px */
-    public static let sizeLine05M = CGFloat(22.00) /* 22px */
-    public static let sizeLine05S = CGFloat(18.00) /* 18px */
-    public static let sizeLine05Xs = CGFloat(16.00) /* 16px */
-    public static let sizeLine06L = CGFloat(28.00) /* 28px */
-    public static let sizeLine06M = CGFloat(24.00) /* 24px */
-    public static let sizeLine06S = CGFloat(20.00) /* 20px */
-    public static let sizeLine06Xs = CGFloat(18.00) /* 18px */
-    public static let sizeLine07L = CGFloat(36.00) /* 36px */
-    public static let sizeLine07M = CGFloat(32.00) /* 32px */
-    public static let sizeLine07S = CGFloat(28.00) /* 28px */
-    public static let sizeLine07Xs = CGFloat(24.00) /* 24px */
-    public static let sizeLine08L = CGFloat(44.00) /* 44px */
-    public static let sizeLine08M = CGFloat(36.00) /* 36px */
-    public static let sizeLine08S = CGFloat(32.00) /* 32px */
-    public static let sizeLine08Xs = CGFloat(28.00) /* 28px */
-    public static let sizeLine09L = CGFloat(52.00) /* 52px */
-    public static let sizeLine09M = CGFloat(44.00) /* 44px */
-    public static let sizeLine09S = CGFloat(40.00) /* 40px */
-    public static let sizeLine09Xs = CGFloat(36.00) /* 36px */
-    public static let sizeLine10L = CGFloat(60.00) /* 60px */
-    public static let sizeLine10M = CGFloat(56.00) /* 56px */
-    public static let sizeLine10S = CGFloat(48.00) /* 48px */
-    public static let sizeLine10Xs = CGFloat(40.00) /* 40px */
-    public static let sizeLine11L = CGFloat(72.00) /* 72px */
-    public static let sizeLine11M = CGFloat(68.00) /* 68px */
-    public static let sizeLine11S = CGFloat(56.00) /* 56px */
-    public static let sizeLine11Xs = CGFloat(48.00) /* 48px */
-    public static let sizeLine12L = CGFloat(88.00) /* 88px */
-    public static let sizeLine12M = CGFloat(80.00) /* 80px */
-    public static let sizeLine12S = CGFloat(68.00) /* 68px */
-    public static let sizeLine12Xs = CGFloat(60.00) /* 60px */
+    public static let sizeLine01L = CGFloat(16.00)
+    public static let sizeLine01M = CGFloat(14.00)
+    public static let sizeLine01S = CGFloat(12.00)
+    public static let sizeLine01Xs = CGFloat(12.00)
+    public static let sizeLine02L = CGFloat(18.00)
+    public static let sizeLine02M = CGFloat(16.00)
+    public static let sizeLine02S = CGFloat(14.00)
+    public static let sizeLine02Xs = CGFloat(12.00)
+    public static let sizeLine03L = CGFloat(20.00)
+    public static let sizeLine03M = CGFloat(18.00)
+    public static let sizeLine03S = CGFloat(16.00)
+    public static let sizeLine03Xs = CGFloat(14.00)
+    public static let sizeLine04L = CGFloat(22.00)
+    public static let sizeLine04M = CGFloat(18.00)
+    public static let sizeLine04S = CGFloat(16.00)
+    public static let sizeLine04Xs = CGFloat(14.00)
+    public static let sizeLine05L = CGFloat(24.00)
+    public static let sizeLine05M = CGFloat(22.00)
+    public static let sizeLine05S = CGFloat(18.00)
+    public static let sizeLine05Xs = CGFloat(16.00)
+    public static let sizeLine06L = CGFloat(28.00)
+    public static let sizeLine06M = CGFloat(24.00)
+    public static let sizeLine06S = CGFloat(20.00)
+    public static let sizeLine06Xs = CGFloat(18.00)
+    public static let sizeLine07L = CGFloat(36.00)
+    public static let sizeLine07M = CGFloat(32.00)
+    public static let sizeLine07S = CGFloat(28.00)
+    public static let sizeLine07Xs = CGFloat(24.00)
+    public static let sizeLine08L = CGFloat(44.00)
+    public static let sizeLine08M = CGFloat(36.00)
+    public static let sizeLine08S = CGFloat(32.00)
+    public static let sizeLine08Xs = CGFloat(28.00)
+    public static let sizeLine09L = CGFloat(52.00)
+    public static let sizeLine09M = CGFloat(44.00)
+    public static let sizeLine09S = CGFloat(40.00)
+    public static let sizeLine09Xs = CGFloat(36.00)
+    public static let sizeLine10L = CGFloat(60.00)
+    public static let sizeLine10M = CGFloat(56.00)
+    public static let sizeLine10S = CGFloat(48.00)
+    public static let sizeLine10Xs = CGFloat(40.00)
+    public static let sizeLine11L = CGFloat(72.00)
+    public static let sizeLine11M = CGFloat(68.00)
+    public static let sizeLine11S = CGFloat(56.00)
+    public static let sizeLine11Xs = CGFloat(48.00)
+    public static let sizeLine12L = CGFloat(88.00)
+    public static let sizeLine12M = CGFloat(80.00)
+    public static let sizeLine12S = CGFloat(68.00)
+    public static let sizeLine12Xs = CGFloat(60.00)
 }

packages/tokens/build/js/tokens.js

@@ -1,6 +1,21 @@
 export const BorderS = 1;
 export const BorderM = 2;
 export const BorderL = 3;
+export const ColorBadgeInfoBackground = "#ecfcfd";
+export const ColorBadgeInfoBorder = "#25a8d0";
+export const ColorBadgeInfoText = "#1e5f82";
+export const ColorBadgeSuccessBackground = "#eaf3e2";
+export const ColorBadgeSuccessBorder = "#78be20";
+export const ColorBadgeSuccessText = "#158110";
+export const ColorBadgeWarningBackground = "#fff5eb";
+export const ColorBadgeWarningBorder = "#fc961e";
+export const ColorBadgeWarningText = "#974f20";
+export const ColorBadgeDangerBackground = "#feedee";
+export const ColorBadgeDangerBorder = "#df382b";
+export const ColorBadgeDangerText = "#8b2226";
+export const ColorBadgeNeutralBackground = "#eeeef0";
+export const ColorBadgeNeutralBorder = "#887f87";
+export const ColorBadgeNeutralText = "#554f52";
 export const ColorPrimary01100 = "#eaf3e2";
 export const ColorPrimary01200 = "#cbe3b5";
 export const ColorPrimary01300 = "#add585";