@telus-uds/theme-allium 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.1.0](https://github.com/telus/universal-design-system/compare/@telus-uds/theme-allium/v2.0.0...@telus-uds/theme-allium/v2.1.0) (2022-03-03)
+
+### Features
+
+- **components-base:** add ToggleSwitchGroup ([#1307](https://github.com/telus/universal-design-system/issues/1307)) ([402630a](https://github.com/telus/universal-design-system/commit/402630ad04c2d81c4f882fed564cf4ae33096cea))
+
+### Change summary (does not include documentation changes)
+
+#### New keys
+
+- `components.ToggleSwitch.rules.9.tokens.labelColor`
+- `components.ToggleSwitch.tokens.labelColor`
+- `components.ToggleSwitch.tokens.labelFontName`
+- `components.ToggleSwitch.tokens.labelFontSize`
+- `components.ToggleSwitch.tokens.labelFontWeight`
+- `components.ToggleSwitch.tokens.labelLineHeight`
+- `components.ToggleSwitch.tokens.labelMarginLeft`
+- `components.ToggleSwitchGroup.appearances.viewport`
+- `components.ToggleSwitchGroup.rules.0.if.viewport.0`
+- `components.ToggleSwitchGroup.rules.0.if.viewport.1`
+- `components.ToggleSwitchGroup.rules.0.tokens.space`
+- `components.ToggleSwitchGroup.tokens.alignItems`
+- `components.ToggleSwitchGroup.tokens.direction`
+- `components.ToggleSwitchGroup.tokens.flexGrow`
+- `components.ToggleSwitchGroup.tokens.flexShrink`
+- `components.ToggleSwitchGroup.tokens.justifyContent`
+- `components.ToggleSwitchGroup.tokens.space`
+
 ## [2.0.0](https://github.com/telus/universal-design-system/compare/@telus-uds/theme-allium/v1.0.0...@telus-uds/theme-allium/v2.0.0) (2022-02-28)
 
 ### Features

package/build/schema.json

@@ -9076,6 +9076,24 @@
                 "iconColor": {
                   "$ref": "#color"
                 },
+                "labelColor": {
+                  "$ref": "#color"
+                },
+                "labelFontName": {
+                  "$ref": "#fontName"
+                },
+                "labelFontSize": {
+                  "$ref": "#fontSize"
+                },
+                "labelFontWeight": {
+                  "$ref": "#fontWeight"
+                },
+                "labelLineHeight": {
+                  "$ref": "#lineHeight"
+                },
+                "labelMarginLeft": {
+                  "$ref": "#size"
+                },
                 "switchSize": {
                   "$ref": "#size"
                 },
@@ -9118,6 +9136,12 @@
                 "trackBorderRadius",
                 "iconSize",
                 "iconColor",
+                "labelColor",
+                "labelFontName",
+                "labelFontSize",
+                "labelFontWeight",
+                "labelLineHeight",
+                "labelMarginLeft",
                 "switchSize",
                 "switchColor",
                 "switchBorderColor",
@@ -9206,6 +9230,24 @@
                       "iconColor": {
                         "$ref": "#color"
                       },
+                      "labelColor": {
+                        "$ref": "#color"
+                      },
+                      "labelFontName": {
+                        "$ref": "#fontName"
+                      },
+                      "labelFontSize": {
+                        "$ref": "#fontSize"
+                      },
+                      "labelFontWeight": {
+                        "$ref": "#fontWeight"
+                      },
+                      "labelLineHeight": {
+                        "$ref": "#lineHeight"
+                      },
+                      "labelMarginLeft": {
+                        "$ref": "#size"
+                      },
                       "switchSize": {
                         "$ref": "#size"
                       },
@@ -9242,6 +9284,101 @@
             "rules"
           ]
         },
+        "ToggleSwitchGroup": {
+          "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": {
+                "space": {
+                  "$ref": "#integer"
+                },
+                "direction": {
+                  "$ref": "#direction"
+                },
+                "alignItems": {
+                  "$ref": "#flexAlign"
+                },
+                "justifyContent": {
+                  "$ref": "#flexJustifyContent"
+                },
+                "flexGrow": {
+                  "$ref": "#integer"
+                },
+                "flexShrink": {
+                  "$ref": "#integer"
+                }
+              },
+              "required": [
+                "space",
+                "direction",
+                "alignItems",
+                "justifyContent",
+                "flexGrow",
+                "flexShrink"
+              ]
+            },
+            "rules": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "if": {
+                    "type": "object",
+                    "minProperties": 1
+                  },
+                  "tokens": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "space": {
+                        "$ref": "#integer"
+                      },
+                      "direction": {
+                        "$ref": "#direction"
+                      },
+                      "alignItems": {
+                        "$ref": "#flexAlign"
+                      },
+                      "justifyContent": {
+                        "$ref": "#flexJustifyContent"
+                      },
+                      "flexGrow": {
+                        "$ref": "#integer"
+                      },
+                      "flexShrink": {
+                        "$ref": "#integer"
+                      }
+                    }
+                  },
+                  "description": {
+                    "type": "string"
+                  }
+                },
+                "required": [
+                  "if",
+                  "tokens"
+                ]
+              }
+            }
+          },
+          "required": [
+            "tokens",
+            "rules"
+          ]
+        },
         "Tooltip": {
           "type": "object",
           "additionalProperties": false,
@@ -9777,6 +9914,7 @@
         "TextArea",
         "TextInput",
         "ToggleSwitch",
+        "ToggleSwitchGroup",
         "Tooltip",
         "TooltipButton",
         "Typography",

package/build/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Mon, 28 Feb 2022 16:09:25 GMT
+ * Generated on Thu, 03 Mar 2022 12:04:43 GMT
  *
  */
 
@@ -2566,6 +2566,7 @@ module.exports = {
           tokens: {
             backgroundColor: '#b2b9bf',
             iconColor: '#676e73',
+            labelColor: '#676e73',
             outerBorderColor: '#b2b9bf'
           }
         }
@@ -2579,6 +2580,12 @@ module.exports = {
         icon: null,
         iconColor: '#676e73',
         iconSize: 12,
+        labelColor: '#414547',
+        labelFontName: 'HelveticaNow',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 10,
         opacity: 1,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -2615,6 +2622,24 @@ module.exports = {
         width: 40
       }
     },
+    ToggleSwitchGroup: {
+      appearances: {
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [ { if: { viewport: [ 'lg', 'xl' ] }, tokens: { space: 3 } } ],
+      tokens: {
+        alignItems: 'flex-start',
+        direction: 'column',
+        flexGrow: 0,
+        flexShrink: 0,
+        justifyContent: 'flex-start',
+        space: 1
+      }
+    },
     Tooltip: {
       appearances: { inverse: { type: 'variant', values: [ true ] } },
       rules: [
@@ -2987,5 +3012,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '1.1.0' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '1.2.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
@@ -9,7 +9,7 @@
   "dependencies": {},
   "devDependencies": {
     "@telus-uds/palette-allium": "^1.0.0",
-    "@telus-uds/system-theme-tokens": "^1.1.0",
+    "@telus-uds/system-theme-tokens": "^1.2.0",
     "@telus-uds/system-themes": "^0.0.1"
   },
   "peerDependencies": {

package/theme.json

@@ -3070,6 +3070,7 @@
           "tokens": {
             "backgroundColor": "{palette.color.greyCloud}",
             "iconColor": "{palette.color.greyShuttle}",
+            "labelColor": "{palette.color.greyShuttle}",
             "outerBorderColor": "{palette.color.greyCloud}"
           }
         }
@@ -3083,6 +3084,12 @@
         "icon": "{system.icon.none}",
         "iconColor": "{palette.color.greyShuttle}",
         "iconSize": "{palette.size.size12}",
+        "labelColor": "{palette.color.greyCharcoal}",
+        "labelFontName": "{palette.fontName.HelveticaNow}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight400}",
+        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "labelMarginLeft": "{palette.size.size10}",
         "opacity": "{system.opacity.opaque}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
@@ -3105,6 +3112,29 @@
         "width": "{palette.size.size40}"
       }
     },
+    "ToggleSwitchGroup": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "space": "{system.integer.3}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignItems": "{system.flexAlign.flexStart}",
+        "direction": "{system.direction.column}",
+        "flexGrow": "{system.integer.0}",
+        "flexShrink": "{system.integer.0}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
+        "space": "{system.integer.1}"
+      }
+    },
     "Tooltip": {
       "appearances": {
         "inverse": {