@sage/design-tokens 7.2.0 → 7.3.0

package/json/nested/frozenproduct/large/dark/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 22,
-            "M": 32,
-            "L": 42
+            "S": 13,
+            "M": 20,
+            "L": 25
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 7,
+              "M": 11,
+              "L": 15
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/frozenproduct/large/light/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 22,
-            "M": 32,
-            "L": 42
+            "S": 13,
+            "M": 20,
+            "L": 25
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 7,
+              "M": 11,
+              "L": 15
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/frozenproduct/small/dark/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 17.2,
-            "M": 25.6,
-            "L": 34
+            "S": 9.8,
+            "M": 16,
+            "L": 20.2
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 5.4,
+              "M": 8.6,
+              "L": 11.8
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/frozenproduct/small/light/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 17.2,
-            "M": 25.6,
-            "L": 34
+            "S": 9.8,
+            "M": 16,
+            "L": 20.2
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 5.4,
+              "M": 8.6,
+              "L": 11.8
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/marketing/large/dark/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 22,
-            "M": 32,
-            "L": 42
+            "S": 13,
+            "M": 20,
+            "L": 25
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 7,
+              "M": 11,
+              "L": 15
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/marketing/large/light/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 22,
-            "M": 32,
-            "L": 42
+            "S": 13,
+            "M": 20,
+            "L": 25
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 7,
+              "M": 11,
+              "L": 15
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/marketing/small/dark/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 17.2,
-            "M": 25.6,
-            "L": 34
+            "S": 9.8,
+            "M": 16,
+            "L": 20.2
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 5.4,
+              "M": 8.6,
+              "L": 11.8
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/marketing/small/light/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 17.2,
-            "M": 25.6,
-            "L": 34
+            "S": 9.8,
+            "M": 16,
+            "L": 20.2
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 5.4,
+              "M": 8.6,
+              "L": 11.8
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/product/large/dark/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 22,
-            "M": 32,
-            "L": 42
+            "S": 13,
+            "M": 20,
+            "L": 25
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 7,
+              "M": 11,
+              "L": 15
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/product/large/light/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 22,
-            "M": 32,
-            "L": 42
+            "S": 13,
+            "M": 20,
+            "L": 25
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 7,
+              "M": 11,
+              "L": 15
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/product/small/dark/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 17.2,
-            "M": 25.6,
-            "L": 34
+            "S": 9.8,
+            "M": 16,
+            "L": 20.2
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 5.4,
+              "M": 8.6,
+              "L": 11.8
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/json/nested/product/small/light/components/form.json

@@ -197,9 +197,9 @@
         },
         "progressive": {
           "x": {
-            "S": 17.2,
-            "M": 25.6,
-            "L": 34
+            "S": 9.8,
+            "M": 16,
+            "L": 20.2
           },
           "y": {
             "S": 8,
@@ -210,6 +210,13 @@
             "S": 8,
             "M": 12,
             "L": 16
+          },
+          "keyline": {
+            "x": {
+              "S": 5.4,
+              "M": 8.6,
+              "L": 11.8
+            }
           }
         }
       },
@@ -390,6 +397,9 @@
       "validation": {
         "bar": 2
       },
+      "progressive": {
+        "bar": 2
+      },
       "rating": {
         "M": 20,
         "L": 32
@@ -492,6 +502,7 @@
       "radio": "999",
       "switch": "999",
       "validationbar": 2,
+      "progressivebar": 2,
       "calendar": {
         "none": "0",
         "date": "999",

package/package.json

@@ -6,7 +6,7 @@
   },
   "description": "Design tokens for the Sage Design System.",
   "author": "The Sage Group plc",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
   "tags": [
     "design tokens",

package/scss/frozenproduct/large/components/form.scss

@@ -124,15 +124,18 @@ $form-space-integral-xg-l: $global-space-micro-xl; // Space between integral ele
 $form-space-integral-yg-s: $global-space-micro-m; // Space below labelset or error validation in form components
 $form-space-integral-yg-m: $global-space-micro-l; // Space below labelset or error validation in form components
 $form-space-integral-yg-l: $global-space-micro-xl; // Space below labelset or error validation in form components
-$form-space-integral-progressive-x-s: $global-space-macro-m - $global-space-micro-xs; // Left padding on progressively shown form inputs on radio and checkbox
-$form-space-integral-progressive-x-m: $global-space-macro-l; // Left padding on progressively shown form inputs on radio and checkbox
-$form-space-integral-progressive-x-l: $global-space-macro-xl + $global-space-micro-xs; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-s: $global-space-macro-xs - 3; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-m: $global-space-macro-s; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-l: $global-space-macro-m + 1; // Left padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-s: $global-space-micro-l; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-m: $global-space-micro-xxl; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-l: $global-space-micro-l * 2; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-s: $global-space-micro-l; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-m: $global-space-micro-xxl; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-l: $global-space-micro-l * 2; // Top and bottom padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-keyline-x-s: $global-space-macro-xxxs - 1; // Left padding on keyline for small progressively shown inputs
+$form-space-integral-progressive-keyline-x-m: $global-space-macro-xxs - 1; // Left padding on keyline for medium progressively shown inputs
+$form-space-integral-progressive-keyline-x-l: $global-space-macro-xs - 1; // Left padding on keyline for large progressively shown inputs
 $form-space-rating-xg-m: $global-space-micro-l; // small gap between rating stars
 $form-space-rating-xg-l: $global-space-micro-xxl; // medium gap between rating stars
 $form-space-layout-stack-s: $global-space-macro-xs; // Spacing between horizontal and vertical S form components
@@ -213,6 +216,7 @@ $form-size-switch-handle-icon-m: $global-size-icon-s - $global-size-micro-xs; //
 $form-size-switch-handle-icon-l: $global-size-icon-m; // L switch icon inside knob
 $form-size-textarea-m: $global-size-macro-m * 2; // Min height for all text area sizes.
 $form-size-validation-bar: $global-size-micro-xxs; // 2px validation bar used on errors and warnings
+$form-size-progressive-bar: $global-size-micro-xxs; // 2px progressive disclosure keyline bar used in checkbox and radio groups
 $form-size-rating-m: $global-size-icon-m; // medium rating stars
 $form-size-rating-l: $global-size-icon-xl; // large rating stars
 $form-color-calendar-bg-disabled: $modes-color-interactive-inactive-default-alt;
@@ -256,6 +260,7 @@ $form-radius-fileupload: $global-radius-container-m; // File input (file uploads
 $form-radius-fileselector: $global-radius-container-m; // File preview (file selector asset)
 $form-radius-input: $global-radius-interactive-m; // Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input
 $form-radius-validationbar: $global-radius-interactive-xs; // Validation bar
+$form-radius-progressivebar: $global-radius-interactive-xs; // Validation bar
 $form-radius-calendar-today: $global-radius-container-xs; // Calendar (today indicator)
 $form-borderwidth-colorpicker: $global-borderwidth-xs; // swatch border
 $form-borderwidth-caution: $global-borderwidth-xs; // Caution border