@telus-uds/theme-koodo 3.1.0 → 3.3.1

package/README.md

@@ -1,5 +1,3 @@
 # Koodo theme
 
-Koodo design system theme.
-
-Refer to the [Koodo monorepo README](https://github.com/telus/koodo-design-system/#readme) for details.
+Koodo theme for universal design system.

package/build/schema.json

@@ -17,6 +17,11 @@
             "{appearances.ButtonGroupItem.pressed}",
             "{appearances.ButtonGroupItem.inactive}",
             "{appearances.ButtonGroupItem.selected}",
+            "{appearances.CarouselTabsPanelItem.focus}",
+            "{appearances.CarouselTabsPanelItem.hover}",
+            "{appearances.CarouselTabsPanelItem.pressed}",
+            "{appearances.CarouselTabsPanelItem.inactive}",
+            "{appearances.CarouselTabsPanelItem.selected}",
             "{appearances.Checkbox.checked}",
             "{appearances.Checkbox.error}",
             "{appearances.Checkbox.focus}",
@@ -40,6 +45,7 @@
             "{appearances.Link.pressed}",
             "{appearances.Link.iconPosition}",
             "{appearances.Modal.maxWidth}",
+            "{appearances.Modal.width}",
             "{appearances.Notification.system}",
             "{appearances.Notification.style}",
             "{appearances.PaginationPageButton.focus}",
@@ -100,7 +106,8 @@
             "{appearances.ToggleSwitch.selected}",
             "{appearances.TooltipButton.focus}",
             "{appearances.TooltipButton.hover}",
-            "{appearances.TooltipButton.pressed}"
+            "{appearances.TooltipButton.pressed}",
+            "{appearances.SkipLink.focus}"
           ]
         },
         {
@@ -1386,6 +1393,15 @@
                 "minWidth": {
                   "$ref": "#size"
                 },
+                "iconSize": {
+                  "$ref": "#size"
+                },
+                "iconSpace": {
+                  "$ref": "#integer"
+                },
+                "icon": {
+                  "$ref": "#icon"
+                },
                 "outerBorderColor": {
                   "$ref": "#color"
                 },
@@ -1419,6 +1435,9 @@
                 "paddingBottom",
                 "width",
                 "minWidth",
+                "iconSize",
+                "iconSpace",
+                "icon",
                 "outerBorderColor",
                 "outerBorderWidth",
                 "outerBorderGap",
@@ -1496,6 +1515,15 @@
                       "minWidth": {
                         "$ref": "#size"
                       },
+                      "iconSize": {
+                        "$ref": "#size"
+                      },
+                      "iconSpace": {
+                        "$ref": "#integer"
+                      },
+                      "icon": {
+                        "$ref": "#icon"
+                      },
                       "outerBorderColor": {
                         "$ref": "#color"
                       },
@@ -2006,6 +2034,33 @@
                 },
                 "spaceBetweenSlideAndPanelNavigation": {
                   "$ref": "#size"
+                },
+                "thumbnailBorderColor": {
+                  "$ref": "#color"
+                },
+                "thumbnailBorderRadius": {
+                  "$ref": "#radius"
+                },
+                "thumbnailBorderWidth": {
+                  "$ref": "#border"
+                },
+                "thumbnailContainerPaddingTop": {
+                  "$ref": "#size"
+                },
+                "thumbnailMargin": {
+                  "$ref": "#size"
+                },
+                "thumbnailPadding": {
+                  "$ref": "#size"
+                },
+                "thumbnailSelectedBorderColor": {
+                  "$ref": "#color"
+                },
+                "thumbnailSelectedBorderWidth": {
+                  "$ref": "#border"
+                },
+                "thumbnailSize": {
+                  "$ref": "#size"
                 }
               },
               "required": [
@@ -2014,7 +2069,16 @@
                 "showPreviousNextNavigation",
                 "showPanelNavigation",
                 "spaceBetweenSlideAndPreviousNextNavigation",
-                "spaceBetweenSlideAndPanelNavigation"
+                "spaceBetweenSlideAndPanelNavigation",
+                "thumbnailBorderColor",
+                "thumbnailBorderRadius",
+                "thumbnailBorderWidth",
+                "thumbnailContainerPaddingTop",
+                "thumbnailMargin",
+                "thumbnailPadding",
+                "thumbnailSelectedBorderColor",
+                "thumbnailSelectedBorderWidth",
+                "thumbnailSize"
               ]
             },
             "rules": {
@@ -2048,6 +2112,205 @@
                       },
                       "spaceBetweenSlideAndPanelNavigation": {
                         "$ref": "#size"
+                      },
+                      "thumbnailBorderColor": {
+                        "$ref": "#color"
+                      },
+                      "thumbnailBorderRadius": {
+                        "$ref": "#radius"
+                      },
+                      "thumbnailBorderWidth": {
+                        "$ref": "#border"
+                      },
+                      "thumbnailContainerPaddingTop": {
+                        "$ref": "#size"
+                      },
+                      "thumbnailMargin": {
+                        "$ref": "#size"
+                      },
+                      "thumbnailPadding": {
+                        "$ref": "#size"
+                      },
+                      "thumbnailSelectedBorderColor": {
+                        "$ref": "#color"
+                      },
+                      "thumbnailSelectedBorderWidth": {
+                        "$ref": "#border"
+                      },
+                      "thumbnailSize": {
+                        "$ref": "#size"
+                      }
+                    }
+                  },
+                  "description": {
+                    "type": "string"
+                  }
+                },
+                "required": [
+                  "if",
+                  "tokens"
+                ]
+              }
+            }
+          },
+          "required": [
+            "tokens",
+            "rules"
+          ]
+        },
+        "CarouselTabsPanelItem": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "appearances": {
+              "type": "object",
+              "additionalProperties": false,
+              "patternProperties": {
+                "^[a-z]+([A-Z0-9][a-z0-9]*)*$": {
+                  "$ref": "#appearance"
+                }
+              }
+            },
+            "tokens": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "paddingLeft": {
+                  "$ref": "#size"
+                },
+                "paddingRight": {
+                  "$ref": "#size"
+                },
+                "paddingTop": {
+                  "$ref": "#size"
+                },
+                "paddingBottom": {
+                  "$ref": "#size"
+                },
+                "borderBottomColor": {
+                  "$ref": "#color"
+                },
+                "borderBottomWidth": {
+                  "$ref": "#border"
+                },
+                "borderBottomStyle": {
+                  "$ref": "#borderStyle"
+                },
+                "flex": {
+                  "$ref": "#integer"
+                },
+                "alignItems": {
+                  "$ref": "#flexAlign"
+                },
+                "justifyContent": {
+                  "$ref": "#flexJustifyContent"
+                },
+                "color": {
+                  "$ref": "#color"
+                },
+                "fontSize": {
+                  "$ref": "#fontSize"
+                },
+                "fontScaleCap": {
+                  "$ref": "#fontSize"
+                },
+                "lineHeight": {
+                  "$ref": "#lineHeight"
+                },
+                "letterSpacing": {
+                  "$ref": "#letterSpacing"
+                },
+                "fontWeight": {
+                  "$ref": "#fontWeight"
+                },
+                "fontName": {
+                  "$ref": "#fontName"
+                }
+              },
+              "required": [
+                "paddingLeft",
+                "paddingRight",
+                "paddingTop",
+                "paddingBottom",
+                "borderBottomColor",
+                "borderBottomWidth",
+                "borderBottomStyle",
+                "flex",
+                "alignItems",
+                "justifyContent",
+                "color",
+                "fontSize",
+                "fontScaleCap",
+                "lineHeight",
+                "letterSpacing",
+                "fontWeight",
+                "fontName"
+              ]
+            },
+            "rules": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "if": {
+                    "type": "object",
+                    "minProperties": 1
+                  },
+                  "tokens": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "paddingLeft": {
+                        "$ref": "#size"
+                      },
+                      "paddingRight": {
+                        "$ref": "#size"
+                      },
+                      "paddingTop": {
+                        "$ref": "#size"
+                      },
+                      "paddingBottom": {
+                        "$ref": "#size"
+                      },
+                      "borderBottomColor": {
+                        "$ref": "#color"
+                      },
+                      "borderBottomWidth": {
+                        "$ref": "#border"
+                      },
+                      "borderBottomStyle": {
+                        "$ref": "#borderStyle"
+                      },
+                      "flex": {
+                        "$ref": "#integer"
+                      },
+                      "alignItems": {
+                        "$ref": "#flexAlign"
+                      },
+                      "justifyContent": {
+                        "$ref": "#flexJustifyContent"
+                      },
+                      "color": {
+                        "$ref": "#color"
+                      },
+                      "fontSize": {
+                        "$ref": "#fontSize"
+                      },
+                      "fontScaleCap": {
+                        "$ref": "#fontSize"
+                      },
+                      "lineHeight": {
+                        "$ref": "#lineHeight"
+                      },
+                      "letterSpacing": {
+                        "$ref": "#letterSpacing"
+                      },
+                      "fontWeight": {
+                        "$ref": "#fontWeight"
+                      },
+                      "fontName": {
+                        "$ref": "#fontName"
                       }
                     }
                   },
