@semanticus/semanticus-css 2.2.0 → 3.1.0

package/src/variants/modifiers/_ghost.css

@@ -1,164 +1,64 @@
 .ghost {
-  --color-background: transparent;
-
-  background-color: var(--color-background);
-}
-
-:not([role="link"], a:not([role="button"])) {
-  &.ghost {
-    &.primary {
-      --color-background: transparent;
-      --border-color: oklch(from var(--color-primary-fill) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-primary-text) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-    }
-
-    &.secondary {
-      --color-background: transparent;
-      --border-color: oklch(from var(--color-secondary-fill) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-secondary-text) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-    }
-
-    &.contrast {
-      --color-background: transparent;
-      --border-color: oklch(from var(--color-contrast-fill) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-contrast-text) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-    }
-
-    &.success {
-      --color-background: transparent;
-      --border-color: oklch(from var(--color-success-fill) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-success-text) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-    }
-
-    &.info {
-      --color-background: transparent;
-      --border-color: oklch(from var(--color-info-fill) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-info-text) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-    }
-
-    &.warning {
-      --color-background: transparent;
-      --border-color: oklch(from var(--color-warning-fill) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-warning-text) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-    }
-
-    &.danger {
-      --color-background: transparent;
-      --border-color: oklch(from var(--color-danger-fill) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-danger-text) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
+  /* --- Buttons Individual Styling --- */
+  --_buttons-color: var(--intent-color, var(--buttons-color));
+  --_buttons-border-color: var(--intent-background-color);
+  --_buttons-background-color: transparent;
+  --_buttons-color-hover: var(--buttons-color);
+
+  /* --- Alert Individual Styling --- */
+  --_alert-color: var(--intent-color, var(--alert-color));
+  --_alert-border-color: var(--intent-background-color, var(--border-color));
+  --_alert-background-color: transparent;
+
+  /* --- Card Individual Styling --- */
+  --_card-color: var(--intent-color, var(--card-color));
+  --_card-background-color: transparent;
+  --_card-border-color: var(--intent-background-color, var(--border-color));
+  --_card-marginals-background-color: var(--card-marginals-background-color);
+
+  /* --- Pane Individual Styling --- */
+  --_pane-color: var(--intent-color, var(--pane-color));
+  --_pane-background-color: transparent;
+  --_pane-border-color: var(--intent-background-color, var(--border-color));
+  --_pane-border-width: var(--border-width);
+
+  /* When .ghost is used in an element that has no intent */
+  &:not(.primary, .secondary, .contrast, .success, .info, .warning, .danger) {
+    --_buttons-color: var(--primary-color);
+    --_buttons-border-color: var(--primary-background-color);
+
+    &[type="reset"] {
+      --_buttons-color: var(--secondary-color);
+      --_buttons-border-color: var(--secondary-background-color);
     }
   }
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]) {
-  &.ghost {
-    --color-background: transparent;
-    --border-color: oklch(from var(--color-primary-fill) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-primary-text) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-background: oklch(from var(--color-primary-fill-hover) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-primary-fill-hover) l c h / var(--color-border-opacity));
-      --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-    }
-
-    &.secondary {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-background: oklch(from var(--color-secondary-fill-hover) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-secondary-fill-hover) l c h / var(--color-border-opacity));
-        --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
-        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      }
-    }
-
-    &.contrast {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-background: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-contrast-fill-hover) l c h / var(--color-border-opacity));
-        --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
-        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      }
-    }
 
-    &.success {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-background: oklch(from var(--color-success-fill-hover) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-success-fill-hover) l c h / var(--color-border-opacity));
-        --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
-        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      }
-    }
+  &.contrast {
+    --_buttons-color-hover: light-dark(#fff, #191c20);
+  }
 
-    &.info {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-background: oklch(from var(--color-info-fill-hover) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-info-fill-hover) l c h / var(--color-border-opacity));
-        --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
-        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      }
+  &:is(
+      button,
+      [type="submit"],
+      [type="reset"],
+      [type="button"],
+      [type="file"]::file-selector-button,
+      [role="button"]
+    )[aria-busy="true"] {
+    &:before {
+      filter: none;
     }
+  }
 
