@momentum-design/tokens 0.5.2 → 0.6.1

package/dist/ios-webex/theme/webex/light-stable.swift

@@ -166,13 +166,12 @@ import UIKit
     var gradientSecondaryNormal1: UIColor { get }
     var reactionNormal0: UIColor { get }
     var reactionNormal1: UIColor { get }
-    var skeletonNormal0: UIColor { get }
-    var skeletonNormal1: UIColor { get }
-    var skeletonNormal2: UIColor { get }
-    var skeletonNormal3: UIColor { get }
+    var skeletonNormal: UIColor { get }
     var glassNormal: UIColor { get }
     var glassOverlayNormal: UIColor { get }
     var glassOverlayInactive: UIColor { get }
+    var glassRadial0: UIColor { get }
+    var glassRadial1: UIColor { get }
     var inputDisabled: UIColor { get }
 }
 @objc public protocol MomentumThemeButtonColorPaletteProtocol: AnyObject {
@@ -230,6 +229,8 @@ import UIKit
     var gradientActive1: UIColor { get }
     var gradientActive2: UIColor { get }
     var warningNormal: UIColor { get }
+    var glassNormal0: UIColor { get }
+    var glassNormal1: UIColor { get }
 }
 @objc public protocol MomentumThemeControlColorPaletteProtocol: AnyObject {
     var activeNormal: UIColor { get }
@@ -398,6 +399,7 @@ import UIKit
     var quaternaryNormal: UIColor { get }
 }
 @objc public protocol MomentumThemeAvatarColorPaletteProtocol: AnyObject {
+    var ghost: UIColor { get }
     var defaultColor: UIColor { get }
     var cobalt: UIColor { get }
     var cyan: UIColor { get }
@@ -671,13 +673,12 @@ open class LightMomentumThemeBackgroundColorPalette: MomentumThemeBackgroundColo
     open var gradientSecondaryNormal1: UIColor { return UIColor(hex: 0xFFFFFF) }
     open var reactionNormal0: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.90) }
     open var reactionNormal1: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.00) }
-    open var skeletonNormal0: UIColor { return UIColor(hex: 0x000000, withAlpha: 0.20) }
-    open var skeletonNormal1: UIColor { return UIColor(hex: 0x000000, withAlpha: 0.30) }
-    open var skeletonNormal2: UIColor { return UIColor(hex: 0x000000, withAlpha: 0.40) }
-    open var skeletonNormal3: UIColor { return UIColor(hex: 0x000000, withAlpha: 0.50) }
-    open var glassNormal: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.60) }
+    open var skeletonNormal: UIColor { return UIColor(hex: 0x8F8F8F) }
+    open var glassNormal: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.40) }
     open var glassOverlayNormal: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.80) }
     open var glassOverlayInactive: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.40) }
+    open var glassRadial0: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.90) }
+    open var glassRadial1: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.40) }
     open var inputDisabled: UIColor { return UIColor(hex: 0x000000, withAlpha: 0.11) }
     public init() {}
 }
@@ -737,6 +738,8 @@ open class LightMomentumThemeOutlineColorPalette: MomentumThemeOutlineColorPalet
     open var gradientActive1: UIColor { return UIColor(hex: 0x00A3B5) }
     open var gradientActive2: UIColor { return UIColor(hex: 0x3CC29A) }
     open var warningNormal: UIColor { return UIColor(hex: 0x7D4705) }
