wip

packages/components-css/logo/index.scss

@@ -1,13 +1,98 @@
+// LOGO STYLING
 .frameless-logo__wrapper {
-  align-items: center;
+  container-type: inline-size;
+  container-name: logoWrapper;
   display: flex;
+  align-items: center;
+  gap: 1em;
   flex-direction: row;
-  inline-size: var(--frameless-logo-wrapper-inline-size);
   padding-block: var(--frameless-logo-wrapper-padding-block);
   padding-inline: var(--frameless-logo-wrapper-padding-inline);
+  border: 1px solid black;
 }
 
 .frameless-logo__text {
   font-family: var(--frameless-logo-text-font-family);
   font-size: var(--frameless-logo-text-font-size);
+  border: solid black 1px;
+  width: min-content;
+}
+
+.utrecht-logo {
+  border: solid black 1px;
+  width: min-content;
+}
+
+// RESPONSIVENESS
+@container logoWrapper (min-width:400px) and (max-width:800) {
+  .frameless-logo__text {
+    color: red;
+  }
+
+  .utrecht-logo {
+    color: blue;
+  }
+}
+
+// 300px - 399px
+// alleen Logo Text (groot)
+@container logoWrapper (min-width:300px) and (max-width:399px) {
+  .utrecht-logo {
+    transform: scale(0.75);
+  }
+
+  .frameless-logo__text {
+    font-size: 3em;
+  }
+}
+
+// 251px - 299px
+// alleen text (groot)
+@media (min-width:251px) and (max-width:299px) {
+  .frameless-logo__wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 0.2em;
+  }
+}
+
+@container logoWrapper (min-width:251px) and (max-width:299px) {
+  .utrecht-logo {
+    transform: scale(0.75);
+  }
+  .frameless-logo__text {
+    font-size: 2em;
+  }
+}
+
+// 151px - 250px
+// flex column logo wrapper: text onder SVG
+@media (min-width:151px) and (max-width:250px) {
+  .frameless-logo__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2em;
+  }
+}
+// logo text font (klein)
+@container logoWrapper (min-width:151px) and (max-width:250px) {
+  .frameless-logo__text {
+    font-size: 2em;
+  }
+
+  .utrecht-logo {
+    transform: scale(0.75);
+  }
+}
+
+// 60px - 150Ppx 
+// alleen SVG 
+@container logoWrapper (min-width:60px) and (max-width:150px) {
+  .frameless-logo__text {
+    display: none;
+  }
+
+  .utrecht-logo {
+    transform: scale(0.75);
+  }
 }

proprietary/design-tokens/figma/figma.tokens.json

@@ -3131,12 +3131,7 @@
   },
   "components/logo": {
     "utrecht": {
-      "logo": {
-        "max-block-size": { "value": "", "comment": "" },
-        "max-inline-size": {},
-        "min-block-size": {},
-        "min-inline-size": {}
-      }
+      "logo": {}
     },
     "frameless": {
       "logo-text": {