refactor: remove unused CSS (#733)

Author: paanSinghCoder

apps/www/src/components/editor/editor.module.css

@@ -1,5 +1,3 @@
-.editor {
-}
 .editor pre {
   overflow: auto !important;
 }
@@ -8,9 +6,6 @@
   border-top-right-radius: 0 !important;
   border: none !important;
 }
-.editor [data-radix-scroll-area-viewport] {
-  overscroll-behavior: auto;
-}
 .code {
   padding-left: var(--rs-space-3);
   padding-bottom: var(--rs-space-6);

apps/www/src/content/docs/(overview)/index.mdx

@@ -21,7 +21,7 @@ Apsara provides over 50 components organized by function:
 
 | Category | Components |
 |----------|------------|
-| **Layout** | Box, Flex, Grid, Container, Separator |
+| **Layout** | Flex, Grid, Container, Separator |
 | **Navigation** | Navbar, Sidebar, Breadcrumb, Tabs, Link |
 | **Data Display** | DataTable, Table, List, Avatar, Badge, Chip, Indicator |
 | **Forms** | Button, InputField, TextArea, Select, Combobox, Checkbox, Radio, Switch, Slider, ColorPicker, Calendar |

packages/raystack/components/box/box.tsx

@@ -1,5 +1,9 @@
 import { ComponentProps } from 'react';
 
+/**
+ * @deprecated `Box` is deprecated. This component will be removed in a future major version.
+ * Use `Flex` component instead.
+ */
 export function Box(props: ComponentProps<'div'>) {
   return <div {...props} />;
 }

packages/raystack/components/button/button.module.css

@@ -16,7 +16,6 @@
 }
 
 .button:focus-visible {
-  /* Todo: var does not exist for 1px */
   outline: 1px solid var(--rs-color-border-accent-emphasis);
 }
 
@@ -33,6 +32,7 @@
 .button-disabled {
   opacity: 0.5;
   pointer-events: initial;
+  cursor: default;
 }
 
 .button:disabled:hover,
@@ -60,24 +60,18 @@
 }
 
 .button-solid:hover,
