Merge branch 'main' into chore/move-tokens-builder

digdir · Apr 11, 2024 · 55d19ea · 55d19ea
2 parents b9786aa + b40f95b
commit 55d19ea
Show file tree

Hide file tree

Showing 54 changed files with 5,942 additions and 5,708 deletions.
diff --git a/apps/storefront/layouts/PageLayout/PageLayout.module.css b/apps/storefront/layouts/PageLayout/PageLayout.module.css
@@ -54,4 +54,18 @@
   .content {
     padding: 0;
   }
+
+  .title {
+    text-align: left;
+  }
+
+  .meta {
+    flex-direction: column;
+    text-align: left;
+    gap: var(--fds-spacing-1);
+  }
+
+  .separator {
+    display: none;
+  }
 }
diff --git a/packages/css/alert.css b/packages/css/alert.css
@@ -1,52 +1,54 @@
-.fds-alert {
-  --fds-alert-border: var(--fds-semantic-border-info-default);
-  --fds-alert-border-left: 8px 0 0 0 var(--fds-alert-border) inset;
-  --fds-alert-color: var(--fds-semantic-text-neutral-default);
-  --fds-alert-icon-color: var(--fds-alert-border);
-  --fds-alert-icon-size: var(--fds-sizing-7);
-  --fds-alert-background: var(--fds-semantic-surface-info-subtle);
-
-  box-shadow: var(--fds-alert-border-left);
-  background: var(--fds-alert-background);
-  color: var(--fds-alert-color);
-  padding: var(--fds-spacing-4);
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: min-content auto;
-  gap: var(--fds-spacing-2);
-}
-
-.fds-alert__icon {
-  height: var(--fds-alert-icon-size);
-  width: var(--fds-alert-icon-size);
-  color: var(--fds-alert-icon-color);
-}
-
-.fds-alert__content {
-  display: flex;
-  flex-direction: column;
-}
-
-.fds-alert--info {
-  --fds-alert-border: var(--fds-semantic-border-info-default);
-  --fds-alert-background: var(--fds-semantic-surface-info-subtle);
-}
-
-.fds-alert--warning {
-  --fds-alert-border: var(--fds-semantic-border-warning-default);
-  --fds-alert-background: var(--fds-semantic-surface-warning-subtle);
-}
-
-.fds-alert--success {
-  --fds-alert-border: var(--fds-semantic-border-success-default);
-  --fds-alert-background: var(--fds-semantic-surface-success-subtle);
-}
-
-.fds-alert--danger {
-  --fds-alert-border: var(--fds-semantic-border-danger-default);
-  --fds-alert-background: var(--fds-semantic-surface-danger-subtle);
-}
-
-.fds-alert--elevated {
-  box-shadow: var(--fds-alert-border-left), var(--fds-shadow-small);
+@layer fds.alert {
+  .fds-alert {
+    --fds-alert-border: var(--fds-semantic-border-info-default);
+    --fds-alert-border-left: 8px 0 0 0 var(--fds-alert-border) inset;
+    --fds-alert-color: var(--fds-semantic-text-neutral-default);
+    --fds-alert-icon-color: var(--fds-alert-border);
+    --fds-alert-icon-size: var(--fds-sizing-7);
+    --fds-alert-background: var(--fds-semantic-surface-info-subtle);
+
+    box-shadow: var(--fds-alert-border-left);
+    background: var(--fds-alert-background);
+    color: var(--fds-alert-color);
+    padding: var(--fds-spacing-4);
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: min-content auto;
+    gap: var(--fds-spacing-2);
+  }
+
+  .fds-alert__icon {
+    height: var(--fds-alert-icon-size);
+    width: var(--fds-alert-icon-size);
+    color: var(--fds-alert-icon-color);
+  }
+
+  .fds-alert__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .fds-alert--info {
+    --fds-alert-border: var(--fds-semantic-border-info-default);
+    --fds-alert-background: var(--fds-semantic-surface-info-subtle);
+  }
+
+  .fds-alert--warning {
+    --fds-alert-border: var(--fds-semantic-border-warning-default);
+    --fds-alert-background: var(--fds-semantic-surface-warning-subtle);
+  }
+
+  .fds-alert--success {
+    --fds-alert-border: var(--fds-semantic-border-success-default);
+    --fds-alert-background: var(--fds-semantic-surface-success-subtle);
+  }
+
+  .fds-alert--danger {
+    --fds-alert-border: var(--fds-semantic-border-danger-default);
+    --fds-alert-background: var(--fds-semantic-surface-danger-subtle);
+  }
+
+  .fds-alert--elevated {
+    box-shadow: var(--fds-alert-border-left), var(--fds-shadow-small);
+  }
 }