-    &.warning {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-background: oklch(from var(--color-warning-fill-hover) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-warning-fill-hover) l c h / var(--color-border-opacity));
-        --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
-        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-        details &::after {
-          filter: brightness(0);
-        }
-      }
+  /* Accordion - ghost buttons have transparent backgrounds with colored text,
+     so the chevron should remain dark to match the text color */
+  details &:is(summary[role="button"]) {
+    &::after {
+      filter: none;
     }
 
-    &.danger {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-background: oklch(from var(--color-danger-fill-hover) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-danger-fill-hover) l c h / var(--color-border-opacity));
-        --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
-        --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      }
+    &:is(:hover, :active, :focus):not(.contrast)::after {
+      filter: brightness(0) invert();
     }
   }
 }
-
-:is(.card, .pane, [role="status"], [role="alert"]).ghost {
-  > header,
-  > footer {
-    --dialog-section-fill: light-dark(
-      color-mix(in srgb, var(--color-slate-50) 25%, white),
-      color-mix(in srgb, var(--color-slate-50), transparent 95%)
-    );
-    --dialog-section-border: color-mix(in srgb, light-dark(var(--color-slate-900), var(--color-zinc-350)), transparent 90%);
-  }
-}
-
-/* Reset buttons */
-[type="reset"].ghost {
-  --color-background: transparent;
-  --border-color: oklch(from var(--color-secondary-fill) l c h / var(--color-border-opacity));
-  --color-text: oklch(from var(--color-secondary-text) l c h / var(--color-text-opacity));
-  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-    --color-background: oklch(from var(--color-primary-fill-hover) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-primary-fill-hover) l c h / var(--color-border-opacity));
-    --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-  }
-}
-
-/* Accordion - ghost buttons have transparent backgrounds with colored text,
-   so the chevron should remain dark to match the text color */
-details summary[role="button"].ghost::after {
-  filter: none;
-}

package/src/variants/modifiers/_striped.css

@@ -1,9 +1,10 @@
 .striped {
-  > :not(table):nth-child(odd) {
+  /* Cards */
+  &:is(.card) > :nth-child(odd) {
     background-color: color-mix(
       in srgb,
-      var(--color-background),
-      var(--color-hover-effect) 15%
+      var(--_card-background-color),
+      var(--color-hover-shade) 15%
     );
   }
 
@@ -11,8 +12,8 @@
     & :is(th, td) {
       background-color: color-mix(
         in srgb,
-        var(--color-background),
-        var(--color-hover-effect) 15%
+        var(--background-color),
+        var(--color-hover-shade) 15%
       );
     }
   }

package/src/variants/modifiers/_subtle.css

@@ -1,133 +1,75 @@
 .subtle {
-  --subtle-opacity: 60%;
-}
-
-:not([role="link"], a:not([role="button"])) {
-  &.subtle {
-    &.primary {
-      --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      --color-background: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-border-opacity));
+  /* When .subtle is used in an element that has no intent */
+  &:not(.primary, .secondary, .contrast, .success, .info, .warning, .danger) {
+    --_buttons-background-color: var(--primary-subtle-background-color);
+    --_buttons-background-color-hover: var(--primary-background-color);
+
+    &[type="reset"] {
+      --_buttons-background-color: var(--secondary-subtle-background-color);
+      --_buttons-background-color-hover: var(--secondary-background-color);
+      --_buttons-color: light-dark(#191c20, white);
     }
 
-    &.secondary {
-      --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      --color-background: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-secondary-subtle-fill) l c h / var(--color-border-opacity));
-    }
-
-    &.contrast {
-      --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      --color-background: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-contrast-subtle-fill) l c h / var(--color-border-opacity));
-    }
+    --_links-color: var(--primary-subtle-background-color);
+    --_links-color-hover: var(--primary-background-color);
 
-    &.success {
-      --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      --color-background: oklch(from var(--color-success-subtle-fill) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-success-subtle-fill) l c h / var(--color-border-opacity));
-    }
+    --_progress-accent-color: var(--primary-subtle-background-color);
+  }
 
-    &.info {
-      --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      --color-background: oklch(from var(--color-info-subtle-fill) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-info-subtle-fill) l c h / var(--color-border-opacity));
-    }
+  &.primary {
+    --intent-background-color: var(--primary-subtle-background-color);
+    --intent-background-color-hover: var(--primary-background-color);
+  }
 