@@ -7128,6 +7391,122 @@
             "rules"
           ]
         },
+        "SkipLink": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "appearances": {
+              "type": "object",
+              "additionalProperties": false,
+              "patternProperties": {
+                "^[a-z]+([A-Z0-9][a-z0-9]*)*$": {
+                  "$ref": "#appearance"
+                }
+              }
+            },
+            "tokens": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "backgroundColor": {
+                  "$ref": "#color"
+                },
+                "color": {
+                  "$ref": "#color"
+                },
+                "outlineColor": {
+                  "$ref": "#color"
+                },
+                "outlineOffset": {
+                  "$ref": "#border"
+                },
+                "outlineStyle": {
+                  "$ref": "#borderStyle"
+                },
+                "outlineWidth": {
+                  "$ref": "#border"
+                },
+                "paddingHorizontal": {
+                  "$ref": "#size"
+                },
+                "paddingVertical": {
+                  "$ref": "#size"
+                },
+                "borderRadius": {
+                  "$ref": "#radius"
+                }
+              },
+              "required": [
+                "backgroundColor",
+                "color",
+                "outlineColor",
+                "outlineOffset",
+                "outlineStyle",
+                "outlineWidth",
+                "paddingHorizontal",
+                "paddingVertical",
+                "borderRadius"
+              ]
+            },
+            "rules": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "if": {
+                    "type": "object",
+                    "minProperties": 1
+                  },
+                  "tokens": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "backgroundColor": {
+                        "$ref": "#color"
+                      },
+                      "color": {
+                        "$ref": "#color"
+                      },
+                      "outlineColor": {
+                        "$ref": "#color"
+                      },
+                      "outlineOffset": {
+                        "$ref": "#border"
+                      },
+                      "outlineStyle": {
+                        "$ref": "#borderStyle"
+                      },
+                      "outlineWidth": {
+                        "$ref": "#border"
+                      },
+                      "paddingHorizontal": {
+                        "$ref": "#size"
+                      },
+                      "paddingVertical": {
+                        "$ref": "#size"
+                      },
+                      "borderRadius": {
+                        "$ref": "#radius"
+                      }
+                    }
+                  },
+                  "description": {
+                    "type": "string"
+                  }
+                },
+                "required": [
+                  "if",
+                  "tokens"
+                ]
+              }
+            }
+          },
+          "required": [
+            "tokens",
+            "rules"
+          ]
+        },
         "Tabs": {
           "type": "object",
           "additionalProperties": false,
@@ -8963,6 +9342,7 @@
         "ButtonGroupItem",
         "Card",
         "Carousel",
+        "CarouselTabsPanelItem",
         "Checkbox",
         "ChevronLink",
         "CheckboxGroup",
@@ -8998,6 +9378,7 @@
         "spacingScale",
         "StackView",
         "StepTracker",
+        "SkipLink",
         "Tabs",
         "TabsItem",
         "Tags",

package/build/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 22 Jul 2022 20:29:03 GMT
+ * Generated on Tue, 23 Aug 2022 19:30:03 GMT
  *
  */
 
@@ -187,6 +187,9 @@ module.exports = {
         fontName: 'StagSans',
         fontSize: 16,
         fontWeight: '600',
+        icon: null,
+        iconSize: 24,
+        iconSpace: 2,
         lineHeight: 1.5,
         minWidth: 0,
         opacity: 1,
@@ -347,7 +350,7 @@ module.exports = {
       rules: [
         {
           if: { viewport: [ 'xs', 'sm' ] },
-          tokens: { showPreviousNextNavigation: false }
+          tokens: { showPreviousNextNavigation: false, thumbnailSize: 48 }
         }
       ],
       tokens: {
@@ -356,7 +359,112 @@ module.exports = {
         showPanelNavigation: true,
         showPreviousNextNavigation: true,
         spaceBetweenSlideAndPanelNavigation: 32,
-        spaceBetweenSlideAndPreviousNextNavigation: 24
+        spaceBetweenSlideAndPreviousNextNavigation: 24,
+        thumbnailBorderColor: '#f9f6a5',
+        thumbnailBorderRadius: 4,
+        thumbnailBorderWidth: 1,
+        thumbnailContainerPaddingTop: 24,
+        thumbnailMargin: 4,
+        thumbnailPadding: 8,
+        thumbnailSelectedBorderColor: '#016b6a',
+        thumbnailSelectedBorderWidth: 2,
+        thumbnailSize: 64
+      }
+    },
+    CarouselTabsPanelItem: {
+      appearances: {
+        focus: {
+          description: "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          type: 'state',
+          values: [ true ]
+        },
+        hover: {
+          description: "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          type: 'state',
+          values: [ true ]
+        },
+        inactive: {
+          description: 'Prevents an interactive component from being interacted with and applies accessibility attributes to indicate to the user that this component cannot be used.',
+          type: 'state',
+          values: [ true ]
+        },
+        pressed: {
+          description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
+          type: 'state',
+          values: [ true ]
+        },
+        selected: {
+          description: 'Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.',
+          type: 'state',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            borderBottomColor: '#016b6a',
+            borderBottomWidth: 2,
+            color: '#016b6a'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderBottomColor: '#016b6a',
+            borderBottomWidth: 4,
+            color: '#016b6a'
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            borderBottomColor: '#014847',
+            borderBottomWidth: 2,
+            color: '#014847'
+          }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: { borderBottomWidth: 4 }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            borderBottomColor: '#c9c8c8',
+            borderBottomWidth: 4,
+            color: '#c9c8c8'
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            borderBottomColor: '#c9c8c8',
+            borderBottomWidth: 2,
+            color: '#c9c8c8',
+            fontName: 'StagSans',
+            fontWeight: '400'
+          }
+        }
+      ],
+      tokens: {
+        alignItems: 'flex-start',
+        borderBottomColor: 'transparent',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: 1,
+        color: '#016b6a',
+        flex: 1,
+        fontName: 'StagSans',
+        fontScaleCap: 64,
+        fontSize: 14,
+        fontWeight: '400',
+        justifyContent: 'flex-start',
+        letterSpacing: 0,
+        lineHeight: 1.1,
+        paddingBottom: 16,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0
       }
     },
     Checkbox: {
@@ -1704,6 +1812,21 @@ module.exports = {
         squareRadius: 4
       }
     },
+    SkipLink: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        backgroundColor: '#014847',
+        borderRadius: 12,
+        color: '#ffffff',
+        outlineColor: '#016b6a',
+        outlineOffset: 0,
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        paddingHorizontal: 8,
+        paddingVertical: 8
+      }
+    },
     StackView: {
       appearances: {},
       rules: [],
@@ -2400,5 +2523,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.1.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.4.0' }
 }