+    open var glassNormal0: UIColor { return UIColor(hex: 0xFFFFFF) }
+    open var glassNormal1: UIColor { return UIColor(hex: 0xFFFFFF, withAlpha: 0.60) }
     public init() {}
 }
 open class LightMomentumThemeControlColorPalette: MomentumThemeControlColorPaletteProtocol {
@@ -914,6 +917,7 @@ open class LightMomentumThemeGroupedBackgroundColorPalette: MomentumThemeGrouped
     public init() {}
 }
 open class LightMomentumThemeAvatarColorPalette: MomentumThemeAvatarColorPaletteProtocol {
+    open var ghost: UIColor { return UIColor(hex: 0x000000, withAlpha: 0.00) }
     open var defaultColor: UIColor { return UIColor(hex: 0x545454) }
     open var cobalt: UIColor { return UIColor(hex: 0x08599C) }
     open var cyan: UIColor { return UIColor(hex: 0x066070) }
@@ -1253,13 +1257,12 @@ open class SystemMomentumThemeBackgroundColorPalette: MomentumThemeBackgroundCol
     open var gradientSecondaryNormal1: UIColor { return systemColor(light: light, dark: dark, keyPath: \.gradientSecondaryNormal1) }
     open var reactionNormal0: UIColor { return systemColor(light: light, dark: dark, keyPath: \.reactionNormal0) }
     open var reactionNormal1: UIColor { return systemColor(light: light, dark: dark, keyPath: \.reactionNormal1) }
-    open var skeletonNormal0: UIColor { return systemColor(light: light, dark: dark, keyPath: \.skeletonNormal0) }
-    open var skeletonNormal1: UIColor { return systemColor(light: light, dark: dark, keyPath: \.skeletonNormal1) }
-    open var skeletonNormal2: UIColor { return systemColor(light: light, dark: dark, keyPath: \.skeletonNormal2) }
-    open var skeletonNormal3: UIColor { return systemColor(light: light, dark: dark, keyPath: \.skeletonNormal3) }
+    open var skeletonNormal: UIColor { return systemColor(light: light, dark: dark, keyPath: \.skeletonNormal) }
     open var glassNormal: UIColor { return systemColor(light: light, dark: dark, keyPath: \.glassNormal) }
     open var glassOverlayNormal: UIColor { return systemColor(light: light, dark: dark, keyPath: \.glassOverlayNormal) }
     open var glassOverlayInactive: UIColor { return systemColor(light: light, dark: dark, keyPath: \.glassOverlayInactive) }
+    open var glassRadial0: UIColor { return systemColor(light: light, dark: dark, keyPath: \.glassRadial0) }
+    open var glassRadial1: UIColor { return systemColor(light: light, dark: dark, keyPath: \.glassRadial1) }
     open var inputDisabled: UIColor { return systemColor(light: light, dark: dark, keyPath: \.inputDisabled) }
     public init() {}
 }
@@ -1323,6 +1326,8 @@ open class SystemMomentumThemeOutlineColorPalette: MomentumThemeOutlineColorPale
     open var gradientActive1: UIColor { return systemColor(light: light, dark: dark, keyPath: \.gradientActive1) }
     open var gradientActive2: UIColor { return systemColor(light: light, dark: dark, keyPath: \.gradientActive2) }
     open var warningNormal: UIColor { return systemColor(light: light, dark: dark, keyPath: \.warningNormal) }
