vanilla-framework 4.15.0 → 4.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.15.0",
+  "version": "4.17.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -29,8 +29,9 @@
   "scripts": {
     "start": "yarn build && yarn serve",
     "build": "yarn build-scss && yarn build-js && yarn build-class-references",
-    "build-scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
-    "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
+    "build-tokens": "((style-dictionary build --verbose --config ./sd.config.json) || true)",
+    "build-scss": "yarn build-tokens && sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls scss:build/css && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
+    "build:essential": "yarn run build-js && sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls scss/build.scss:build/css/build.css scss/docs:build/css/docs && postcss --use autoprefixer --replace 'build/css/**/*.css' --map",
     "build-js": "mkdir -p build/js/modules && cp node_modules/@canonical/cookie-policy/build/js/cookie-policy.js build/js/modules && cp node_modules/@canonical/latest-news/dist/latest-news.js build/js/modules && cp node_modules/js-beautify/js/lib/beautify.js node_modules/js-beautify/js/lib/beautify-html.js node_modules/js-beautify/js/lib/beautify-css.js build/js/modules",
     "build-class-references": "node scripts/create-class-references.js",
     "cypress:open": "cypress open",
@@ -41,8 +42,8 @@
     "test": "yarn lint-scss && yarn lint-prettier &&  yarn test-spelling && yarn test-scss && yarn jest",
     "lint-prettier": "prettier -c .",
     "lint-scss": "stylelint 'scss/**/*.scss'",
-    "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed scss:build/css --watch",
-    "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed scss/build.scss:build/css/build.css --watch",
+    "watch:scss": "sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls scss:build/css --watch",
+    "watch:essential": "sass --load-path=node_modules --embed-sources --style=compressed --silence-deprecation=mixed-decls scss/build.scss:build/css/build.css --watch",
     "watch": "yarn build && yarn watch:scss",
     "clean": "rm -rf build docs/static/css node_modules/ yarn-error.log",
     "percy": "percy snapshot snapshots.js",
@@ -52,29 +53,32 @@
     "_index.scss",
     "/scss",
     "!/scss/docs",
-    "!/scss/standalone"
+    "!/scss/standalone",
+    "/templates/_macros"
   ],
   "devDependencies": {
     "@canonical/cookie-policy": "3.6.4",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.29.0",
+    "@percy/cli": "1.29.4",
     "@testing-library/cypress": "10.0.2",
-    "autoprefixer": "10.4.19",
-    "cypress": "13.13.2",
+    "autoprefixer": "10.4.20",
+    "cypress": "13.15.0",
     "jest": "29.7.0",
     "js-beautify": "1.15.1",
     "markdown-spellcheck": "1.3.1",
+    "mime": "3.0.0",
     "parker": "0.0.10",
-    "postcss": "8.4.40",
+    "postcss": "8.4.47",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
     "prettier": "3.3.3",
-    "sass": "1.77.8",
-    "stylelint": "16.8.1",
+    "sass": "1.79.4",
+    "style-dictionary": "4.1.2",
+    "stylelint": "16.9.0",
     "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
     "stylelint-prettier": "5.0.2",
     "svgo": "3.3.2",
-    "yaml": "2.5.0"
+    "yaml": "2.5.1"
   }
 }

package/scss/_base_button.scss

@@ -15,7 +15,7 @@
 
   %vf-button-base {
     @include vf-transition(#{background-color, border-color}, snap, in);
-    @include vf-focus;
+    @include vf-focus-themed;
 
     border-style: solid;
     border-width: $input-border-thickness;

package/scss/_base_details.scss

@@ -7,7 +7,7 @@
 
   summary {
     @extend %common-default-text-properties;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin-bottom: $spv-nudge; //push subsequent text onto baseline
     max-width: $text-max-width;

package/scss/_base_forms.scss

@@ -13,7 +13,7 @@
   // Default form input element styles
   %vf-input-elements {
     @extend %bordered-text-vertical-padding;
-    @include vf-focus($has-validation: true);
+    @include vf-focus-themed($has-validation: true);
     @include vf-animation(#{background-color}, fast);
 
     // stylelint-disable property-no-vendor-prefix
@@ -145,7 +145,7 @@
 
   [type='file'] {
     @extend %bordered-text-vertical-padding;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     margin-bottom: $input-margin-bottom;
     width: 100%;
@@ -225,5 +225,11 @@
     margin-right: 0;
     padding: calc($spv--large - $input-border-thickness);
   }
+
+  legend {
+    &.is-required::before {
+      content: '* ';
+    }
+  }
   // stylelint-enable selector-max-type
 }

package/scss/_base_hr.scss

@@ -27,10 +27,8 @@
   // stylelint-disable selector-max-type -- base styles can use type selectors
   hr {
     @extend %hr;
-    background: $colors--theme--border-default;
-
-    margin-bottom: calc($spv--small - 1px);
 
+    // DEPRECATED: use `.p-rule--muted` instead
     &.is-muted {
       background-color: $colors--theme--border-low-contrast;
     }
@@ -40,6 +38,7 @@
       @extend %u-no-margin--bottom--hr;
     }
 
+    // DEPRECATED: use rule component inside of the grid instead
     &.is-fixed-width {
       @extend %fixed-width-hr;
     }