vanilla-framework 4.14.0 → 4.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.14.0",
+  "version": "4.16.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -29,9 +29,10 @@
   "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-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",
+    "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",
     "cypress:run": "cypress run",
@@ -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",
@@ -57,23 +58,25 @@
   "devDependencies": {
     "@canonical/cookie-policy": "3.6.4",
     "@canonical/latest-news": "1.5.0",
-    "@percy/cli": "1.28.7",
+    "@percy/cli": "1.29.3",
     "@testing-library/cypress": "10.0.2",
-    "autoprefixer": "10.4.19",
-    "cypress": "13.10.0",
+    "autoprefixer": "10.4.20",
+    "cypress": "13.14.1",
     "jest": "29.7.0",
+    "js-beautify": "1.15.1",
     "markdown-spellcheck": "1.3.1",
     "parker": "0.0.10",
-    "postcss": "8.4.38",
+    "postcss": "8.4.44",
     "postcss-cli": "11.0.0",
     "postcss-scss": "4.0.9",
-    "prettier": "3.3.0",
-    "sass": "1.77.4",
-    "stylelint": "16.6.1",
-    "stylelint-config-recommended-scss": "14.0.0",
+    "prettier": "3.3.3",
+    "sass": "1.77.8",
+    "style-dictionary": "4.1.0",
+    "stylelint": "16.9.0",
+    "stylelint-config-recommended-scss": "14.1.0",
     "stylelint-order": "6.0.4",
-    "stylelint-prettier": "5.0.0",
+    "stylelint-prettier": "5.0.2",
     "svgo": "3.3.2",
-    "yaml": "2.4.3"
+    "yaml": "2.5.0"
   }
 }

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%;
@@ -163,11 +163,6 @@
     &::-webkit-search-results-decoration {
       display: none;
     }
-
-    &::-webkit-search-cancel-button {
-      -webkit-appearance: searchfield-cancel-button; // stylelint-disable-line property-no-vendor-prefix
-      cursor: pointer;
-    }
   }
 
   input[list] {
@@ -230,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;
     }

package/scss/_base_icon-definitions.scss

@@ -17,10 +17,35 @@
   background-image: vf-icon-chevron-url($color);
 }
 
+// Default chevron is the same as down chevron - points down, as in its usage
+// in accordions/dropdowns
 @mixin vf-icon-chevron-themed {
   @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
 }
 
+@mixin vf-icon-chevron-up-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(180deg);
+}
+
+@mixin vf-icon-chevron-right-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(-90deg);
+}
+
+@mixin vf-icon-chevron-down-themed {
+  @include vf-icon-chevron-themed;
+}
+
+@mixin vf-icon-chevron-left-themed {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--icon), $dark-value: vf-icon-chevron-url($colors--dark-theme--icon));
+  transform: rotate(90deg);
+}
+
+@mixin vf-icon-chevron-muted {
+  @include vf-themed-icon($light-value: vf-icon-chevron-url($colors--light-theme--text-muted), $dark-value: vf-icon-chevron-url($colors--dark-theme--text-muted));
+}
+
 // anchor
 @function vf-icon-anchor-url($color) {
   @return url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a2.5 2.5 0 01.75 4.885v1.068h2.27v1.5H8.75v5.022c2.438-.161 4.172-1.077 4.172-1.669h1.5C14.422 13.57 11.547 15 8 15c-3.547 0-6.422-1.43-6.422-3.194h1.5c0 .592 1.734 1.508 4.172 1.67V8.452H4.904v-1.5H7.25V5.886A2.501 2.501 0 018 1zm0 1.5a1 1 0 100 2 1 1 0 000-2z' fill='#{vf-url-friendly-color($color)}' fill-rule='nonzero'/%3E%3C/svg%3E");
@@ -269,6 +294,10 @@
   @include vf-themed-icon($light-value: vf-icon-search-url($colors--light-theme--icon), $dark-value: vf-icon-search-url($colors--dark-theme--icon));
 }
 
