Merge pull request #26 from receter/button-warn

Button warn
receter · Dec 20, 2024 · 956b5a2 · 956b5a2
2 parents 93ffc97 + 5d8bfaf
commit 956b5a2
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 10 deletions.
diff --git a/packages/ui/README.md b/packages/ui/README.md
@@ -24,7 +24,7 @@ You can find all available custom properties here: [default-custom-properties.cs
 The component styles depend on `base.css` for CSS normalization and basic styles, and on `default-custom-properties.css` for custom property defaults. To ensure these dependencies are met, import both `base.css` and `default-custom-properties.css` in your application.
 
 All styles as well as the custom properties are inside a [CSS Layer](https://www.w3.org/TR/css-cascade-5/#layering)
-named `sys42`.
+named `sys42`. The base styles, defined in `base.css`, are inside a layer named `sys42-base`.
 
 #### Example
 

diff --git a/packages/ui/fixtures/Button.fixture.tsx b/packages/ui/fixtures/Button.fixture.tsx
@@ -15,7 +15,7 @@ export default function ButtonFixture() {
   const [label] = useValue("Label", { defaultValue: "Blick me!" });
   const [withIcon] = useValue("With icon", { defaultValue: false });
   const [variant] = useFixtureSelect("Variant", {
-    options: ["default", "primary"],
+    options: ["default", "primary", "warning"],
     defaultValue: "default",
   });
   const [size] = useFixtureSelect("Size", {
@@ -73,6 +73,18 @@ export default function ButtonFixture() {
             Primary
           </Button>
         </div>
+        <div className={classButtonGroup}>
+          <Button variant="warning" size="lg">
+            Warning
+          </Button>
+          <Button variant="warning" size="lg" disabled>
+            Warning
+          </Button>
+          <Button variant="warning">Primary</Button>
+          <Button variant="warning" disabled>
+            Warning
+          </Button>
+        </div>
       </Stack>
     </>
   );

diff --git a/packages/ui/lib/Button/styles.module.css b/packages/ui/lib/Button/styles.module.css
@@ -1,5 +1,6 @@
 .button {
   font: inherit;
+  color: var(--sys42-button-color);
   border: var(--sys42-button-border-width) solid
     var(--sys42-button-border-color);
   font-size: var(--sys42-button-font-size);
@@ -16,11 +17,6 @@
   display: inline-block;
   text-align: center;
   cursor: pointer;
-}
-
-.button,
-a.button {
-  color: var(--sys42-button-color);
   text-decoration: none;
 }
 
@@ -86,6 +82,31 @@ a.button {
   color: var(--sys42-button_primary-color--disabled);
 }
 
+.button_warning {
+  background: var(--sys42-button_warning-background);
+  border-color: var(--sys42-button_warning-border-color);
+  color: var(--sys42-button_warning-color);
+}
+
+.button_warning:hover {
+  background: var(--sys42-button_warning-background--hover);
+  border-color: var(--sys42-button_warning-border-color--hover);
+  color: var(--sys42-button_warning-color--hover);
+}
+
+.button_warning:active {
+  background: var(--sys42-button_warning-background--active);
+  border-color: var(--sys42-button_warning-border-color--active);
+  color: var(--sys42-button_warning-color--active);
+}
+
+.button_warning:disabled,
+.button_warning[aria-disabled="true"] {
+  background: var(--sys42-button_warning-background--disabled);
+  border-color: var(--sys42-button_warning-border-color--disabled);
+  color: var(--sys42-button_warning-color--disabled);
+}
+
 .button_lg {
   font-size: var(--sys42-button_lg-font-size);
   border-radius: var(--sys42-button_lg-border-radius);

diff --git a/packages/ui/lib/Button/useButton.ts b/packages/ui/lib/Button/useButton.ts
@@ -6,7 +6,7 @@ import styles from "./styles.module.css";
 
 // DOC: Props that are specific to the styled version of the button can be added at this point.
 export type ButtonProps = BaseButtonProps & {
-  variant?: "primary";
+  variant?: "primary" | "warning";
   size?: "lg";
 };
 
@@ -24,6 +24,7 @@ export function useButton<TTagName extends HTMLElementTagName>(
       draft.elementProps.className = cn(
         draft.elementProps.className,
         variant === "primary" && styles.button_primary,
+        variant === "warning" && styles.button_warning,
         size === "lg" && styles.button_lg,
         styles.button,
       );

diff --git a/packages/ui/lib/base.css b/packages/ui/lib/base.css
@@ -1,4 +1,5 @@
-/* import normalize.css install with npm*/
+/* all styles here are added to the sys42-base layer */
+/* import normalize.css install with npm */
 @import url(../node_modules/normalize.css/normalize.css);
 
 :root {

diff --git a/packages/ui/lib/default-custom-properties.css b/packages/ui/lib/default-custom-properties.css
@@ -87,6 +87,41 @@
   );
   --sys42-button_primary-color--disabled: var(--sys42-button-color--disabled);
 
+  /* Button (warning) */
+  --sys42-button_warning-background: #ba1a1a;
+  --sys42-button_warning-border-color: transparent;
+  --sys42-button_warning-color: #fff;
+  --sys42-button_warning-font-weight: normal;
+
+  /* :hover */
+  --sys42-button_warning-background--hover: color-mix(
+    in srgb,
+    #ba1a1a,
+    currentColor 8%
+  );
+  --sys42-button_warning-border-color--hover: transparent;
+  --sys42-button_warning-color--hover: var(--sys42-button_warning-color);
+
+  /* :active */
+  --sys42-button_warning-background--active: var(
+    --sys42-button_warning-background--hover
+  );
+  --sys42-button_warning-border-color--active: var(
+    --sys42-button_warning-border-color--hover
+  );
+  --sys42-button_warning-color--active: var(
+    --sys42-button_warning-color--hover
+  );
+
+  /* :disabled */
+  --sys42-button_warning-background--disabled: var(
+    --sys42-button-background--disabled
+  );
+  --sys42-button_warning-border-color--disabled: var(
+    --sys42-button-border-color--disabled
+  );
+  --sys42-button_warning-color--disabled: var(--sys42-button-color--disabled);
+
   /* Button (size: lg) */
   --sys42-button_lg-font-size: var(--sys42-button-font-size);
   --sys42-button_lg-border-radius: var(--sys42-button-border-radius);

diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
@@ -4,9 +4,13 @@ export default {
   plugins: [
     pluginAssignLayer([
       {
-        include: "lib/**/*.css",
+        include: "lib/**/*.css,!lib/**/base.css",
         layerName: "sys42",
       },
+      {
+        include: "lib/base.css",
+        layerName: "sys42-base",
+      },
     ]),
   ],
 };