@typo3/icons 2.4.1 → 3.0.0

package/.github/workflows/ci.yml

@@ -5,7 +5,7 @@ on:
   pull_request:
 
 env:
-  NODE: 14.x
+  NODE: 16.x
 
 jobs:
   build:

package/.github/workflows/site.yaml

@@ -3,10 +3,10 @@ name: Site
 on:
   push:
     branches:
-      - master
+      - main
 
 env:
-  NODE: 14.x
+  NODE: 16.x
 
 jobs:
   deploy:
@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: "${{ env.NODE }}"
+          node-version: '${{ env.NODE }}'
 
       - name: Set up cache
         uses: actions/cache@v2

package/.stylelintrc

@@ -1,4 +1,6 @@
 {
+  "plugins": ["stylelint-order", "stylelint-scss"],
+  "customSyntax": "postcss-scss",
   "rules": {
     "at-rule-empty-line-before": "never",
     "at-rule-name-case": "lower",

package/assets/scss/icons.scss

@@ -20,12 +20,21 @@
 //
 // Variables
 //
-$icon-size-small:   16px !default;
-$icon-size-default: 32px !default;
-$icon-size-large:   48px !default;
-$icon-size-mega:    64px !default;
-$icon-unify-modifier: .86 !default;
+$icon-size-small:       16px !default;
+$icon-size-medium:      32px !default;
+$icon-size-large:       48px !default;
+$icon-size-mega:        64px !default;
+$icon-unify-modifier:   .86 !default;
 $icon-opacity-disabled: .5 !default;
+:root {
+    --icon-color-primary: currentColor;
+    --icon-size-small: #{$icon-size-small};
+    --icon-size-medium: #{$icon-size-medium};
+    --icon-size-large: #{$icon-size-large};
+    --icon-size-mega: #{$icon-size-mega};
+    --icon-unify-modifier: #{$icon-unify-modifier};
+    --icon-opacity-disabled: #{$icon-size-mega};
+}
 
 //
 // Component
@@ -35,8 +44,9 @@ $icon-opacity-disabled: .5 !default;
     display: inline-flex;
     overflow: hidden;
     white-space: nowrap;
-    height: 1em;
-    width: 1em;
+    height: var(--icon-size, 1em);
+    width: var(--icon-size, 1em);
+    line-height: var(--icon-size, 1em);
     flex-shrink: 0;
     svg,
     img {
@@ -68,7 +78,7 @@ $icon-opacity-disabled: .5 !default;
     text-align: center;
 }
 .icon-color {
-    fill: currentColor;
+    fill: var(--icon-color-primary);
 }
 
 //
@@ -106,31 +116,29 @@ $icon-opacity-disabled: .5 !default;
 //
 .icon-state-disabled {
     .icon-markup {
-        opacity: $icon-opacity-disabled;
+        opacity: var(--icon-opacity-disabled);
     }
 }
 
 //
 // Variants
 //
-@mixin icon-size($identifier, $size) {
+@mixin icon-size($identifier) {
     .icon-size-#{$identifier} {
-        height: $size;
-        width: $size;
-        line-height: $size;
+        --icon-size: var(--icon-size-#{$identifier});
         .icon-unify {
-            line-height: $size;
-            font-size: ceil($size * $icon-unify-modifier);
+            line-height: var(--icon-size);
+            font-size: calc(var(--icon-size) * var(--icon-unify-modifier));
         }
         .icon-overlay {
             .icon-unify {
-                line-height: ceil($size / 1.6);
-                font-size: ceil(ceil($size / 1.6) * $icon-unify-modifier);
+                line-height: calc(var(--icon-size) / 1.6);
+                font-size: calc((var(--icon-size) / 1.6) * var(--icon-unify-modifier));
             }
         }
     }
 }
-@include icon-size(small, $icon-size-small);
-@include icon-size(default, $icon-size-default);
-@include icon-size(large, $icon-size-large);
-@include icon-size(mega, $icon-size-mega);
+@include icon-size(small);
+@include icon-size(medium);
+@include icon-size(large);
+@include icon-size(mega);

package/dist/icons.css

@@ -1 +1 @@
-.icon{position:relative;display:inline-flex;overflow:hidden;white-space:nowrap;height:1em;width:1em;flex-shrink:0}.icon img,.icon svg{display:block;height:100%;width:100%;transform:translate3d(0,0,0)}.icon *{display:block;line-height:inherit}.icon-markup{position:absolute;display:block;text-align:center;top:0;left:0;right:0;bottom:0}.icon-overlay{position:absolute;bottom:0;right:0;height:68.75%;width:68.75%;text-align:center}.icon-color{fill:currentColor}.icon-spin .icon-markup{-webkit-animation:icon-spin 2s infinite linear;animation:icon-spin 2s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icon-state-disabled .icon-markup{opacity:.5}.icon-size-small{height:16px;width:16px;line-height:16px}.icon-size-small .icon-unify{line-height:16px;font-size:14px}.icon-size-small .icon-overlay .icon-unify{line-height:10px;font-size:9px}.icon-size-default{height:32px;width:32px;line-height:32px}.icon-size-default .icon-unify{line-height:32px;font-size:28px}.icon-size-default .icon-overlay .icon-unify{line-height:20px;font-size:18px}.icon-size-large{height:48px;width:48px;line-height:48px}.icon-size-large .icon-unify{line-height:48px;font-size:42px}.icon-size-large .icon-overlay .icon-unify{line-height:30px;font-size:26px}.icon-size-mega{height:64px;width:64px;line-height:64px}.icon-size-mega .icon-unify{line-height:64px;font-size:56px}.icon-size-mega .icon-overlay .icon-unify{line-height:40px;font-size:35px}
+:root{--icon-color-primary:currentColor;--icon-size-small:16px;--icon-size-medium:32px;--icon-size-large:48px;--icon-size-mega:64px;--icon-unify-modifier:0.86;--icon-opacity-disabled:64px}.icon{position:relative;display:inline-flex;overflow:hidden;white-space:nowrap;height:var(--icon-size,1em);width:var(--icon-size,1em);line-height:var(--icon-size,1em);flex-shrink:0}.icon img,.icon svg{display:block;height:100%;width:100%;transform:translate3d(0,0,0)}.icon *{display:block;line-height:inherit}.icon-markup{position:absolute;display:block;text-align:center;top:0;left:0;right:0;bottom:0}.icon-overlay{position:absolute;bottom:0;right:0;height:68.75%;width:68.75%;text-align:center}.icon-color{fill:var(--icon-color-primary)}.icon-spin .icon-markup{-webkit-animation:icon-spin 2s infinite linear;animation:icon-spin 2s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icon-state-disabled .icon-markup{opacity:var(--icon-opacity-disabled)}.icon-size-small{--icon-size:var(--icon-size-small)}.icon-size-small .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-small .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc((var(--icon-size)/ 1.6) * var(--icon-unify-modifier))}.icon-size-medium{--icon-size:var(--icon-size-medium)}.icon-size-medium .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-medium .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc((var(--icon-size)/ 1.6) * var(--icon-unify-modifier))}.icon-size-large{--icon-size:var(--icon-size-large)}.icon-size-large .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-large .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc((var(--icon-size)/ 1.6) * var(--icon-unify-modifier))}.icon-size-mega{--icon-size:var(--icon-size-mega)}.icon-size-mega .icon-unify{line-height:var(--icon-size);font-size:calc(var(--icon-size) * var(--icon-unify-modifier))}.icon-size-mega .icon-overlay .icon-unify{line-height:calc(var(--icon-size)/ 1.6);font-size:calc((var(--icon-size)/ 1.6) * var(--icon-unify-modifier))}

package/dist/icons.json

@@ -156,6 +156,12 @@
       "svg": "svgs/actions/actions-bolt.svg",
       "sprite": "sprites/actions.svg#actions-bolt"
     },
+    "actions-book": {
+      "identifier": "actions-book",
+      "category": "actions",
+      "svg": "svgs/actions/actions-book.svg",
+      "sprite": "sprites/actions.svg#actions-book"
+    },
     "actions-brand-apple": {
       "identifier": "actions-brand-apple",
       "category": "actions",
@@ -180,6 +186,12 @@
       "svg": "svgs/actions/actions-brand-git.svg",
       "sprite": "sprites/actions.svg#actions-brand-git"
     },
+    "actions-brand-instagram": {
+      "identifier": "actions-brand-instagram",
+      "category": "actions",
+      "svg": "svgs/actions/actions-brand-instagram.svg",
+      "sprite": "sprites/actions.svg#actions-brand-instagram"
+    },
     "actions-brand-linkedin": {
       "identifier": "actions-brand-linkedin",
       "category": "actions",
@@ -234,6 +246,12 @@
       "svg": "svgs/actions/actions-brand-youtube.svg",
       "sprite": "sprites/actions.svg#actions-brand-youtube"
     },
+    "actions-briefcase": {
+      "identifier": "actions-briefcase",
+      "category": "actions",
+      "svg": "svgs/actions/actions-briefcase.svg",
+      "sprite": "sprites/actions.svg#actions-briefcase"
+    },
     "actions-browser": {
       "identifier": "actions-browser",
       "category": "actions",
@@ -558,6 +576,12 @@
       "svg": "svgs/actions/actions-code.svg",
       "sprite": "sprites/actions.svg#actions-code"
     },
+    "actions-coffee": {
+      "identifier": "actions-coffee",
+      "category": "actions",
+      "svg": "svgs/actions/actions-coffee.svg",
+      "sprite": "sprites/actions.svg#actions-coffee"
+    },
     "actions-cog-alt": {
       "identifier": "actions-cog-alt",
       "category": "actions",
@@ -576,6 +600,12 @@
       "svg": "svgs/actions/actions-comment.svg",
       "sprite": "sprites/actions.svg#actions-comment"
     },
+    "actions-container": {
+      "identifier": "actions-container",
+      "category": "actions",
+      "svg": "svgs/actions/actions-container.svg",
+      "sprite": "sprites/actions.svg#actions-container"
+    },
     "actions-cookie-bite": {
       "identifier": "actions-cookie-bite",
       "category": "actions",
@@ -972,6 +1002,12 @@
       "svg": "svgs/actions/actions-file-search.svg",
       "sprite": "sprites/actions.svg#actions-file-search"
     },
+    "actions-file-shield": {
+      "identifier": "actions-file-shield",
+      "category": "actions",
+      "svg": "svgs/actions/actions-file-shield.svg",
+      "sprite": "sprites/actions.svg#actions-file-shield"
+    },
     "actions-file-t3d-download": {
       "identifier": "actions-file-t3d-download",
       "category": "actions",
@@ -1092,6 +1128,12 @@
       "svg": "svgs/actions/actions-hand-pointer.svg",
       "sprite": "sprites/actions.svg#actions-hand-pointer"
     },
+    "actions-heart-alt": {
+      "identifier": "actions-heart-alt",
+      "category": "actions",
+      "svg": "svgs/actions/actions-heart-alt.svg",
+      "sprite": "sprites/actions.svg#actions-heart-alt"
+    },
     "actions-heart": {
       "identifier": "actions-heart",
       "category": "actions",
@@ -1590,6 +1632,12 @@
       "svg": "svgs/actions/actions-star.svg",
       "sprite": "sprites/actions.svg#actions-star"
     },
+    "actions-store": {
+      "identifier": "actions-store",
+      "category": "actions",
+      "svg": "svgs/actions/actions-store.svg",
+      "sprite": "sprites/actions.svg#actions-store"
+    },
     "actions-swap": {
       "identifier": "actions-swap",
       "category": "actions",
@@ -2460,6 +2508,18 @@
       "svg": "svgs/content/content-carousel.svg",
       "sprite": "sprites/content.svg#content-carousel"
     },
+    "content-certificate-alternative": {
+      "identifier": "content-certificate-alternative",
+      "category": "content",
+      "svg": "svgs/content/content-certificate-alternative.svg",
+      "sprite": "sprites/content.svg#content-certificate-alternative"
+    },
+    "content-certificate": {
+      "identifier": "content-certificate",
+      "category": "content",
+      "svg": "svgs/content/content-certificate.svg",
+      "sprite": "sprites/content.svg#content-certificate"
+    },
     "content-clock": {
       "identifier": "content-clock",
       "category": "content",
@@ -2508,6 +2568,12 @@
       "svg": "svgs/content/content-container-columns-4.svg",
       "sprite": "sprites/content.svg#content-container-columns-4"
     },
+    "content-container": {
+      "identifier": "content-container",
+      "category": "content",
+      "svg": "svgs/content/content-container.svg",
+      "sprite": "sprites/content.svg#content-container"
+    },
     "content-cpu": {
       "identifier": "content-cpu",
       "category": "content",
@@ -2592,6 +2658,12 @@
       "svg": "svgs/content/content-header.svg",
       "sprite": "sprites/content.svg#content-header"
     },
+    "content-heart": {
+      "identifier": "content-heart",
+      "category": "content",
+      "svg": "svgs/content/content-heart.svg",
+      "sprite": "sprites/content.svg#content-heart"
+    },
     "content-idea": {
       "identifier": "content-idea",
       "category": "content",
@@ -2880,6 +2952,12 @@
       "svg": "svgs/content/content-timeline.svg",
       "sprite": "sprites/content.svg#content-timeline"
     },
+    "content-trophy": {
+      "identifier": "content-trophy",
+      "category": "content",
+      "svg": "svgs/content/content-trophy.svg",
+      "sprite": "sprites/content.svg#content-trophy"
+    },
     "content-user": {
       "identifier": "content-user",
       "category": "content",
@@ -3846,6 +3924,12 @@
       "svg": "svgs/module/module-lang.svg",
       "sprite": "sprites/module.svg#module-lang"
     },
+    "module-linkvalidator": {
+      "identifier": "module-linkvalidator",
+      "category": "module",
+      "svg": "svgs/module/module-linkvalidator.svg",
+      "sprite": "sprites/module.svg#module-linkvalidator"
+    },
     "module-list": {
       "identifier": "module-list",
       "category": "module",

package/dist/icons.scss

@@ -20,12 +20,21 @@
 //
 // Variables
 //
-$icon-size-small:   16px !default;
-$icon-size-default: 32px !default;
-$icon-size-large:   48px !default;
-$icon-size-mega:    64px !default;
-$icon-unify-modifier: .86 !default;
+$icon-size-small:       16px !default;
+$icon-size-medium:      32px !default;
+$icon-size-large:       48px !default;
+$icon-size-mega:        64px !default;
+$icon-unify-modifier:   .86 !default;
 $icon-opacity-disabled: .5 !default;
+:root {
+    --icon-color-primary: currentColor;
+    --icon-size-small: #{$icon-size-small};
+    --icon-size-medium: #{$icon-size-medium};
+    --icon-size-large: #{$icon-size-large};
+    --icon-size-mega: #{$icon-size-mega};
+    --icon-unify-modifier: #{$icon-unify-modifier};
+    --icon-opacity-disabled: #{$icon-size-mega};
+}
 
 //
 // Component
@@ -35,8 +44,9 @@ $icon-opacity-disabled: .5 !default;
     display: inline-flex;
     overflow: hidden;
     white-space: nowrap;
-    height: 1em;
-    width: 1em;
+    height: var(--icon-size, 1em);
+    width: var(--icon-size, 1em);
+    line-height: var(--icon-size, 1em);
     flex-shrink: 0;
     svg,
     img {
@@ -68,7 +78,7 @@ $icon-opacity-disabled: .5 !default;
     text-align: center;
 }
 .icon-color {
-    fill: currentColor;
+    fill: var(--icon-color-primary);
 }
 
 //
@@ -106,31 +116,29 @@ $icon-opacity-disabled: .5 !default;
 //
 .icon-state-disabled {
     .icon-markup {
-        opacity: $icon-opacity-disabled;
+        opacity: var(--icon-opacity-disabled);
     }
 }
 
 //
 // Variants
 //
-@mixin icon-size($identifier, $size) {
+@mixin icon-size($identifier) {
     .icon-size-#{$identifier} {
-        height: $size;
-        width: $size;
-        line-height: $size;
+        --icon-size: var(--icon-size-#{$identifier});
         .icon-unify {
-            line-height: $size;
-            font-size: ceil($size * $icon-unify-modifier);
+            line-height: var(--icon-size);
+            font-size: calc(var(--icon-size) * var(--icon-unify-modifier));
         }
         .icon-overlay {
             .icon-unify {
-                line-height: ceil($size / 1.6);
-                font-size: ceil(ceil($size / 1.6) * $icon-unify-modifier);
+                line-height: calc(var(--icon-size) / 1.6);
+                font-size: calc((var(--icon-size) / 1.6) * var(--icon-unify-modifier));
             }
         }
     }
 }
-@include icon-size(small, $icon-size-small);
-@include icon-size(default, $icon-size-default);
-@include icon-size(large, $icon-size-large);
-@include icon-size(mega, $icon-size-mega);
+@include icon-size(small);
+@include icon-size(medium);
+@include icon-size(large);
+@include icon-size(mega);