css refactorings

sbb-design-systems · Sep 2, 2024 · 781f4f7 · 781f4f7
1 parent 844d726
commit 781f4f7
Show file tree

Hide file tree

Showing 18 changed files with 323 additions and 341 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,6 +1,9 @@
 {
     "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
     "ignoreFiles": ["src/assets/css/partials/partial-code.scss", "dist/**/*.scss", "dist/**/*.css"],
+    "plugins": [
+        "stylelint-use-logical-spec"
+    ],
     "rules": {
       "custom-property-pattern": "^_?(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
       "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
@@ -49,6 +52,7 @@
       ],
       "number-max-precision": 12,
       "value-no-vendor-prefix": [true, { "ignoreValues": ["box"] }],
-      "no-duplicate-selectors": null
+      "no-duplicate-selectors": null,
+      "liberty/use-logical-spec": true
     }
   }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,8 +9,8 @@
         "copy:components": "copyfiles -f ./node_modules/list.js/dist/* dist/assets/js/listjs/ && copyfiles -u 4 ./node_modules/ux-components/dist/ux-components/*.* dist/assets/js/ux-components/",
         "html-minify": "html-minifier --input-dir dist --output-dir dist --file-ext html --remove-comments --collapse-whitespace --conservative-collapse --minify-js false --minify-css true",
         "prestart": "npm run copy:components && npm run bundle:lyne",
-        "start": "eleventy --serve",
-        "build": "npm run copy:components && npm run bundle:lyne && BUILD_MODE=production eleventy && npm run html-minify && gzipper compress ./dist"
+        "start": "npx stylelint 'src/assets/css/*.scss' && npx stylelint 'src/assets/css/**/*.scss' && eleventy --serve",
+        "build": "npx stylelint 'src/assets/css/*.scss' && npx stylelint 'src/assets/css/**/*.scss' && npm run copy:components && npm run bundle:lyne && BUILD_MODE=production eleventy && npm run html-minify && gzipper compress ./dist"
     },
     "author": "Manuel Cilurzo",
     "license": "ISC",
@@ -25,7 +25,8 @@
         "stylelint": "^16.9.0",
         "stylelint-config-prettier-scss": "^1.0.0",
         "stylelint-config-standard": "^36.0.1",