+    open var glassNormal0: UIColor { return systemColor(light: light, dark: dark, keyPath: \.glassNormal0) }
+    open var glassNormal1: UIColor { return systemColor(light: light, dark: dark, keyPath: \.glassNormal1) }
     public init() {}
 }
 open class SystemMomentumThemeControlColorPalette: MomentumThemeControlColorPaletteProtocol {
@@ -1518,6 +1523,7 @@ open class SystemMomentumThemeGroupedBackgroundColorPalette: MomentumThemeGroupe
 open class SystemMomentumThemeAvatarColorPalette: MomentumThemeAvatarColorPaletteProtocol {
     private let light: any MomentumThemeAvatarColorPaletteProtocol = LightMomentumThemeAvatarColorPalette()
     private let dark: any MomentumThemeAvatarColorPaletteProtocol = DarkMomentumThemeAvatarColorPalette()
+    open var ghost: UIColor { return systemColor(light: light, dark: dark, keyPath: \.ghost) }
     open var defaultColor: UIColor { return systemColor(light: light, dark: dark, keyPath: \.defaultColor) }
     open var cobalt: UIColor { return systemColor(light: light, dark: dark, keyPath: \.cobalt) }
     open var cyan: UIColor { return systemColor(light: light, dark: dark, keyPath: \.cyan) }

package/dist/json/theme/webex/dark-bronze-stable.json

@@ -4802,14 +4802,14 @@
         "skeleton": {
           "normal": {
             "type": "color",
-            "value": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)",
-            "description": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)\nUse for skeleton component",
+            "value": "#707070",
+            "description": "Use for skeleton component",
             "filePath": "src/theme/stable/dark.json",
             "isSource": true,
             "original": {
               "type": "color",
-              "value": "linear-gradient(123deg, {color.core.white-alpha.20} 0%, {color.core.white-alpha.30} 33.85%, {color.core.white-alpha.40} 70.31%, {color.core.white-alpha.50} 100%)",
-              "description": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)\nUse for skeleton component"
+              "value": "{color.core.gray.60}",
+              "description": "Use for skeleton component"
             },
             "name": "mds-color-theme-background-skeleton-normal",
             "attributes": {
@@ -4830,13 +4830,13 @@
         },
         "glass": {
           "normal": {
-            "value": "#00000066",
+            "value": "#ffffff0d",
             "type": "color",
             "description": "Used for glass effect background for operation pop. ",
             "filePath": "src/theme/stable/dark.json",
             "isSource": true,
             "original": {
-              "value": "{color.core.black-alpha.40}",
+              "value": "{color.core.white-alpha.5}",
               "type": "color",
               "description": "Used for glass effect background for operation pop. "
             },
@@ -4913,6 +4913,64 @@
                 "inactive"
               ]
             }
+          },
+          "radial": {
+            "0": {
+              "value": "#ffffff66",
+              "type": "color",
+              "description": "Used for operation pop background. ",
+              "filePath": "src/theme/stable/dark.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.core.white-alpha.40}",
+                "type": "color",
+                "description": "Used for operation pop background. "
+              },
+              "name": "mds-color-theme-background-glass-radial-0",
+              "attributes": {
+                "category": "color",
+                "type": "theme",
+                "item": "background",
+                "subitem": "glass",
+                "state": "radial"
+              },
+              "path": [
+                "color",
+                "theme",
+                "background",
+                "glass",
+                "radial",
+                "0"
+              ]
+            },
+            "1": {
+              "value": "#ffffff0d",
+              "type": "color",
+              "description": "Used for operation pop background. ",
+              "filePath": "src/theme/stable/dark.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.core.white-alpha.5}",
+                "type": "color",
+                "description": "Used for operation pop background. "
+              },
+              "name": "mds-color-theme-background-glass-radial-1",
+              "attributes": {
+                "category": "color",
+                "type": "theme",
+                "item": "background",
+                "subitem": "glass",
+                "state": "radial"
+              },
+              "path": [
+                "color",
+                "theme",
+                "background",
+                "glass",
+                "radial",
+                "1"
+              ]
+            }
           }
         },
         "input": {
@@ -6432,6 +6490,35 @@
               "normal"
             ]
           }
+        },
+        "glass": {
+          "normal": {
+            "value": "linear-gradient(180deg, #ffffff1c 0%, #ffffff0d 100%)",
+            "type": "color",
+            "description": "Used for operation pop",
+            "filePath": "src/theme/stable/dark.json",
+            "isSource": true,
+            "original": {
+              "value": "linear-gradient(180deg, {color.core.white-alpha.11} 0%, {color.core.white-alpha.5} 100%)",
+              "type": "color",
+              "description": "Used for operation pop"
+            },
+            "name": "mds-color-theme-outline-glass-normal",
+            "attributes": {
+              "category": "color",
+              "type": "theme",
+              "item": "outline",
+              "subitem": "glass",
+              "state": "normal"
+            },
+            "path": [
+              "color",
+              "theme",
+              "outline",
+              "glass",
+              "normal"
+            ]
+          }
         }
       },
       "control": {
@@ -11363,6 +11450,29 @@
         }
       },
       "avatar": {
+        "ghost": {
+          "value": "#ffffff00",
+          "type": "color",
+          "filePath": "src/theme/stable/dark.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.core.white-alpha.0}",
+            "type": "color"
+          },
+          "name": "mds-color-theme-avatar-ghost",
+          "attributes": {
+            "category": "color",
+            "type": "theme",
+            "item": "avatar",
+            "subitem": "ghost"
+          },
+          "path": [
+            "color",
+            "theme",
+            "avatar",
+            "ghost"
+          ]
+        },
         "default": {
           "parent": "theme/stable/dark",
           "type": "color",

package/dist/json/theme/webex/dark-indigo-stable.json

@@ -4802,14 +4802,14 @@
         "skeleton": {
           "normal": {
             "type": "color",
-            "value": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)",
-            "description": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)\nUse for skeleton component",
+            "value": "#707070",
+            "description": "Use for skeleton component",
             "filePath": "src/theme/stable/dark.json",
             "isSource": true,
             "original": {
               "type": "color",
-              "value": "linear-gradient(123deg, {color.core.white-alpha.20} 0%, {color.core.white-alpha.30} 33.85%, {color.core.white-alpha.40} 70.31%, {color.core.white-alpha.50} 100%)",
-              "description": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)\nUse for skeleton component"
+              "value": "{color.core.gray.60}",
+              "description": "Use for skeleton component"
             },
             "name": "mds-color-theme-background-skeleton-normal",
             "attributes": {
@@ -4830,13 +4830,13 @@
         },
         "glass": {
           "normal": {
-            "value": "#00000066",
+            "value": "#ffffff0d",
             "type": "color",
             "description": "Used for glass effect background for operation pop. ",
             "filePath": "src/theme/stable/dark.json",
             "isSource": true,
             "original": {
-              "value": "{color.core.black-alpha.40}",
+              "value": "{color.core.white-alpha.5}",
               "type": "color",
               "description": "Used for glass effect background for operation pop. "
             },
@@ -4913,6 +4913,64 @@
                 "inactive"
               ]
             }