-.button-solid:active,
-.button-solid[data-radix-popover-trigger][data-state="open"],
-.button-solid[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-solid:active {
   background-color: var(--rs-color-background-accent-emphasis-hover);
 }
 
 .button-solid.button-disabled:hover,
-.button-solid.button-disabled:active,
-.button-solid[data-radix-popover-trigger][data-state="open"],
-.button-solid.button-disabled[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-solid.button-disabled:active {
   color: var(--rs-color-foreground-accent-emphasis);
   background-color: var(--rs-color-background-accent-emphasis);
 }
 
 .button-solid.button-loading:hover,
-.button-solid.button-loading:active,
-.button-solid.button-loading[data-radix-popover-trigger][data-state="open"],
-.button-solid.button-loading[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-solid.button-loading:active {
   background-color: var(--rs-color-background-accent-emphasis);
 }
 
@@ -108,20 +102,14 @@
 .button-outline:disabled:hover,
 .button-outline.button-disabled:hover,
 .button-outline:disabled:active,
-.button-outline.button-disabled:active,
-.button-outline:disabled[data-radix-popover-trigger][data-state="open"],
-.button-outline.button-disabled[data-radix-popover-trigger][data-state="open"],
-.button-outline:disabled[data-radix-dropdown-menu-trigger][data-state="open"],
-.button-outline.button-disabled[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-outline.button-disabled:active {
   background-color: transparent;
   color: var(--rs-color-foreground-accent-primary);
   border-color: var(--rs-color-border-accent-emphasis);
 }
 
 .button-outline.button-loading:hover,
-.button-outline.button-loading:active,
-.button-outline.button-loading[data-radix-popover-trigger][data-state="open"],
-.button-outline.button-loading[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-outline.button-loading:active {
   background-color: transparent;
   color: var(--rs-color-foreground-accent-primary);
   border-color: var(--rs-color-border-accent-primary);
@@ -158,9 +146,7 @@
 }
 
 .button-ghost:hover,
-.button-ghost:active,
-.button-ghost[data-radix-popover-trigger][data-state="open"],
-.button-ghost[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-ghost:active {
   background-color: var(--rs-color-background-base-primary-hover);
 }
 
@@ -172,20 +158,14 @@
 .button-ghost:disabled:hover,
 .button-ghost.button-disabled:hover,
 .button-ghost:disabled:active,
-.button-ghost.button-disabled:active,
-.button-ghost:disabled[data-radix-popover-trigger][data-state="open"],
-.button-ghost.button-disabled[data-radix-popover-trigger][data-state="open"],
-.button-ghost:disabled[data-radix-dropdown-menu-trigger][data-state="open"],
-.button-ghost.button-disabled[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-ghost.button-disabled:active {
   color: var(--rs-color-foreground-base-primary);
   background-color: transparent;
   border-color: var(--rs-color-border-base-primary);
 }
 
 .button-ghost.button-loading:hover,
-.button-ghost.button-loading:active,
-.button-ghost.button-loading[data-radix-popover-trigger][data-state="open"],
-.button-ghost.button-loading[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-ghost.button-loading:active {
   background-color: transparent;
   border-color: var(--rs-color-border-base-primary);
 }
@@ -196,9 +176,7 @@
 }
 
 .button-text:hover,
-.button-text:active,
-.button-text[data-radix-popover-trigger][data-state="open"],
-.button-text[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-text:active {
   background-color: var(--rs-color-background-base-primary-hover);
 }
 
@@ -208,20 +186,14 @@
 }
 
 .button-text.button-loading:hover,
-.button-text.button-loading:active,
-.button-text.button-loading[data-radix-popover-trigger][data-state="open"],
-.button-text.button-loading[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-text.button-loading:active {
   background-color: transparent;
 }
 
 .button-text:disabled:hover,
 .button-text.button-disabled:hover,
 .button-text:disabled:active,
-.button-text.button-disabled:active,
-.button-text:disabled[data-radix-popover-trigger][data-state="open"],
-.button-text.button-disabled[data-radix-popover-trigger][data-state="open"],
-.button-text:disabled[data-radix-dropdown-menu-trigger][data-state="open"],
-.button-text.button-disabled[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-text.button-disabled:active {
   color: var(--rs-color-foreground-base-primary);
   background-color: transparent;
 }
@@ -232,29 +204,14 @@
 }
 
 .button-loading:hover,
-.button-loading:active,
-.button-loading[data-radix-popover-trigger][data-state="open"],
-.button-loading[data-radix-dropdown-menu-trigger][data-state="open"] {
+.button-loading:active {
   background-color: inherit;
 }
 
-.loader {
-  border: var(--rs-space-1) solid var(--rs-color-background-base-primary);
-  border-top: var(--rs-space-1) solid var(--rs-color-foreground-base-primary);
-  border-radius: 50%;
-  /* Todo: var does not exist for 10px */
-  width: 10px;
-  height: 10px;
-}
-
 @media (prefers-reduced-motion: no-preference) {
   .button {
     transition: all 0.2s ease-in-out;
   }
-
-  .loader {
-    animation: spin 1s linear infinite;
-  }
 }
 
 .loader-text {

packages/raystack/components/callout/callout.module.css

@@ -1,6 +1,5 @@
 .callout {
   position: relative;
-  /* Todo: var does not exist for 318px */
   width: 318px;
   padding: var(--rs-space-3);
   border-radius: var(--rs-radius-2);
@@ -9,7 +8,6 @@
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
-  /* Todo: var does not exist for 0.5px */
   border: 0.5px solid transparent;
 }
 
@@ -82,8 +80,6 @@
 }
 
 .callout-success {
-  /* Todo: var does not exist for 318px */
-  width: 318px;
   gap: var(--rs-space-10);
   background: var(--rs-color-background-success-primary);
   color: var(--rs-color-foreground-success-primary);
@@ -116,7 +112,6 @@
 
 .callout-outline.callout-grey {
   background: var(--rs-color-background-neutral-primary);
-  /* Todo: var does not exist for 0.5px */
   border: 0.5px solid var(--rs-color-border-base-primary);
 }
 
@@ -198,12 +193,6 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
-/* Gradient variants */
-.callout-gradient {
-  background: radial-gradient(circle, #ad00e933 0%, #ef040433 100%);
-  color: var(--rs-color-foreground-base-primary);
-}
-
 .callout-outline.callout-gradient {
   background: radial-gradient(circle, #ad00e933 0%, #ef040433 100%);
   border: 0.5px solid #ef040444;

packages/raystack/components/empty-state/empty-state.module.css

@@ -41,7 +41,6 @@
   background-color: inherit;
   z-index: -10;
   transform: rotate(-42deg);
-  /* box-shadow: var(--rs-shadow-inset); */
 }
 
 .headerText {
@@ -81,13 +80,6 @@
   max-width: 366px;
 }
 
-.emptyStateLeft {
-  padding: var(--rs-space-9) var(--rs-space-5);
-  width: 100%;
-  height: 100%;
-  text-align: left;
-}
-
 .iconLarge {
   height: 68px;
   width: 68px;
@@ -100,11 +92,6 @@
   padding: var(--rs-space-4);
 }
 
-.actionContainer {
-  display: flex;
-  gap: var(--rs-space-3);
-}
-
 .emptyStatePage {
   width: 100%;
   height: 100%;

packages/raystack/components/filter-chip/filter-chip.module.css

@@ -62,16 +62,6 @@
   letter-spacing: var(--rs-letter-spacing-small);
 }
 
-.value {
-  color: var(--rs-color-foreground-base-primary);
-  font-size: var(--rs-font-size-small);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: var(--rs-line-height-small);
-  letter-spacing: var(--rs-letter-spacing-small);
-}
-
 .removeIconContainer {
   display: flex;
   align-items: center;

packages/raystack/components/input-field/input-field.module.css

@@ -112,10 +112,6 @@
   background: var(--rs-color-background-base-primary);
 }
 
-.input-default {
-  color: var(--rs-color-foreground-base-primary);
-}
-
 .input-disabled {
   color: var(--rs-color-foreground-base-tertiary);
 }

packages/raystack/components/text-area/index.tsx

@@ -1,3 +1 @@
-export { TextArea } from "./text-area";
-
-// Todo: Add tooltip for the info icon 
+export { TextArea } from './text-area';

packages/raystack/components/theme-provider/theme.tsx

@@ -357,7 +357,7 @@ const disableAnimation = () => {
   const css = document.createElement('style');
   css.appendChild(
     document.createTextNode(
-      `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
+      `*{-webkit-transition:none!important;transition:none!important}`
     )
   );
   document.head.appendChild(css);