chore: rename /styling/web paths to /css-classes (#36)

* chore: rename /styling/web paths to /css-classes

* Move css-related JPGs to public/images/

docs/components/badge/Example.vue

@@ -20,7 +20,7 @@ const badgePositions = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
     <div>
       <h3 class="t4">Positioning</h3>
       <div class="relative border border-0 rounded overflow-hidden h-96">
-        <img class="w-full h-96 rounded-8 object-cover" src="/css/profile1.jpg" />
+        <img class="w-full h-96 rounded-8 object-cover" src="/images/profile1.jpg" />
         <w-badge v-for="position in badgePositions" :key="position" variant="price" :position="position">position: {{ position }}</w-badge>
       </div>
     </div>

docs/components/icons/elements.md

@@ -27,7 +27,7 @@ Here's an example that sets the width and height of an icon:
 
 ### Colors
 The color of the icon will default to `currentColor`.
-Colors can be changed using [semantic color classes for icons](../../foundations/styling/web/icon-color#icon-color).
+Colors can be changed using [semantic color classes for icons](../../foundations/css-classes/icon-color#icon-color).
 
 ### Fabric to WARP
 We have changed the naming for these icons, so the old icons in Fabric were `f-icon-bag16` while the new icons in WARP is named as `w-icon-bag-16`

docs/components/icons/react.md

@@ -17,4 +17,4 @@ Check out exact imports in the [Examples](#examples) section.
 
 ### Colors
 The color of the icon will default to `currentColor`.
-Colors can be changed using [semantic color classes for icons](../../foundations/styling/web/icon-color#icon-color).
+Colors can be changed using [semantic color classes for icons](../../foundations/css-classes/icon-color#icon-color).

docs/components/icons/vue.md

@@ -17,4 +17,4 @@ Check out exact imports in the [Examples](#examples) section.
 
 ### Colors
 The color of the icon will default to `currentColor`. 
-Colors can be changed using [semantic color classes for icons](../../foundations/styling/web/icon-color#icon-color).
+Colors can be changed using [semantic color classes for icons](../../foundations/css-classes/icon-color#icon-color).

docs/components/spinner/index.md

@@ -12,7 +12,7 @@
 <components-status v-bind="mapFrameworkStatuses(data.frameworks)" />
 
 ::: warning iOS only
-For the web implementation of a "spinner", see [CSS - Animation - Spinner](../../foundations/styling/web/animation#spinner).
+For the web implementation of a "spinner", see [CSS - Animation - Spinner](../../foundations/css-classes/animation#spinner).
 :::
 
 ## Example

docs/components/utilities/Example.vue

@@ -10,7 +10,7 @@
   <div class="component">
     <h3 class="t4">Usage of w-clickable in Card</h3>
     <w-card :selected="selected" class="overflow-hidden mb-32">
-      <img class="h-128 w-full object-cover rounded-tl-16" src="/css/office-warping.png" />
+      <img class="h-128 w-full object-cover rounded-tl-16" src="/images/office-warping.png" />
       <w-badge position="top-left">Ukens bolig</w-badge>
       <div class="p-16">
         <p class="text-12">DNB Eiendom</p>

docs/foundations/styling/web/aspect-ratio.md → docs/foundations/css-classes/aspect-ratio.md

@@ -37,7 +37,7 @@ Use the aspect-{ratio} utilities to set the desired aspect ratio of an element.
 <width-controller>
   <example-container>
     <div class="flex justify-center aspect-2/1 rounded relative overflow-hidden">
-      <img src="/css/50s-scientists.jpg" class="object-cover" alt="AI generated picture of 1950s scientists working on a warp drive" />
+      <img src="/images/50s-scientists.jpg" class="object-cover" alt="AI generated picture of 1950s scientists working on a warp drive" />
     </div>
   </example-container>
 </width-controller>
@@ -51,7 +51,7 @@ Use the aspect-{ratio} utilities to set the desired aspect ratio of an element.
 <width-controller>
   <example-container>
     <div class="flex justify-center aspect-1/1 rounded-4">
-      <img src="/css/50s-scientists.jpg" class="object-cover" alt="AI generated picture of 1950s scientists working on a warp drive" />
+      <img src="/images/50s-scientists.jpg" class="object-cover" alt="AI generated picture of 1950s scientists working on a warp drive" />
     </div>
   </example-container>
 </width-controller>

docs/foundations/styling/web/backdrop-blur.md → docs/foundations/css-classes/backdrop-blur.md

@@ -17,43 +17,43 @@ Use the `backdrop-blur-{size}` utilities to control an element’s backdrop blur
   <div class="flex flex-wrap gap-16 justify-items-center justify-around">
     <div class="text-center">
       <strong class="ex-font-dark">backdrop-blur-none</strong>
-      <div class="p-16 bg-[url(./20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
+      <div class="p-16 bg-[url(../../images/20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
         <div class="backdrop-blur-none border pd-border-white absolute inset-16 rounded-8"></div>
       </div>
     </div>
     <div class="text-center">
       <strong class="ex-font-dark">backdrop-blur-s</strong>
-      <div class="p-16 bg-[url(./20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
+      <div class="p-16 bg-[url(../../images/20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
         <div class="backdrop-blur-s border pd-border-white absolute inset-16 rounded-8"></div>
       </div>
     </div>
     <div class="text-center">
       <strong class="ex-font-dark">backdrop-blur-m</strong>
-      <div class="p-16 bg-[url(./20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
+      <div class="p-16 bg-[url(../../images/20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
         <div class="backdrop-blur-m border pd-border-white absolute inset-16 rounded-8"></div>
       </div>
     </div>
     <div class="text-center">
       <strong class="ex-font-dark">backdrop-blur-l</strong>
-      <div class="p-16 bg-[url(./20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
+      <div class="p-16 bg-[url(../../images/20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
         <div class="backdrop-blur-l border pd-border-white absolute inset-16 rounded-8"></div>
       </div>
     </div>
     <div class="text-center">
       <strong class="ex-font-dark">backdrop-blur-xl</strong>
-      <div class="p-16 bg-[url(./20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
+      <div class="p-16 bg-[url(../../images/20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
         <div class="backdrop-blur-xl border pd-border-white absolute inset-16 rounded-8"></div>
       </div>
     </div>
     <div class="text-center">
       <strong class="ex-font-dark">backdrop-blur-xxl</strong>
-      <div class="p-16 bg-[url(./20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
+      <div class="p-16 bg-[url(../../images/20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
         <div class="backdrop-blur-xxl border pd-border-white absolute inset-16 rounded-8"></div>
       </div>
     </div>
     <div class="text-center">
       <strong class="ex-font-dark">backdrop-blur-xxxl</strong>
-      <div class="p-16 bg-[url(./20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
+      <div class="p-16 bg-[url(../../images/20s-scientists.jpg)] bg-contain w-144 h-144 mx-auto mt-8 relative rounded-8 shadow-m">
         <div class="backdrop-blur-xxxl border pd-border-white absolute inset-16 rounded-8"></div>
       </div>
     </div>

docs/foundations/styling/web/background-attachment.md → docs/foundations/css-classes/background-attachment.md

@@ -13,7 +13,7 @@ Utilities for controlling how a background image behaves when scrolling.
 ### Fixed
 Use `bg-fixed` to fix the background image relative to the viewport.
 
-<example-container class="bg-fixed bg-[url(./office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
+<example-container class="bg-fixed bg-[url(../../images/office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
   <div class="s-bg/80 ex-inner-box s-text max-w-[400]">
     <h3>The science</h3>
     <p class="pd-text-sm">March 9th, 2023 · 14 min read</p>
@@ -29,7 +29,7 @@ Use `bg-fixed` to fix the background image relative to the viewport.
 ### Local
 Use `bg-local` to scroll the background image with the container and the viewport.
 
-<example-container class="bg-local bg-[url(./office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
+<example-container class="bg-local bg-[url(../../images/office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
   <div class="s-bg/80 ex-inner-box s-text max-w-[400]">
     <h3>The science</h3>
     <p class="pd-text-sm">March 9th, 2023 · 14 min read</p>
@@ -45,7 +45,7 @@ Use `bg-local` to scroll the background image with the container and the viewpor
 ### Scroll
 Use `bg-scroll` to scroll the background image with the viewport, but not with the container.
 
-<example-container class="bg-scroll bg-[url(./office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
+<example-container class="bg-scroll bg-[url(../../images/office-warping.png)] overflow-hidden h-[240] overflow-y-scroll overscroll-contain">
   <div class="s-bg/80 ex-inner-box s-text max-w-[400]">
     <h3>The science</h3>
     <p class="pd-text-sm">March 9th, 2023 · 14 min read</p>

docs/foundations/styling/web/background-clip.md → docs/foundations/css-classes/background-clip.md

@@ -41,7 +41,7 @@ Use `bg-clip-text` to crop an element’s background to match the shape of the t
 
 <example-container>
   <div class="text-xxxl font-bold text-center">
-    <span class="bg-clip-text bg-cover text-transparent bg-[url(./office-warping.png)]">
+    <span class="bg-clip-text bg-cover text-transparent bg-[url(../../images/office-warping.png)]">
       Warp speed
     </span>
   </div>

docs/foundations/styling/web/background-color.md → docs/foundations/css-classes/background-color.md

@@ -52,7 +52,7 @@ This works for both semantic and arbitrary classes with any primitive `--w-{colo
 Please be advised that by using primitive variables you will lose theming possibilities, therefore we highly recommend only using semantic classes and tokens.
 :::
 
-<example-container class="bg-center bg-[url(./50s-scientists.jpg)]">
+<example-container class="bg-center bg-[url(../../images/50s-scientists.jpg)]">
   <div class="grid grid-cols-4 gap-16 justify-items-center">
     <div class="s-bg/20 hover:s-bg/100 border h-80 w-80 rounded-16 backdrop-blur-s transition-colors ease-in-out duration-700"></div>
     <div class="s-bg-primary/50 hover:s-bg-primary/100 h-80 w-80 rounded-16 backdrop-blur-s transition-colors ease-in-out duration-700"></div>

docs/foundations/styling/web/background-image.md → docs/foundations/css-classes/background-image.md

@@ -15,7 +15,7 @@ Utilities for controlling an element's background image.
 ### Arbitrary values
 If you need to use a one-off `background-image` value, use square brackets to generate a property on the fly using any url.
 
-<example-container class="h-144 bg-cover bg-center bg-no-repeat bg-[url(./20s-scientists.jpg)]">
+<example-container class="h-144 bg-cover bg-center bg-no-repeat bg-[url(../../images/20s-scientists.jpg)]">
 </example-container>
 
 ```html

docs/foundations/styling/web/background-origin.md → docs/foundations/css-classes/background-origin.md

@@ -17,15 +17,15 @@ Use `bg-origin-border`, `bg-origin-padding` and `bg-origin-content` to control w
   <div class="grid sm:grid-cols-3 gap-24 sm:justify-around">
     <div class="flex flex-col justify-self-center place-items-center">
       <h4 class="pd-font-mono">bg-origin-border</h4>
-      <div class="bg-origin-border bg-no-repeat w-128 h-128 p-16 rounded-8 pd-shadow-lg border-8 pd-border-white/50 border-dashed bg-[url(./50s-scientists_240.jpg)]"><span class="sr-only">Visual example of <code>bg-origin-border</code></span></div>
+      <div class="bg-origin-border bg-no-repeat w-128 h-128 p-16 rounded-8 pd-shadow-lg border-8 pd-border-white/50 border-dashed bg-[url(../../images/50s-scientists_240.jpg)]"><span class="sr-only">Visual example of <code>bg-origin-border</code></span></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <h4 class="pd-font-mono">bg-origin-padding</h4>
-      <div class="bg-origin-padding bg-no-repeat w-128 h-128 p-16 rounded-8 pd-shadow-lg border-8 pd-border-indigo-500/50 border-dashed bg-[url(./50s-scientists_240.jpg)]"><span class="sr-only">Visual example of <code>bg-origin-padding</code></span></div>
+      <div class="bg-origin-padding bg-no-repeat w-128 h-128 p-16 rounded-8 pd-shadow-lg border-8 pd-border-indigo-500/50 border-dashed bg-[url(../../images/50s-scientists_240.jpg)]"><span class="sr-only">Visual example of <code>bg-origin-padding</code></span></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <h4 class="pd-font-mono">bg-origin-content</h4>
-      <div class="bg-origin-content bg-no-repeat w-128 h-128 p-16 pd-bg-indigo-100 rounded-8 border-8 pd-border-indigo-500/50 border-dashed bg-[url(./50s-scientists_240.jpg)]"><span class="sr-only">Visual example of <code>bg-origin-content</code></span></div>
+      <div class="bg-origin-content bg-no-repeat w-128 h-128 p-16 pd-bg-indigo-100 rounded-8 border-8 pd-border-indigo-500/50 border-dashed bg-[url(../../images/50s-scientists_240.jpg)]"><span class="sr-only">Visual example of <code>bg-origin-content</code></span></div>
     </div>
   </div>
 </example-container>

docs/foundations/styling/web/background-position.md → docs/foundations/css-classes/background-position.md

@@ -17,39 +17,39 @@ Use the `bg-{side}` utilities to control the position of an element’s backgrou
   <div class="grid sm:grid-cols-3 gap-24 sm:justify-around">
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-left-top</div>
-      <div class="h-128 w-128 rounded-8 bg-top-left bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-top-left bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-top</div>
-      <div class="h-128 w-128 rounded-8 bg-top bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-top bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-right-top</div>
-      <div class="h-128 w-128 rounded-8 bg-top-right bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-top-right bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-left</div>
-      <div class="h-128 w-128 rounded-8 bg-left bg-auto bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-left bg-auto bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-center</div>
-      <div class="h-128 w-128 rounded-8 bg-center bg-auto bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-center bg-auto bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-right</div>
-      <div class="h-128 w-128 rounded-8 bg-right bg-auto bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-right bg-auto bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-left-bottom</div>
-      <div class="h-128 w-128 rounded-8 bg-left-bottom bg-auto bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-left-bottom bg-auto bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-bottom</div>
-      <div class="h-128 w-128 rounded-8 bg-bottom bg-auto bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-bottom bg-auto bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
     <div class="flex flex-col justify-self-center place-items-center">
       <div class="pb-8 pd-font-mono">bg-right-bottom</div>
-      <div class="h-128 w-128 rounded-8 bg-right-bottom bg-auto bg-[url(./50s-scientists.jpg)]" style="background-size:300%"></div>
+      <div class="h-128 w-128 rounded-8 bg-right-bottom bg-auto bg-[url(../../images/50s-scientists.jpg)]" style="background-size:300%"></div>
     </div>
   </div>
 </example-container>

docs/foundations/styling/web/background-repeat.md → docs/foundations/css-classes/background-repeat.md

@@ -14,7 +14,7 @@ Utilities for controlling the repetition of an element's background image.
 Use `bg-repeat` to repeat the background image both vertically and horizontally.
 
 <example-container class="p-0! overflow-hidden">
-<div class="h-[200] bg-repeat bg-[url(./repeatable.png)]" style="background-size:20%"></div>
+<div class="h-[200] bg-repeat bg-[url(../../images/repeatable.png)]" style="background-size:20%"></div>
 </example-container>
 
 ```html
@@ -25,7 +25,7 @@ Use `bg-repeat` to repeat the background image both vertically and horizontally.
 Use `bg-no-repeat` when you don’t want to repeat the background image.
 
 <example-container class="p-0! overflow-hidden">
-<div class="h-[200] bg-no-repeat bg-center bg-[url(./repeatable.png)]" style="background-size:20%"></div>
+<div class="h-[200] bg-no-repeat bg-center bg-[url(../../images/repeatable.png)]" style="background-size:20%"></div>
 </example-container>
 
 ```html
@@ -36,7 +36,7 @@ Use `bg-no-repeat` when you don’t want to repeat the background image.
 Use `bg-repeat-x` to repeat the background image only horizontally.
 
 <example-container class="p-0! overflow-hidden">
-<div class="h-[200] bg-repeat-x bg-center bg-[url(./repeatable.png)]" style="background-size:20%"></div>
+<div class="h-[200] bg-repeat-x bg-center bg-[url(../../images/repeatable.png)]" style="background-size:20%"></div>
 </example-container>
 
 ```html
@@ -47,7 +47,7 @@ Use `bg-repeat-x` to repeat the background image only horizontally.
 Use `bg-repeat-y` to repeat the background image only vertically.
 
 <example-container class="p-0! overflow-hidden">
-<div class="h-[200] bg-repeat-y bg-center rounded-8 bg-[url(./repeatable.png)]" style="background-size:20%"></div>
+<div class="h-[200] bg-repeat-y bg-center rounded-8 bg-[url(../../images/repeatable.png)]" style="background-size:20%"></div>
 </example-container>
 
 ```html

docs/foundations/styling/web/background-size.md → docs/foundations/css-classes/background-size.md

@@ -15,7 +15,7 @@ Utilities for controlling the background size of an element's background image.
 Use `bg-auto` to display the background image at its default size.
 
 <example-container class="p-0! overflow-hidden ex-bg--striped">
-  <div class="h-144 bg-auto bg-center bg-no-repeat bg-[url(./20s-scientists.jpg)]"></div>
+  <div class="h-144 bg-auto bg-center bg-no-repeat bg-[url(../../images/20s-scientists.jpg)]"></div>
 </example-container>
 
 ```html
@@ -26,7 +26,7 @@ Use `bg-auto` to display the background image at its default size.
 Use `bg-cover` to scale the background image until it fills the background layer.
 
 <example-container class="p-0! overflow-hidden ex-bg--striped">
-  <div class="h-144 bg-cover bg-center bg-no-repeat bg-[url(./20s-scientists.jpg)]"></div>
+  <div class="h-144 bg-cover bg-center bg-no-repeat bg-[url(../../images/20s-scientists.jpg)]"></div>
 </example-container>
 
 ```html
@@ -37,7 +37,7 @@ Use `bg-cover` to scale the background image until it fills the background layer
 Use `bg-contain` to scale the background image to the outer edges without cropping or stretching.
 
 <example-container class="p-0! overflow-hidden ex-bg--striped">
-  <div class="h-144 bg-auto bg-contain bg-no-repeat bg-[url(./20s-scientists.jpg)]"></div>
+  <div class="h-144 bg-auto bg-contain bg-no-repeat bg-[url(../../images/20s-scientists.jpg)]"></div>
 </example-container>
 
 ```html