fix: fix style conflicts (#43)

bloom-housing · Jun 20, 2023 · f8fd1e4 · f8fd1e4
1 parent 026a7e2
commit f8fd1e4
Show file tree

Hide file tree

Showing 55 changed files with 817 additions and 764 deletions.
diff --git a/documentation/components/Swatch.tsx b/documentation/components/Swatch.tsx
@@ -5,12 +5,12 @@ export const Swatch = (props: { color: string; border?: boolean; label?: string
     <span
       style={{
         backgroundColor: `var(--${props.color})`,
-        width: "var(--bloom-s6)",
-        borderRadius: "var(--bloom-rounded-sm)",
+        width: "var(--seeds-s6)",
+        borderRadius: "var(--seeds-rounded-sm)",
         display: "block",
         borderWidth: "1px",
         borderStyle: "solid",
-        borderColor: props.border ? "var(--bloom-color-gray-500)" : "transparent",
+        borderColor: props.border ? "var(--seeds-color-gray-500)" : "transparent",
       }}
       title={props.color}
     >

diff --git a/documentation/storybook.css b/documentation/storybook.css
@@ -1,5 +1,5 @@
 :root {
-  --link-color: #1EA7FD;
+  --link-color: #1ea7fd;
 }
 
 .sbdocs-table {
@@ -15,22 +15,22 @@
 }
 
 :is(.sbdocs-table, .docblock-argstable) {
-  font-family: var(--bloom-font-sans) !important;
-  font-size: var(--bloom-font-size-sm) !important;
-  border: 1px solid var(--bloom-border-color);
-  color: var(--bloom-text-color-darker);
+  font-family: var(--seeds-font-sans) !important;
+  font-size: var(--seeds-font-size-sm) !important;
+  border: 1px solid var(--seeds-border-color);
+  color: var(--seeds-text-color-darker);
 }
 
 :is(.sbdocs-table, .docblock-argstable) thead th {
-  font-size: var(--bloom-font-size-base);
+  font-size: var(--seeds-font-size-base);
   text-align: left;
   text-transform: uppercase;
-  color: var(--bloom-input-text-placeholder-color) !important;
-  background-color: var(--bloom-color-primary-lighter);
-  border-bottom: 1px solid var(--bloom-border-color) !important;
+  color: var(--seeds-input-text-placeholder-color) !important;
+  background-color: var(--seeds-color-primary-lighter);
+  border-bottom: 1px solid var(--seeds-border-color) !important;
   border-radius: none !important;
 }
 
 :is(.sbdocs-table, .docblock-argstable) :is(th, td) {
   border-inline: none !important;
-}
+}
diff --git a/src/blocks/Alert.scss b/src/blocks/Alert.scss
@@ -1,14 +1,14 @@
-.alert {
-  --alert-padding: var(--bloom-s4);
+.seeds-alert {
+  --alert-padding: var(--seeds-s4);
   --alert-border-radius: 0;
   --alert-border: none;
-  --alert-flex-gap: var(--bloom-s3);
+  --alert-flex-gap: var(--seeds-s3);
   --alert-icon-size: 1em;
-  --alert-max-width: var(--bloom-width-sm);
-  --alert-font: var(--bloom-font-sans);
-  --alert-font-size: var(--bloom-type-caption-size);
-  --alert-link-gap: var(--bloom-s1);
-  --alert-link-font-weight: var(--bloom-font-weight-semibold);
+  --alert-max-width: var(--seeds-width-sm);
+  --alert-font: var(--seeds-font-sans);
+  --alert-font-size: var(--seeds-type-caption-size);
+  --alert-link-gap: var(--seeds-s1);
+  --alert-link-font-weight: var(--seeds-font-weight-semibold);
 
   --common-message-padding: var(--alert-padding);
   --common-message-border-radius: var(--alert-border-radius);

diff --git a/src/blocks/Alert.tsx b/src/blocks/Alert.tsx
@@ -6,7 +6,7 @@ import "./Alert.scss"
 interface AlertProps extends Omit<CommonMessageProps, "role" | "closeable"> {}
 
 const Alert = (props: AlertProps) => {
-  const classNames = ["alert"]
+  const classNames = ["seeds-alert"]
   if (props.className) classNames.push(props.className)
 
   return <CommonMessage {...props} role="alert" closeable className={classNames.join(" ")} />

diff --git a/src/blocks/Card.scss b/src/blocks/Card.scss
@@ -1,23 +1,23 @@
-.card {
+.seeds-card {
   /* Component Variables */
-  --card-spacing-sm: var(--bloom-s4);
-  --card-spacing-md: var(--bloom-s6);
-  --card-spacing-lg: var(--bloom-s8);
-  --card-spacing-xl: var(--bloom-s12); 
+  --card-spacing-sm: var(--seeds-s4);
+  --card-spacing-md: var(--seeds-s6);
+  --card-spacing-lg: var(--seeds-s8);
+  --card-spacing-xl: var(--seeds-s12);
 
   --card-spacing: var(--card-spacing-md);
 
-  --card-background-color: var(--bloom-color-white);
-  --card-border-radius: var(--bloom-rounded-lg);
-  --card-border-width: var(--bloom-border-1);
-  --card-border-color: var(--bloom-color-gray-450);
+  --card-background-color: var(--seeds-color-white);
+  --card-border-radius: var(--seeds-rounded-lg);
+  --card-border-width: var(--seeds-border-1);
+  --card-border-color: var(--seeds-color-gray-450);
   --card-divider-width: var(--card-border-width);
   --card-divider-color: var(--card-border-color);
 
   --card-content-padding-block: var(--card-spacing);
   --card-content-padding-inline-desktop: var(--card-content-padding-block);
   --card-content-padding-inline-mobile: var(--card-content-padding-block);
-  
+
   --card-header-padding-block: var(--card-spacing);
   --card-header-padding-inline-desktop: var(--card-header-padding-block);
   --card-header-padding-inline-mobile: var(--card-header-padding-block);
@@ -63,7 +63,7 @@
   }
 }
 
-.card-header {
+.seeds-card-header {
   padding-block-start: var(--card-header-padding-block);
   padding-inline: var(--card-header-padding-inline);
 
@@ -85,7 +85,7 @@
   }
 }
 
-.card-section {
+.seeds-card-section {
   padding-block-start: var(--card-content-padding-block);
   padding-inline: var(--card-content-padding-inline);
 
@@ -118,12 +118,12 @@
   }
 }
 
-.card-section:not([data-divider]):last-child {
+.seeds-card-section:not([data-divider]):last-child {
   padding-block-end: var(--card-content-padding-block);
 }
 
-.card-header,
-.card-footer {
+.seeds-card-header,
+.seeds-card-footer {
   > * {
     margin-block: 0;
   }
@@ -133,7 +133,7 @@
   }
 }
 
-.card-footer {
+.seeds-card-footer {
   background-color: var(--card-footer-background-color);
 
   &:not([data-divider]):first-of-type {

diff --git a/src/blocks/Card.tsx b/src/blocks/Card.tsx
@@ -12,7 +12,7 @@ export interface CardHeaderProps {
 }
 
 const CardHeader = (props: CardHeaderProps) => {
-  const classNames = ["card-header"]
+  const classNames = ["seeds-card-header"]
   if (props.className) classNames.push(props.className)
 
   return (
@@ -33,7 +33,7 @@ export interface CardSectionProps {
 }
 
 const CardSection = (props: CardSectionProps) => {
-  const classNames = ["card-section"]
+  const classNames = ["seeds-card-section"]
   if (props.className) classNames.push(props.className)
 
   return (
@@ -54,7 +54,7 @@ export interface CardFooterProps {
 }
 
 const CardFooter = (props: CardFooterProps) => {
-  const classNames = ["card-footer"]
+  const classNames = ["seeds-card-footer"]
   if (props.className) classNames.push(props.className)
 
   return (
@@ -77,7 +77,7 @@ export interface CardProps {
 }
 
 const Card = (props: CardProps) => {
-  const classNames = ["card"]
+  const classNames = ["seeds-card"]
   const spacing = props.spacing || "base"
   if (props.className) classNames.push(props.className)
 

diff --git a/src/blocks/Message.scss b/src/blocks/Message.scss
@@ -1,14 +1,14 @@
-.message {
-  --message-padding: var(--bloom-s4);
+.seeds-message {
+  --message-padding: var(--seeds-s4);
   --message-border-radius: 0;
   --message-border: none;
-  --message-flex-gap: var(--bloom-s3);
+  --message-flex-gap: var(--seeds-s3);
   --message-icon-size: 1em;
-  --message-max-width: var(--bloom-width-sm);
-  --message-font: var(--bloom-font-sans);
-  --message-font-size: var(--bloom-type-caption-size);
-  --message-link-gap: var(--bloom-s1);
-  --message-link-font-weight: var(--bloom-font-weight-semibold);
+  --message-max-width: var(--seeds-width-sm);
+  --message-font: var(--seeds-font-sans);
+  --message-font-size: var(--seeds-type-caption-size);
+  --message-link-gap: var(--seeds-s1);
+  --message-link-font-weight: var(--seeds-font-weight-semibold);
 
   --common-message-padding: var(--message-padding);
   --common-message-border-radius: var(--message-border-radius);

diff --git a/src/blocks/Message.tsx b/src/blocks/Message.tsx
@@ -4,7 +4,7 @@ import CommonMessage, { CommonMessageProps } from "./shared/CommonMessage"
 import "./Message.scss"
 
 const Message = (props: CommonMessageProps) => {
-  const classNames = ["message"]
+  const classNames = ["seeds-message"]
   if (props.className) classNames.push(props.className)
 
   return <CommonMessage {...props} className={classNames.join(" ")} />

diff --git a/src/blocks/Toast.scss b/src/blocks/Toast.scss
@@ -1,11 +1,11 @@
-#toast-stack {
-  --toast-stack-gap: var(--bloom-s4);
-  --toast-stack-inset-top: var(--bloom-s3);
-  --toast-stack-inset-right: var(--bloom-s3);
-  --toast-stack-max-width: var(--bloom-width-sm);
+#seeds-toast-stack {
+  --toast-stack-gap: var(--seeds-s4);
+  --toast-stack-inset-top: var(--seeds-s3);
+  --toast-stack-inset-right: var(--seeds-s3);
+  --toast-stack-max-width: var(--seeds-width-sm);
 
   position: fixed;
-  z-index: var(--bloom-z-index-overlay);
+  z-index: var(--seeds-z-index-overlay);
   display: flex;
   flex-direction: column;
   gap: var(--toast-stack-gap);
@@ -15,17 +15,17 @@
   max-width: calc(100% - var(--toast-stack-inset-right) * 2);
 }
 
-.toast {
-  --toast-padding: var(--bloom-s4);
+.seeds-toast {
+  --toast-padding: var(--seeds-s4);
   --toast-border-radius: 0;
   --toast-border: none;
-  --toast-flex-gap: var(--bloom-s3);
+  --toast-flex-gap: var(--seeds-s3);
   --toast-icon-size: 1em;
-  --toast-max-width: var(--bloom-width-sm);
-  --toast-font: var(--bloom-font-sans);
-  --toast-font-size: var(--bloom-type-caption-size);
-  --toast-link-gap: var(--bloom-s1);
-  --toast-link-font-weight: var(--bloom-font-weight-semibold);
+  --toast-max-width: var(--seeds-width-sm);
+  --toast-font: var(--seeds-font-sans);
+  --toast-font-size: var(--seeds-type-caption-size);
+  --toast-link-gap: var(--seeds-s1);
+  --toast-link-font-weight: var(--seeds-font-weight-semibold);
 
   --common-message-padding: var(--toast-padding);
   --common-message-border-radius: var(--toast-border-radius);

diff --git a/src/blocks/Toast.tsx b/src/blocks/Toast.tsx
@@ -10,17 +10,17 @@ interface ToastProps extends Omit<CommonMessageProps, "role" | "closeable"> {
 }
 
 const Toast = (props: ToastProps) => {
-  const classNames = ["toast"]
+  const classNames = ["seeds-toast"]
   if (props.className) classNames.push(props.className)
 
   const toastStack = useRef<Element>()
   const [mount, setMount] = useState(false)
 
   useEffect(() => {
-    let el: HTMLElement | null = document.querySelector("#toast-stack")
+    let el: HTMLElement | null = document.querySelector("#seeds-toast-stack")
     if (!el) {
       el = document.createElement("div")
-      el.id = "toast-stack"
+      el.id = "seeds-toast-stack"
       el.ariaLive = "polite"
       el.ariaAtomic = "true"
       document.body.append(el)
@@ -40,10 +40,18 @@ const Toast = (props: ToastProps) => {
     setMount(false)
   }, props.hideTimeout)
 
-  return (mount && toastStack.current) ? createPortal(
-    <CommonMessage {...props} tabIndex={0} role="alert" closeable className={classNames.join(" ")} />,
-    toastStack.current
-  ) : null
+  return mount && toastStack.current
+    ? createPortal(
+        <CommonMessage
+          {...props}
+          tabIndex={0}
+          role="alert"
+          closeable
+          className={classNames.join(" ")}
+        />,
+        toastStack.current
+      )
+    : null
 }
 
 export default Toast
diff --git a/src/blocks/__stories__/Alert.docs.mdx b/src/blocks/__stories__/Alert.docs.mdx
@@ -11,13 +11,13 @@ import Alert from "../Alert"
 
 | Name                       | Description                   | Default                        |
 | -------------------------- | ----------------------------- | ------------------------------ |
-| `--alert-padding`          | Interior spacing              | `--bloom-s4`                   |
+| `--alert-padding`          | Interior spacing              | `--seeds-s4`                   |
 | `--alert-border-radius`    | Radius                        | `0`                            |
 | `--alert-border`           | Border shorthand              | `none`                         |
-| `--alert-flex-gap`         | Space between icons/text      | `--bloom-s3`                   |
+| `--alert-flex-gap`         | Space between icons/text      | `--seeds-s3`                   |
 | `--alert-icon-size`        | Size                          | `1em`                          |
-| `--alert-max-width`        | Size                          | `--bloom-width-sm`             |
-| `--alert-font`             | Font                          | `--bloom-font-sans`            |
-| `--alert-font-size`        | Component font size           | `--bloom-type-caption-size`    |
-| `--alert-link-gap`         | Space between text and a link | `--bloom-s1`                   |
-| `--alert-link-font-weight` | Font weight                   | `--bloom-font-weight-semibold` |
+| `--alert-max-width`        | Size                          | `--seeds-width-sm`             |
+| `--alert-font`             | Font                          | `--seeds-font-sans`            |
+| `--alert-font-size`        | Component font size           | `--seeds-type-caption-size`    |
+| `--alert-link-gap`         | Space between text and a link | `--seeds-s1`                   |
+| `--alert-link-font-weight` | Font weight                   | `--seeds-font-weight-semibold` |
diff --git a/src/blocks/__stories__/Alert.stories.tsx b/src/blocks/__stories__/Alert.stories.tsx
@@ -20,7 +20,7 @@ export default {
 export const defaultAlert = () => <Alert>Primary alert</Alert>
 
 export const standardVariants = () => (
-  <div style={{ display: "grid", gap: "var(--bloom-s3)" }}>
+  <div style={{ display: "grid", gap: "var(--seeds-s3)" }}>
     <Alert variant="primary">Primary alert</Alert>
     <Alert variant="success">Success alert</Alert>
     <Alert variant="warn">Warning alert</Alert>
@@ -30,7 +30,7 @@ export const standardVariants = () => (
 )
 
 export const inverseVariants = () => (
-  <div style={{ display: "grid", gap: "var(--bloom-s3)" }}>
+  <div style={{ display: "grid", gap: "var(--seeds-s3)" }}>
     <Alert variant="primary-inverse">Primary alert</Alert>
     <Alert variant="success-inverse">Success alert</Alert>
     <Alert variant="warn-inverse">Warning alert</Alert>
@@ -60,7 +60,7 @@ export const wideContainerLayout = () => (
     <style>
       {`
       #in-container {
-        --alert-max-width: var(--bloom-width-4xl);
+        --alert-max-width: var(--seeds-width-4xl);
       }
       `}
     </style>

diff --git a/src/blocks/__stories__/Card.docs.mdx b/src/blocks/__stories__/Card.docs.mdx
@@ -24,16 +24,16 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx"
 
 | Name                                    | Description                                                          | Default                   |
 | --------------------------------------- | -------------------------------------------------------------------- | ------------------------- |
-| `--card-spacing-sm`                     | Small card spacing                                                   | `--bloom-s4`              |
-| `--card-spacing-md`                   | Medium card spacing (default)                                 | `--bloom-s6`              |
-| `--card-spacing-lg`                     | Large card spacing                                                  | `--bloom-s8`              |
-| `--card-spacing-xl`                     | Extra Large card spacing                                                   | `--bloom-s12`             |
-| `--card-background-color`               | Background of the card                                               | `--bloom-color-white`     |
-| `--card-border-radius`                  | Card corner radius                                                   | `--bloom-rounded-lg`      |
-| `--card-border-width`                   | Border width                                                         | `--bloom-border-1`        |
-| `--card-border-color`                   | <Swatch color="bloom-color-gray-450" /> Border color                 | `--bloom-color-gray-450`  |
+| `--card-spacing-sm`                     | Small card spacing                                                   | `--seeds-s4`              |
+| `--card-spacing-md`                     | Medium card spacing (default)                                        | `--seeds-s6`              |
+| `--card-spacing-lg`                     | Large card spacing                                                   | `--seeds-s8`              |
+| `--card-spacing-xl`                     | Extra Large card spacing                                             | `--seeds-s12`             |
+| `--card-background-color`               | Background of the card                                               | `--seeds-color-white`     |
+| `--card-border-radius`                  | Card corner radius                                                   | `--seeds-rounded-lg`      |
+| `--card-border-width`                   | Border width                                                         | `--seeds-border-1`        |
+| `--card-border-color`                   | <Swatch color="seeds-color-gray-450" /> Border color                 | `--seeds-color-gray-450`  |
 | `--card-divider-width`                  | Width of intra-card dividers                                         | `--card-border-width`     |
-| `--card-divider-color`                  | <Swatch color="bloom-color-gray-450" /> Color of intra-card dividers | `--card-border-color`     |
+| `--card-divider-color`                  | <Swatch color="seeds-color-gray-450" /> Color of intra-card dividers | `--card-border-color`     |
 | `--card-footer-background-color`        | Background of the footer                                             | `--card-background-color` |
 | `--card-content-padding-block`          | Vertical padding between elements                                    | (card spacing)            |
 | `--card-content-padding-inline-desktop` | Horizontal padding                                                   | (card spacing)            |