-    &.warning {
-      --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      --color-background: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-warning-subtle-fill) l c h / var(--color-border-opacity));
-    }
+  &.secondary {
+    --intent-background-color: var(--secondary-subtle-background-color);
+    --intent-background-color-hover: var(--secondary-background-color);
 
-    &.danger {
-      --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
-      --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-      --color-background: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-danger-subtle-fill) l c h / var(--color-border-opacity));
-    }
+    /* Readability adjustments */
+    --_alert-color: light-dark(#191c20, white);
+    --_card-color: light-dark(#191c20, white);
+    --_pane-color: light-dark(#191c20, white);
+    --_buttons-color: light-dark(#191c20, white);
+    --_buttons-color-hover: white;
   }
-}
 
-:is(button, [type="submit"], [type="button"], [role="button"]) {
-  &.subtle {
-    --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
-    --color-background: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-background-opacity));
-    --border-color: oklch(from var(--color-primary-subtle-fill) l c h / var(--color-border-opacity));
-    --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: oklch(from var(--color-primary-on-fill) l c h / var(--color-text-opacity));
-      --color-background: oklch(from var(--color-primary-fill) l c h / var(--color-background-opacity));
-      --border-color: oklch(from var(--color-primary-fill) l c h / var(--color-border-opacity));
-    }
+  &.contrast {
+    --intent-background-color: var(--contrast-subtle-background-color);
+    --intent-background-color-hover: var(--contrast-background-color);
+  }
 
-    &.secondary {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-text: oklch(from var(--color-secondary-on-fill) l c h / var(--color-text-opacity));
-        --color-background: oklch(from var(--color-secondary-fill) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-secondary-fill) l c h / var(--color-border-opacity));
-      }
-    }
+  &.success {
+    --intent-background-color: var(--success-subtle-background-color);
+    --intent-background-color-hover: var(--success-background-color);
+  }
 
-    &.contrast {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-text: oklch(from var(--color-contrast-on-fill) l c h / var(--color-text-opacity));
-        --color-background: oklch(from var(--color-contrast-fill) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-contrast-fill) l c h / var(--color-border-opacity));
-      }
-    }
+  &.info {
+    --intent-background-color: var(--info-subtle-background-color);
+    --intent-background-color-hover: var(--info-background-color);
+  }
 
-    &.success {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-text: oklch(from var(--color-success-on-fill) l c h / var(--color-text-opacity));
-        --color-background: oklch(from var(--color-success-fill) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-success-fill) l c h / var(--color-border-opacity));
-      }
-    }
+  &.warning {
+    --intent-background-color: var(--warning-subtle-background-color);
+    --intent-background-color-hover: var(--warning-background-color);
+  }
 
-    &.info {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-text: oklch(from var(--color-info-on-fill) l c h / var(--color-text-opacity));
-        --color-background: oklch(from var(--color-info-fill) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-info-fill) l c h / var(--color-border-opacity));
-      }
-    }
+  &.danger {
+    --intent-background-color: var(--danger-subtle-background-color);
+    --intent-background-color-hover: var(--danger-background-color);
+  }
+}
 
-    &.warning {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-text: oklch(from var(--color-warning-on-fill) l c h / var(--color-text-opacity));
-        --color-background: oklch(from var(--color-warning-fill) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-warning-fill) l c h / var(--color-border-opacity));
-      }
+/* Accordion chevron override */
+details summary[role="button"].subtle.secondary {
+  @container style(--theme: light) {
+    &::after {
+      filter: brightness(0);
     }
 
-    &.danger {
-      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-        --color-text: oklch(from var(--color-danger-on-fill) l c h / var(--color-text-opacity));
-        --color-background: oklch(from var(--color-danger-fill) l c h / var(--color-background-opacity));
-        --border-color: oklch(from var(--color-danger-fill) l c h / var(--color-border-opacity));
+    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+      &::after {
+        filter: brightness(0) invert(1);
       }
     }
   }
 }