+@mixin vf-icon-search-muted {
+  @include vf-themed-icon($light-value: vf-icon-search-url($colors--light-theme--text-muted), $dark-value: vf-icon-search-url($colors--dark-theme--text-muted));
+}
+
 // success
 @function vf-icon-success-url($color: $color-positive, $color-symbol: $color-x-light) {
   @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg fill='none' fill-rule='nonzero'%3E%3Cpath fill='#{vf-url-friendly-color($color)}' d='M8 1a7 7 0 110 14A7 7 0 018 1zm2.83 3.502L6.863 9.884 5.174 8.096l-1.09 1.03 2.92 3.096 5.034-6.83-1.208-.89z'/%3E%3Cpath fill='#{vf-url-friendly-color($color-symbol)}' d='M10.83 4.502l1.208.89-5.033 6.83-2.922-3.096 1.091-1.03 1.689 1.789z'/%3E%3C/g%3E%3C/svg%3E");

package/scss/_base_links.scss

@@ -8,7 +8,7 @@
   }
 
   %vf-link-base {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     color: $colors--theme--link-default;
     text-decoration: none;

package/scss/_base_placeholders.scss

@@ -43,7 +43,7 @@
   }
 
   %vf-card-padding {
-    overflow: auto;
+    overflow: auto; // prevent overflow of child margins
     padding: $spv--large;
   }
 
@@ -52,8 +52,6 @@
     @extend %vf-card-padding;
 
     margin-bottom: $spv--x-large;
-    overflow: auto; // prevent overflow of child margins
-    padding: $spv--large;
   }
 
   //accordion, table
@@ -100,8 +98,10 @@
   }
 
   %hr {
+    background: $colors--theme--border-default;
     border: 0;
     height: 1px;
+    margin-bottom: calc($spv--small - 1px);
     margin-top: 0;
     position: relative;
     width: 100%;

package/scss/_base_typography-definitions.scss

@@ -1,7 +1,7 @@
 @mixin vf-b-typography-definitions {
   %vf-is-accent {
     &.is-accent {
-      color: $color-accent;
+      color: $colors--theme--accent;
     }
   }
 

package/scss/_global_functions.scss

@@ -60,16 +60,22 @@
   }
 }
 
-// Adds visual focus to elements on :focus-visible,
-// or :focus if the browser doesn't support the former
-@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
+// Adds visual focus to elements on :focus-visible or :focus if the browser
+// doesn't support the former
+@mixin vf-focus-themed($light-color: $colors--light-theme--focus, $dark-color: $colors--dark-theme--focus, $width: $bar-thickness, $has-validation: false) {
+  --vf-focus-outline-color: #{$light-color};
+
+  .is-dark & {
+    --vf-focus-outline-color: #{$dark-color};
+  }
+
   &:focus {
-    outline: $width solid $color;
+    outline: $width solid var(--vf-focus-outline-color);
     outline-offset: -#{$width};
   }
 
   &:focus-visible {
-    outline: $width solid $color;
+    outline: $width solid var(--vf-focus-outline-color);
     outline-offset: -#{$width};
   }
 
@@ -93,6 +99,12 @@
   }
 }
 
