Alain Afflelou Design System

Shadows 

<div class="text-2xl">Drop Shadows</div>
<div class="flex gap-2 justify-center">
    <div class="flex flex-col items-center">
        <div>Small</div>
        <div class="rounded-lg w-32 h-32 shadow-sm"></div>
    </div>
    <div class="flex flex-col items-center">
        <div>Base</div>
        <div class="rounded-lg w-32 h-32 shadow-base"></div>
    </div>
    <div class="flex flex-col items-center">
        <div>Medium</div>
        <div class="rounded-lg w-32 h-32 shadow-md"></div>
    </div>
    <div class="flex flex-col items-center">
        <div>Large</div>
        <div class="rounded-lg w-32 h-32 shadow-lg"></div>
    </div>
    <div class="flex flex-col items-center">
        <div>Extra Large</div>
        <div class="rounded-lg w-32 h-32 shadow-xl"></div>
    </div>
    <div class="flex flex-col items-center">
        <div>Double Extra Large</div>
        <div class="rounded-lg w-32 h-32 shadow-2xl"></div>
    </div>
</div>

<div class="text-2xl mt-10">Inner Shadows</div>
<div class="flex gap-2 justify-center">
    <div class="flex flex-col items-center">
        <div class="">Small</div>
        <div class="rounded-lg w-32 h-32 shadow-inner-sm"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">Medium</div>
        <div class="rounded-lg w-32 h-32 shadow-inner-md"></div>
    </div>
    <div class="flex flex-col items-center">
        <div class="">Large</div>
        <div class="rounded-lg w-32 h-32 shadow-inner-lg"></div>
    </div>
</div>
 
<div class="text-2xl">Drop Shadows</div>
<div class="flex gap-2 justify-center">
    {% for dropShadow in dropShadows %}
        <div class="flex flex-col items-center">
            <div>{{ dropShadow.label }}</div>
            <div class="rounded-lg w-32 h-32 {{ dropShadow.class }}"></div>
        </div>
    {% endfor %}
</div>

<div class="text-2xl mt-10">Inner Shadows</div>
<div class="flex gap-2 justify-center">
    {% for innerShadow in innerShadows %}
        <div class="flex flex-col items-center">
            <div class="">{{ innerShadow.label }}</div>
            <div class="rounded-lg w-32 h-32 {{ innerShadow.class }}"></div>
        </div>
    {% endfor %}
</div>
 
{
  "dropShadows": [
    {
      "label": "Small",
      "class": "shadow-sm"
    },
    {
      "label": "Base",
      "class": "shadow-base"
    },
    {
      "label": "Medium",
      "class": "shadow-md"
    },
    {
      "label": "Large",
      "class": "shadow-lg"
    },
    {
      "label": "Extra Large",
      "class": "shadow-xl"
    },
    {
      "label": "Double Extra Large",
      "class": "shadow-2xl"
    }
  ],
  "innerShadows": [
    {
      "label": "Small",
      "class": "shadow-inner-sm"
    },
    {
      "label": "Medium",
      "class": "shadow-inner-md"
    },
    {
      "label": "Large",
      "class": "shadow-inner-lg"
    }
  ],
  "blurs": [
    {
      "label": "Background blur xl / 24px",
      "class": "backdrop-blur-xl"
    },
    {
      "label": "Background blur 2xl / 40px",
      "class": "backdrop-blur-2xl"
    }
  ],
  "statuses": [
    {
      "label": "Focus",
      "class": "ring ring-status-focus"
    },
    {
      "label": "Success",
      "class": "ring ring-status-success"
    },
    {
      "label": "Warning",
      "class": "ring ring-status-warning"
    },
    {
      "label": "Error",
      "class": "ring ring-status-error"
    }
  ]
}

No notes defined.