-
-/* Reset buttons */
-[type="reset"].subtle {
-  --color-text: var(--color-secondary-on-fill);
-  --color-background: var(--color-secondary-subtle-fill);
-  --border-color: var(--color-secondary-subtle-fill);
-  --color-text-muted: color-mix(in srgb, var(--color-text), transparent 40%);
-
-  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-    --color-text: var(--color-secondary-on-fill);
-    --color-background: var(--color-secondary-fill);
-    --border-color: var(--color-secondary-fill);
-  }
-}

package/src/variants/modules.css

@@ -1,12 +1,6 @@
 @import "./_variables.css";
 
-@import "./intent/_contrast.css";
-@import "./intent/_danger.css";
-@import "./intent/_info.css";
-@import "./intent/_primary.css";
-@import "./intent/_secondary.css";
-@import "./intent/_success.css";
-@import "./intent/_warning.css";
+@import "./_intent.css";
 
 @import "./modifiers/_ghost.css";
 @import "./modifiers/_striped.css";

package/src/semantics/attributes/_role-group.css

@@ -1,126 +0,0 @@
-[role="search"],
-[role="group"] {
-  border-radius: var(--radius);
-  box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
-  display: inline-flex;
-  gap: 0;
-  margin-bottom: var(--spacing);
-  position: relative;
-  transition: box-shadow var(--transition);
-  vertical-align: middle;
-  width: 100%;
-
-  & > *:not(details),
-  & input:not([type="checkbox"], [type="radio"]),
-  & select {
-    position: relative;
-    flex: 1 1 auto;
-    margin-bottom: 0;
-
-    &:not(:first-child) {
-      /* when a button is next to an input that has a border */
-      margin-left: calc(var(--border-size) * -1);
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:focus {
-      z-index: 2;
-    }
-  }
-
-  & button,
-  & [type="submit"],
-  & [type="reset"],
-  & [type="button"],
-  & [role="button"] {
-    width: auto;
-  }
-
-  /* Details dropdown inside group */
-  & > details {
-    position: relative;
-    margin-bottom: 0;
-    /* Constrain details height to just the button, not the dropdown menu */
-    height: calc(
-        1rem * var(--line-height) + var(--input-spacing-vertical) *
-            2 + var(--border-size) * 2
-    );
-    overflow: visible;
-
-    &:not(:first-child) {
-      margin-left: calc(var(--border-size) * -1);
-
-      & > summary {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    &:not(:last-child) > summary {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    & > summary:focus {
-      z-index: 2;
-    }
-
-    /* Ensure consistent height with other form elements in the group */
-    & > summary[role="button"] {
-      display: flex;
-      align-items: center;
-      height: 100%;
-
-      &::after {
-        height: calc(1rem * var(--line-height, 1.5));
-      }
-    }
-  }
-}
-
-@supports selector(:has(*)) {
-  [role="search"],
-  [role="group"] {
-    &:has(
-      button:focus,
-      [type="submit"]:focus,
-      [type="button"]:focus,
-      [role="button"]:focus
-    ) {
-      --group-shadow: var(--group-shadow-focus-button);
-
-      & input:not([type="checkbox"], [type="radio"]),
-      & select {
-        border-color: transparent;
-      }
-    }
-
-    &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
-      --group-shadow: var(--group-shadow-focus-input);
-
-      & button,
-      & [type="submit"],
-      & [type="button"],
-      & [role="button"] {
-        --button-shadow: 0 0 0 var(--border-size)
-            var(--color-primary-fill);
-        --button-shadow-hover: 0 0 0 var(--border-size)
-            var(--color-primary-fill-hover);
-      }
-    }
-
-    & button:focus,
-    & [type="submit"]:focus,
-    & [type="reset"]:focus,
-    & [type="button"]:focus,
-    & [role="button"]:focus {
-      box-shadow: none;
-    }
-  }
-}

package/src/semantics/attributes/_role-search.css

@@ -1,14 +0,0 @@
-/* [role="search"] shares most of its styles with [role="group"] */
-/* See _role-group.css for the shared styles */
-
-[role="search"] {
-  & > :first-child {
-    border-top-left-radius: 5rem;
-    border-bottom-left-radius: 5rem;
-  }
-
-  & > :last-child {
-    border-top-right-radius: 5rem;
-    border-bottom-right-radius: 5rem;
-  }
-}

package/src/semantics/elements/_article.css

@@ -1,3 +0,0 @@
-article {
-  width: 100%;
-}