package/package.json

@@ -1,35 +1,35 @@
 {
-  "name": "@telus-uds/theme-koodo",
-  "version": "3.1.0",
+  "author": "TELUS Digital",
+  "bugs": {
+    "url": "https://github.com/telus/universal-design-system/issues"
+  },
   "description": "Koodo theme",
+  "devDependencies": {
+    "@telus-uds/palette-koodo": "^0.1.2",
+    "@telus-uds/system-theme-tokens": "^2.4.0"
+  },
+  "files": [
+    "build",
+    "theme.json"
+  ],
+  "homepage": "https://github.com/telus/universal-design-system#readme",
   "keywords": [
     "koodo"
   ],
-  "author": "TELUS Digital",
-  "homepage": "https://github.com/telus/koodo-design-system#readme",
   "license": "UNLICENSED",
   "main": "build/theme.js",
-  "files": [
-    "build",
-    "theme.json"
-  ],
+  "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
     "@telus-uds/palette-koodo": "^0.1.2"
   },
-  "devDependencies": {
-    "@telus-uds/palette-koodo": "^0.1.2",
-    "@telus-uds/system-theme-tokens": "^2.1.0"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/telus/koodo-design-system.git"
+    "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
     "release": "standard-version",
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
-    "dev": "nodemon -w src -x 'yarn build'"
+    "dev": "nodemon -w src -x 'npm run build'"
   },