-        "stylelint-config-standard-scss": "^13.1.0"
+        "stylelint-config-standard-scss": "^13.1.0",
+        "stylelint-use-logical-spec": "^5.0.1"
     },
     "dependencies": {
         "@11ty/eleventy-fetch": "^4.0.0",

diff --git a/src/assets/css/partials/partial-code.scss b/src/assets/css/partials/partial-code.scss
@@ -4,15 +4,6 @@ pre code.hljs {
   padding: 1em
 }
 
-code.hljs {
-  padding: 3px 5px
-}
-
-/*
-
-Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
-
-*/
 .hljs {
   background: #23241f;
   color: #f8f8f2

diff --git a/src/assets/css/partials/partial-colors.scss b/src/assets/css/partials/partial-colors.scss
@@ -4,7 +4,7 @@
   display: grid;
   gap: var(--sbb-layout-base-grid-gutter-responsive-zero);
   grid-template-columns: 1fr;
-  margin-top: var(--sbb-spacing-responsive-xs);
+  margin-block-start: var(--sbb-spacing-responsive-xs);
 
   @include sbb.mq($from: small) {
     gap: var(--sbb-layout-base-grid-gutter-responsive-small);
@@ -31,29 +31,29 @@
 
 .color {
   .preview {
-    height: var(--sbb-spacing-fixed-24x);
+    block-size: var(--sbb-spacing-fixed-24x);
     display: block;
-    width: calc(100% + 48px);
-    margin-left: -24px;
-    margin-right: -24px;
-    margin-top: -12px;
-    border-top-left-radius: 11px;
-    border-top-right-radius: 11px;
+    inline-size: calc(100% + var(--sbb-spacing-fixed-12x));
+    margin-inline: calc(-1 * var(--sbb-spacing-fixed-6x));
+    margin-block-start: calc(-1 * var(--sbb-spacing-fixed-6x));
+    border-start-start-radius: calc(var(--sbb-spacing-fixed-3x) - var(--sbb-border-width-1x));
+    border-start-end-radius: calc(var(--sbb-spacing-fixed-3x) - var(--sbb-border-width-1x));
 
     @include sbb.mq($from: medium) {
-      width: calc(100% + 64px);
-      margin-left: -32px;
-      margin-right: -32px;
-      margin-top: -16px;
+      inline-size: calc(100% + var((--sbb-spacing-fixed-16x)));
+      margin-inline: calc(-1 * var(--sbb-spacing-fixed-8x));
+      margin-block-start: calc(-1 * var(--sbb-spacing-fixed-4x));
+
+
     }
   }
 
   sbb-title {
-    margin-top: var(--sbb-spacing-fixed-4x);
+    margin-block-start: var(--sbb-spacing-fixed-4x);
   }
 
   .info {
-    margin-top: var(--sbb-spacing-fixed-4x);
+    margin-block-start: var(--sbb-spacing-fixed-4x);
   }
 
   p {
@@ -63,15 +63,15 @@
 }
 
 .color-ratio {
-  width: 100%;
+  inline-size: 100%;
   border-radius: var(--sbb-border-radius-4x);
   overflow: hidden;
-  border: solid 1px var(--sbb-color-cloud);
+  border: solid var(--sbb-border-width-1x) var(--sbb-color-cloud);
   display: flex;
 }
 
 .color-ratio div {
-  height: var(--sbb-spacing-fixed-24x);
+  block-size: var(--sbb-spacing-fixed-24x);
   line-height: var(--sbb-spacing-fixed-24x);
   text-align: center;
 }

diff --git a/src/assets/css/partials/partial-community-assets.scss b/src/assets/css/partials/partial-community-assets.scss
@@ -3,7 +3,7 @@
 #communitylist {
   background-color: var(--sbb-color-milk);
   box-sizing: border-box;
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
@@ -13,7 +13,7 @@
 }
 
 .community-asset {
-  width: 100%;
+  inline-size: 100%;
   padding: var(--sbb-spacing-responsive-s);
   display: grid;
   grid-template-rows: auto;
@@ -27,7 +27,7 @@
 
   .col-2 {
     display: flex;
-    gap: 8px;
+    gap: var(--sbb-spacing-fixed-2x);
     align-items: center;
     justify-content: left;
   }
@@ -48,16 +48,16 @@
 }
 
 .community-asset-header {
-  width: 100%;
+  inline-size: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   gap: var(--sbb-spacing-fixed-4x);
   align-items: center;
-  padding-bottom: var(--sbb-spacing-responsive-m);
+  padding-block-end: var(--sbb-spacing-responsive-m);
 
   sbb-form-field {
-    width: 100%;
+    inline-size: 100%;
     border-radius: var(--sbb-form-field-border-radius);
   }
 }
@@ -69,7 +69,7 @@
   align-items: flex-start;
   border-radius: var(--sbb-border-radius-4x);
   overflow: hidden;
-  gap: 1px;
+  gap: var(--sbb-border-width-2x);
   box-sizing: border-box;
 }
 
@@ -93,9 +93,10 @@
   border-radius: var(--sbb-border-radius-4x);
 
   sbb-image {
-    width: 50%;
-    margin: 0 25%;
-    padding-bottom: var(--sbb-spacing-responsive-s);
+    inline-size: 50%;
+    margin-block: 0;
+    margin-inline: 25%;
+    padding-block-end: var(--sbb-spacing-responsive-s);
 
   }
 
@@ -105,10 +106,10 @@
   }
 
   p {
-    margin-bottom: var(--sbb-spacing-responsive-xxs);
+    margin-block-end: var(--sbb-spacing-responsive-xxs);
   }
 }
 
 .add-asset {
-  margin-top: var(--sbb-spacing-responsive-s);
+  margin-block-start: var(--sbb-spacing-responsive-s);
 }