+          },
+          "radial": {
+            "0": {
+              "value": "#ffffff66",
+              "type": "color",
+              "description": "Used for operation pop background. ",
+              "filePath": "src/theme/stable/dark.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.core.white-alpha.40}",
+                "type": "color",
+                "description": "Used for operation pop background. "
+              },
+              "name": "mds-color-theme-background-glass-radial-0",
+              "attributes": {
+                "category": "color",
+                "type": "theme",
+                "item": "background",
+                "subitem": "glass",
+                "state": "radial"
+              },
+              "path": [
+                "color",
+                "theme",
+                "background",
+                "glass",
+                "radial",
+                "0"
+              ]
+            },
+            "1": {
+              "value": "#ffffff0d",
+              "type": "color",
+              "description": "Used for operation pop background. ",
+              "filePath": "src/theme/stable/dark.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.core.white-alpha.5}",
+                "type": "color",
+                "description": "Used for operation pop background. "
+              },
+              "name": "mds-color-theme-background-glass-radial-1",
+              "attributes": {
+                "category": "color",
+                "type": "theme",
+                "item": "background",
+                "subitem": "glass",
+                "state": "radial"
+              },
+              "path": [
+                "color",
+                "theme",
+                "background",
+                "glass",
+                "radial",
+                "1"
+              ]
+            }
           }
         },
         "input": {
@@ -6432,6 +6490,35 @@
               "normal"
             ]
           }