-  "bugs": {
-    "url": "https://github.com/telus/koodo-design-system/issues"
-  }
+  "version": "3.3.1"
 }

package/theme.json

@@ -220,6 +220,9 @@
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight600}",
+        "icon": "{system.icon.none}",
+        "iconSize": "{palette.size.size24}",
+        "iconSpace": "{system.integer.2}",
         "lineHeight": "{palette.lineHeight.multiply150}",
         "minWidth": "{system.size.zero}",
         "opacity": "{system.opacity.opaque}",
@@ -388,7 +391,8 @@
             "viewport": ["xs", "sm"]
           },
           "tokens": {
-            "showPreviousNextNavigation": "{system.show.false}"
+            "showPreviousNextNavigation": "{system.show.false}",
+            "thumbnailSize": "{palette.size.size48}"
           }
         }
       ],
@@ -398,7 +402,107 @@
         "showPanelNavigation": "{system.show.true}",
         "showPreviousNextNavigation": "{system.show.true}",
         "spaceBetweenSlideAndPanelNavigation": "{palette.size.size32}",
-        "spaceBetweenSlideAndPreviousNextNavigation": "{palette.size.size24}"
+        "spaceBetweenSlideAndPreviousNextNavigation": "{palette.size.size24}",
+        "thumbnailBorderColor": "{palette.color.texas}",
+        "thumbnailBorderRadius": "{palette.radius.radius4}",
+        "thumbnailBorderWidth": "{palette.border.border1}",
+        "thumbnailContainerPaddingTop": "{palette.size.size24}",
+        "thumbnailMargin": "{palette.size.size4}",
+        "thumbnailPadding": "{palette.size.size8}",
+        "thumbnailSelectedBorderColor": "{palette.color.mosque}",
+        "thumbnailSelectedBorderWidth": "{palette.border.border2}",
+        "thumbnailSize": "{palette.size.size64}"
+      }
+    },
+    "CarouselTabsPanelItem": {
+      "appearances": {
+        "focus": "{appearances.CarouselTabsPanelItem.focus}",
+        "hover": "{appearances.CarouselTabsPanelItem.hover}",
+        "inactive": "{appearances.CarouselTabsPanelItem.inactive}",
+        "pressed": "{appearances.CarouselTabsPanelItem.pressed}",
+        "selected": "{appearances.CarouselTabsPanelItem.selected}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.mosque}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.mosque}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.mosque}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.darkMosque}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.darkMosque}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "borderBottomWidth": "{palette.border.border4}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.silver}",
+            "borderBottomWidth": "{palette.border.border4}",
+            "color": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.silver}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "color": "{palette.color.silver}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontWeight": "{palette.fontWeight.weight400}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignItems": "{system.flexAlign.flexStart}",
+        "borderBottomColor": "{system.color.transparent}",
+        "borderBottomStyle": "{system.borderStyle.solid}",
+        "borderBottomWidth": "{palette.border.border1}",
+        "color": "{palette.color.mosque}",
+        "flex": "{system.integer.1}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontScaleCap": "{palette.fontSize.size64}",
+        "fontSize": "{palette.fontSize.size14}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "letterSpacing": "{system.letterSpacing.none}",
+        "lineHeight": "{palette.lineHeight.multiply110}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{system.size.zero}",
+        "paddingRight": "{system.size.zero}",
+        "paddingTop": "{system.size.zero}"
       }
     },
     "Checkbox": {
@@ -1873,6 +1977,21 @@
         "squareRadius": "{palette.radius.radius4}"
       }
     },
+    "SkipLink": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "backgroundColor": "{palette.color.darkMosque}",
+        "borderRadius": "{palette.radius.radius12}",
+        "color": "{palette.color.white}",
+        "outlineColor": "{palette.color.mosque}",
+        "outlineOffset": "{system.border.zero}",
+        "outlineStyle": "{system.borderStyle.solid}",
+        "outlineWidth": "{palette.border.border2}",
+        "paddingHorizontal": "{palette.size.size8}",
+        "paddingVertical": "{palette.size.size8}"
+      }
+    },
     "StackView": {
       "appearances": {},
       "rules": [],