+// This mixin is deprecated and will be removed in a future version of Vanilla.
+// Please use vf-focus-themed instead.
+@mixin vf-focus($color: $colors--theme--focus, $width: $bar-thickness, $has-validation: false) {
+  @include vf-focus-themed($light-color: $color, $width: $width, $has-validation: $has-validation);
+}
+
 // Raises a number to a power (https://css-tricks.com/snippets/sass/power-function/)
 @function pow($number, $exponent) {
   $value: 1;

package/scss/_layouts_application-panels.scss

@@ -1,14 +1,9 @@
 @mixin vf-l-application-panels {
   .p-panel {
-    background: $colors--light-theme--background-default;
-    color: $colors--light-theme--text-default;
+    background: $colors--theme--background-default;
+    color: $colors--theme--text-default;
     max-width: 100%;
     min-height: 100%; // make sure it fills whole container even when has little content
-
-    &.is-dark {
-      background: $colors--dark-theme--background-default;
-      color: $colors--dark-theme--text-default;
-    }
   }
 
   .p-panel__header {
@@ -18,14 +13,10 @@
   }
 
   .p-panel__header.is-sticky {
-    background: $colors--light-theme--background-default;
+    background: $colors--theme--background-default;
     position: sticky;
     top: 0;
     z-index: 5;
-
-    .p-panel.is-dark & {
-      background: $colors--dark-theme--background-default;
-    }
   }
 
   .p-panel__content {

package/scss/_layouts_application.scss

@@ -229,7 +229,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
   }
 
   .l-application .l-status {
-    border-top: 1px solid $colors--light-theme--border-low-contrast;
+    border-top: 1px solid $colors--theme--border-default;
     grid-area: status;
     z-index: 102;
   }
@@ -265,7 +265,7 @@ $application-layout--side-nav-width-expanded: 15rem !default;
 
     @media (min-width: $application-layout--breakpoint-side-nav-collapsed) {
       &.is-pinned {
-        border-left: 1px solid $colors--light-theme--border-low-contrast;
+        border-left: 1px solid $colors--theme--border-default;
         box-shadow: none;
         grid-area: aside;
         justify-self: auto;

package/scss/_layouts_fluid-breakout.scss

@@ -149,7 +149,7 @@
       grid-column: 2 / -1;
       grid-template-columns: repeat(2, minmax(0, 1fr));
 
-      @media (max-width: $threshold-4-6-col - 1) {
+      @media (width < $threshold-4-6-col) {
         grid-template-columns: repeat(1, minmax(0, 1fr));
         width: $l-fluid-breakout-main-child-width;
       }
@@ -163,7 +163,7 @@
       &:nth-child(2) {
         justify-content: flex-end;
 
-        @media (max-width: $threshold-4-6-col - 1) {
+        @media (width < $threshold-4-6-col) {
           justify-content: flex-start;
         }
       }

package/scss/_patterns_accordion.scss

@@ -17,7 +17,7 @@
 
   .p-accordion__tab {
     @extend %single-border-text-vpadding--scaling;
-    @include vf-focus;
+    @include vf-focus-themed;
 
     background-color: inherit;
     border: 0;

package/scss/_patterns_article-pagination.scss

@@ -3,7 +3,6 @@
 @mixin vf-p-article-pagination {
   %chevron-icon {
     @extend %icon;
-    @include vf-icon-chevron-themed;
 
     content: '';
     position: absolute;
@@ -56,7 +55,7 @@
     padding-left: $sp-xx-large;
     text-align: left;
 
-    @media (max-width: $breakpoint-x-small - 1) {
+    @media (width < $breakpoint-x-small) {
       margin-right: 0;
       width: auto;
 
@@ -73,9 +72,9 @@
 
     &::before {
       @extend %chevron-icon;
+      @include vf-icon-chevron-left-themed;
 
       left: $sp-small;
-      transform: rotate(90deg);
     }
   }
 
@@ -85,7 +84,7 @@
     padding-right: $sp-xx-large;
     text-align: right;
 
-    @media (max-width: $breakpoint-x-small - 1) {
+    @media (width < $breakpoint-x-small) {
       width: 100%;
     }
 
@@ -95,9 +94,9 @@
 
     &::after {
       @extend %chevron-icon;
+      @include vf-icon-chevron-right-themed;
 
       right: $sp-small;
-      transform: rotate(-90deg);
     }
   }
 }

package/scss/_patterns_buttons.scss

@@ -80,7 +80,7 @@
       $button-disabled-border-color: $colors--theme--button-positive-default,
       $button-text-color: $colors--theme--button-positive-text
     );
-    @include vf-focus($color-focus-positive);
+    @include vf-focus-themed($light-color: $color-focus-positive);
   }
 }
 

package/scss/_patterns_chip.scss

@@ -1,22 +1,21 @@
 @use 'sass:math';
 @import 'settings';
-$chip-border-thickness: 1px;
 
 @mixin vf-p-chip {
   %vf-chip {
     @extend %small-text;
     @include vf-transition(#{background-color, border-color}, snap, out);
-    @include vf-focus;
+    @include vf-focus-themed;
 
     align-items: baseline;
     border-radius: 1rem;
     display: inline-flex;
     margin: 0 $sph--small $input-margin-bottom 0;
     max-width: 100%;
-    padding: calc($spv--x-small - $chip-border-thickness) $sph--small; // account for border thickness using calc
+    padding: calc($spv--x-small - $input-border-thickness) $sph--small; // account for border thickness using calc
     position: relative;
     user-select: none;
-    vertical-align: calc($chip-border-thickness - map-get($nudges, p));
+    vertical-align: calc($input-border-thickness - map-get($nudges, p));
     white-space: nowrap;
 
     .p-chip__lead,
@@ -78,7 +77,7 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-neutral-default;
-    border: $chip-border-thickness solid $colors--theme--border-neutral;
+    border: $input-border-thickness solid $colors--theme--border-neutral;
     border-color: $colors--theme--border-neutral;
   }
 
@@ -115,7 +114,7 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-positive-default;
-    border: $chip-border-thickness solid $colors--theme--border-positive;
+    border: $input-border-thickness solid $colors--theme--border-positive;
     border-color: $colors--theme--border-positive;
   }
 
@@ -152,7 +151,7 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-caution-default;
-    border: $chip-border-thickness solid $colors--theme--border-caution;
+    border: $input-border-thickness solid $colors--theme--border-caution;
     border-color: $colors--theme--border-caution;
   }
 
@@ -189,7 +188,7 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-negative-default;
-    border: $chip-border-thickness solid $colors--theme--border-negative;
+    border: $input-border-thickness solid $colors--theme--border-negative;
     border-color: $colors--theme--border-negative;
   }
 
@@ -226,7 +225,7 @@ $chip-border-thickness: 1px;
     @extend %vf-chip;
 
     background-color: $colors--theme--background-information-default;
-    border: $chip-border-thickness solid $colors--theme--border-information;
+    border: $input-border-thickness solid $colors--theme--border-information;
     border-color: $colors--theme--border-information;
   }
 

package/scss/_patterns_code-snippet.scss

@@ -9,7 +9,7 @@
 
     Code block:
         .p-code-snippet__block:
-            Code block without any additonal styling elements.
+            Code block without any additional styling elements.
         "&.is-wrapped":
             Code block with wrapped content in lines.
         .p-code-snippet__block--icon:

package/scss/_patterns_contextual-menu.scss

@@ -66,7 +66,7 @@
   }
 
   .p-contextual-menu__link {
-    @include vf-focus;
+    @include vf-focus-themed;
 
     border: 0;
     clear: both;

package/scss/_patterns_cta.scss

@@ -0,0 +1,27 @@
+/*
+  @classreference
+  cta-block:
+    CTA Block:
+      .p-cta-block:
+        Main element of the CTA block.
+      "&.is-borderless":
+        Borderless variant, to be used to hide top border and padding.
+*/
+
+@import 'settings';
+
+@mixin vf-p-cta-block {
+  .p-cta-block {
+    align-items: baseline;
+    border-top: 1px solid $colors--theme--border-low-contrast;
+    display: flex;
+    flex-wrap: wrap;
+    padding-bottom: $spv--x-large;
+    padding-top: $spv--small;
+
+    &.is-borderless {
+      border: none;
+      padding-top: 0;
+    }
+  }
+}