+        },
+        "glass": {
+          "normal": {
+            "value": "linear-gradient(180deg, #ffffff1c 0%, #ffffff0d 100%)",
+            "type": "color",
+            "description": "Used for operation pop",
+            "filePath": "src/theme/stable/dark.json",
+            "isSource": true,
+            "original": {
+              "value": "linear-gradient(180deg, {color.core.white-alpha.11} 0%, {color.core.white-alpha.5} 100%)",
+              "type": "color",
+              "description": "Used for operation pop"
+            },
+            "name": "mds-color-theme-outline-glass-normal",
+            "attributes": {
+              "category": "color",
+              "type": "theme",
+              "item": "outline",
+              "subitem": "glass",
+              "state": "normal"
+            },
+            "path": [
+              "color",
+              "theme",
+              "outline",
+              "glass",
+              "normal"
+            ]
+          }
         }
       },
       "control": {
@@ -11363,6 +11450,29 @@
         }
       },
       "avatar": {
+        "ghost": {
+          "value": "#ffffff00",
+          "type": "color",
+          "filePath": "src/theme/stable/dark.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.core.white-alpha.0}",
+            "type": "color"
+          },
+          "name": "mds-color-theme-avatar-ghost",
+          "attributes": {
+            "category": "color",
+            "type": "theme",
+            "item": "avatar",
+            "subitem": "ghost"
+          },
+          "path": [
+            "color",
+            "theme",
+            "avatar",
+            "ghost"
+          ]
+        },
         "default": {
           "parent": "theme/stable/dark",
           "type": "color",

package/dist/json/theme/webex/dark-jade-stable.json

@@ -4802,14 +4802,14 @@
         "skeleton": {
           "normal": {
             "type": "color",
-            "value": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)",
-            "description": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)\nUse for skeleton component",
+            "value": "#707070",
+            "description": "Use for skeleton component",
             "filePath": "src/theme/stable/dark.json",
             "isSource": true,
             "original": {
               "type": "color",
-              "value": "linear-gradient(123deg, {color.core.white-alpha.20} 0%, {color.core.white-alpha.30} 33.85%, {color.core.white-alpha.40} 70.31%, {color.core.white-alpha.50} 100%)",
-              "description": "linear-gradient(123deg, #ffffff33 0%, #ffffff4d 33.85%, #ffffff66 70.31%, #ffffff80 100%)\nUse for skeleton component"
+              "value": "{color.core.gray.60}",
+              "description": "Use for skeleton component"
             },
             "name": "mds-color-theme-background-skeleton-normal",
             "attributes": {
@@ -4830,13 +4830,13 @@
         },
         "glass": {
           "normal": {
-            "value": "#00000066",
+            "value": "#ffffff0d",
             "type": "color",
             "description": "Used for glass effect background for operation pop. ",
             "filePath": "src/theme/stable/dark.json",
             "isSource": true,
             "original": {
-              "value": "{color.core.black-alpha.40}",
+              "value": "{color.core.white-alpha.5}",
               "type": "color",
               "description": "Used for glass effect background for operation pop. "
             },
@@ -4913,6 +4913,64 @@
                 "inactive"
               ]
             }
+          },
+          "radial": {
+            "0": {
+              "value": "#ffffff66",
+              "type": "color",
+              "description": "Used for operation pop background. ",
+              "filePath": "src/theme/stable/dark.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.core.white-alpha.40}",
+                "type": "color",
+                "description": "Used for operation pop background. "
+              },
+              "name": "mds-color-theme-background-glass-radial-0",
+              "attributes": {
+                "category": "color",
+                "type": "theme",
+                "item": "background",
+                "subitem": "glass",
+                "state": "radial"
+              },
+              "path": [
+                "color",
+                "theme",
+                "background",
+                "glass",
+                "radial",
+                "0"
+              ]
+            },
+            "1": {
+              "value": "#ffffff0d",
+              "type": "color",
+              "description": "Used for operation pop background. ",
+              "filePath": "src/theme/stable/dark.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.core.white-alpha.5}",
+                "type": "color",
+                "description": "Used for operation pop background. "
+              },
+              "name": "mds-color-theme-background-glass-radial-1",
+              "attributes": {
+                "category": "color",
+                "type": "theme",
+                "item": "background",
+                "subitem": "glass",
+                "state": "radial"
+              },
+              "path": [
+                "color",
+                "theme",
+                "background",
+                "glass",
+                "radial",
+                "1"
+              ]
+            }
           }
         },
         "input": {
@@ -6432,6 +6490,35 @@
               "normal"
             ]
           }
+        },
+        "glass": {
+          "normal": {
+            "value": "linear-gradient(180deg, #ffffff1c 0%, #ffffff0d 100%)",
+            "type": "color",
+            "description": "Used for operation pop",
+            "filePath": "src/theme/stable/dark.json",
+            "isSource": true,
+            "original": {
+              "value": "linear-gradient(180deg, {color.core.white-alpha.11} 0%, {color.core.white-alpha.5} 100%)",
+              "type": "color",
+              "description": "Used for operation pop"
+            },
+            "name": "mds-color-theme-outline-glass-normal",
+            "attributes": {
+              "category": "color",
+              "type": "theme",
+              "item": "outline",
+              "subitem": "glass",
+              "state": "normal"
+            },
+            "path": [
+              "color",
+              "theme",
+              "outline",
+              "glass",
+              "normal"
+            ]
+          }
         }
       },
       "control": {
@@ -11363,6 +11450,29 @@
         }
       },
       "avatar": {
+        "ghost": {
+          "value": "#ffffff00",
+          "type": "color",
+          "filePath": "src/theme/stable/dark.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.core.white-alpha.0}",
+            "type": "color"
+          },
+          "name": "mds-color-theme-avatar-ghost",
+          "attributes": {
+            "category": "color",
+            "type": "theme",
+            "item": "avatar",
+            "subitem": "ghost"
+          },
+          "path": [
+            "color",
+            "theme",
+            "avatar",
+            "ghost"
+          ]
+        },
         "default": {
           "parent": "theme/stable/dark",
           "type": "color",