Artur/des 668 rename rt prefix to fui (#21)

whopio · Dec 4, 2023 · fffc0a6 · fffc0a6
1 parent 04aa3b0
commit fffc0a6
Show file tree

Hide file tree

Showing 138 changed files with 2,602 additions and 2,084 deletions.
diff --git a/apps/playground/app/dashboard/page.module.css b/apps/playground/app/dashboard/page.module.css
@@ -1,8 +1,8 @@
-.body :global(.rt-DialogContent) {
+.body :global(.fui-DialogContent) {
   max-width: 400px;
 }
 
-.body :global(.rt-SelectTrigger) {
+.body :global(.fui-SelectTrigger) {
   width: 100%;
 }
 

diff --git a/apps/playground/app/dashboard/page.tsx b/apps/playground/app/dashboard/page.tsx
@@ -195,7 +195,7 @@ export default function Demo() {
                     <PopoverRoot>
                       <PopoverTrigger>
                         <Card variant="ghost" style={{ flex: 1 }} asChild>
-                          <button className="rt-reset">
+                          <button className="fui-reset">
                             <Flex gap="3" align="center" justify="between">
                               <Flex gap="3" align="center">
                                 <Avatar fallback="PB" />
@@ -240,47 +240,47 @@ export default function Demo() {
                     </PopoverRoot>
                   </Flex>
                   <Flex direction="column" gap="1" pt="6">
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <HomeIcon width="24" height="24" />
                       Home
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <AccessibilityIcon width="24" height="24" />
                       Products
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <MixerVerticalIcon width="24" height="24" />
                       Product pages
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <EnvelopeOpenIcon width="24" height="24" />
                       Apps
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <CookieIcon width="24" height="24" />
                       Links
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <MobileIcon width="24" height="24" />
                       Customers
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <ReloadIcon width="24" height="24" />
                       Stats
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <RocketIcon width="24" height="24" />
                       Affiliates
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <ClockIcon width="24" height="24" />
                       Payments
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <CodeIcon width="24" height="24" />
                       Feedback
                     </button>
-                    <button className={'rt-reset ' + styles.asideButton}>
+                    <button className={'fui-reset ' + styles.asideButton}>
                       <CameraIcon width="24" height="24" />
                       Resolution center
                     </button>

diff --git a/apps/playground/app/demo/page.module.css b/apps/playground/app/demo/page.module.css
@@ -1,11 +1,11 @@
-.body :global(.rt-DialogContent) {
+.body :global(.fui-DialogContent) {
   max-width: 400px;
 }
 
 .body :global(#root) {
   padding: 100px 400px;
 }
 
-.body :global(.rt-SelectTrigger) {
+.body :global(.fui-SelectTrigger) {
   width: 100%;
 }
diff --git a/apps/playground/app/explore-components/page.module.css b/apps/playground/app/explore-components/page.module.css
@@ -2,49 +2,56 @@
   border-collapse: collapse;
 }
 
-.table th:not(:global(.rt-TableColumnHeaderCell), :global(.rt-TableRowHeaderCell)) {
+.table
+  th:not(
+    :global(.fui-TableColumnHeaderCell),
+    :global(.fui-TableRowHeaderCell)
+  ) {
   font-weight: var(--font-weight-regular);
 }
 
-.table tr:not(:global(.rt-TableRow)) {
+.table tr:not(:global(.fui-TableRow)) {
   vertical-align: middle;
 }
 
-.table th:not(:global(.rt-TableColumnHeaderCell), :global(.rt-TableRowHeaderCell)),
-.table td:not(:global(.rt-TableCell)) {
+.table
+  th:not(:global(.fui-TableColumnHeaderCell), :global(.fui-TableRowHeaderCell)),
+.table td:not(:global(.fui-TableCell)) {
   padding: 0;
   padding-right: var(--space-4);
   padding-bottom: var(--space-4);
   text-align: center;
 }
 
-.table tbody tr td:first-child:not(:global(.rt-TableCell)) {
+.table tbody tr td:first-child:not(:global(.fui-TableCell)) {
   padding-left: 0;
   padding-right: var(--space-4);
   min-width: 64px;
   text-align: left;
 }
 
-.table thead th:not(:global(.rt-TableColumnHeaderCell), :global(.rt-TableRowHeaderCell)),
-.table tbody tr td:first-child:not(:global(.rt-TableCell)) {
+.table
+  thead
+  th:not(:global(.fui-TableColumnHeaderCell), :global(.fui-TableRowHeaderCell)),
+.table tbody tr td:first-child:not(:global(.fui-TableCell)) {
   font-size: var(--font-size-1);
   letter-spacing: var(--letter-spacing-1);
   line-height: var(--line-height-1);
   color: var(--gray-11);
 }
 
-.table :global(.rt-TextFieldRoot) {
+.table :global(.fui-TextFieldRoot) {
   width: 180px;
 }
-.table :global(.rt-TextAreaRoot) {
+.table :global(.fui-TextAreaRoot) {
   width: 180px;
 }
-.table :global(.rt-CalloutRoot) {
+.table :global(.fui-CalloutRoot) {
   white-space: nowrap;
 }
-.table :global(.rt-Badge) {
+.table :global(.fui-Badge) {
   vertical-align: top;
 }
-.table :global(.rt-SliderRoot) {
+.table :global(.fui-SliderRoot) {
   width: 160px;
 }
diff --git a/apps/playground/app/sink/pointer-cursors-checkbox.tsx b/apps/playground/app/sink/pointer-cursors-checkbox.tsx
@@ -14,7 +14,7 @@ export function PointerCursorsCheckbox() {
       {checked && (
         <style>
           {`
-            .radix-themes {
+            .frosted-ui {
               --cursor-button: pointer;
               --cursor-checkbox: pointer;
               --cursor-disabled: default;

diff --git a/apps/tailwind/app/dashboard/page.tsx b/apps/tailwind/app/dashboard/page.tsx
@@ -56,7 +56,7 @@ const SidebarButton = ({ children }: { children: React.ReactNode }) => {
   return (
     <button
       className={
-        'rt-reset flex items-center text-gray-a10 gap-4 w-full h-[42px] pl-4 rounded-5 hover:bg-gray-a3 hover:text-gray-a12 dark:hover:shadow-[0px_0px_0px_1px_var(--gray-a4)_inset] dark:hover:bg-[linear-gradient(_95deg,transparent,transparent,transparent,var(--accent-a4)_)]'
+        'fui-reset flex items-center text-gray-a10 gap-4 w-full h-[42px] pl-4 rounded-5 hover:bg-gray-a3 hover:text-gray-a12 dark:hover:shadow-[0px_0px_0px_1px_var(--gray-a4)_inset] dark:hover:bg-[linear-gradient(_95deg,transparent,transparent,transparent,var(--accent-a4)_)]'
       }
     >
       {children}
@@ -223,7 +223,7 @@ export default function Dashboard() {
                     <PopoverRoot>
                       <PopoverTrigger>
                         <Card variant="ghost" style={{ flex: 1 }} asChild>
-                          <button className="rt-reset">
+                          <button className="fui-reset">
                             <Flex gap="3" align="center" justify="between">
                               <Flex gap="3" align="center">
                                 <Avatar fallback="PB" />

diff --git a/apps/tailwind/tailwind.config.js b/apps/tailwind/tailwind.config.js
@@ -1,4 +1,4 @@
-import { radixThemePlugin } from 'frosted-ui';
+import { frostedThemePlugin } from 'frosted-ui';
 
 export default {
   darkMode: ['class'],
@@ -11,7 +11,7 @@ export default {
     extend: {},
   },
   plugins: [
-    radixThemePlugin({
+    frostedThemePlugin({
       useTailwindColorNames: false, // optional
       useTailwindRadiusNames: false, // optional
       mapMissingTailwindColors: false, // optional

diff --git a/packages/frosted-ui/.stylelintrc.js b/packages/frosted-ui/.stylelintrc.js
@@ -7,7 +7,7 @@ module.exports = {
     // TODO: enable this and fix specificity issues
     // 'selector-max-specificity': ['0,1,1'],
     // Enforce prefixes on classnames and keyframes
-    'selector-class-pattern': /^-?rt-|^radix-themes$|^(light|dark)(-theme)?$/,
-    'keyframes-name-pattern': /^rt-([a-z]|-)+$/,
+    'selector-class-pattern': /^-?fui-|^frosted-ui$|^(light|dark)(-theme)?$/,
+    'keyframes-name-pattern': /^fui-([a-z]|-)+$/,
   },
 };
diff --git a/packages/frosted-ui/postcss-radix-themes.js → packages/frosted-ui/postcss-frosted-ui.js b/packages/frosted-ui/postcss-radix-themes.js → packages/frosted-ui/postcss-frosted-ui.js
@@ -23,7 +23,7 @@ const breakpoints = postcss
 const cache = new WeakMap();
 
 module.exports = () => ({
-  postcssPlugin: 'postcss-radix-themes',
+  postcssPlugin: 'postcss-frosted-ui',
   Comment(comment) {
     // Remove all comments from CSS source
     comment.remove();
@@ -86,25 +86,25 @@ function addPrefix(node, prefix) {
   }
 
   /**
-   * Should match responsive classes (rt-r- prefix):
+   * Should match responsive classes (fui-r- prefix):
    * ```
-   * .rt-r-size-1
-   * .rt-m-2
-   * .-rt-m-2
-   * .rt-Button.rt-r-size-1 (captures "rt-r-size-1")
+   * .fui-r-size-1
+   * .fui-m-2
+   * .-fui-m-2
+   * .fui-Button.fui-r-size-1 (captures "fui-r-size-1")
    * ```
    *
    * Should not match:
-   * .rt-Button
+   * .fui-Button
    */
-  const classNameRegexp = /\.(-?rt-r-[a-z0-9-]+)/g;
+  const classNameRegexp = /\.(-?fui-r-[a-z0-9-]+)/g;
 
   // Check for rules that use compound props on a component:
-  // - a component name (prefixed with "rt-" and pascal cased)
+  // - a component name (prefixed with "fui-" and pascal cased)
   // - followed by 2 or more prop selectors (lowercase, numbers, -)
   //
-  // e.g. ".rt-DialogContent.rt-r-size-2.gray"
-  if (/\.rt-(?:[A-Z][a-z]+)+(?:\.[a-z0-9-]+){2,}/.test(node.selector)) {
+  // e.g. ".fui-DialogContent.fui-r-size-2.gray"
+  if (/\.fui-(?:[A-Z][a-z]+)+(?:\.[a-z0-9-]+){2,}/.test(node.selector)) {
     throw Error(`
       "${node.selector}" looks like it uses compound props on a component.
       "@breakpoints" does not support compound props yet.

diff --git a/packages/frosted-ui/postcss.config.js b/packages/frosted-ui/postcss.config.js
@@ -8,7 +8,7 @@ module.exports = {
       path: [path.relative(process.cwd(), '../')],
     }),
     require('postcss-nesting'),
-    require('./postcss-radix-themes'),
+    require('./postcss-frosted-ui'),
     require('postcss-custom-media'),
     require('postcss-combine-duplicated-selectors'),
     require('postcss-discard-empty'),

diff --git a/packages/frosted-ui/src/components/alert-dialog.css b/packages/frosted-ui/src/components/alert-dialog.css
@@ -1,5 +1,5 @@
-.rt-AlertDialogOverlay {
+.fui-AlertDialogOverlay {
 }
 
-.rt-AlertDialogContent {
+.fui-AlertDialogContent {
 }
diff --git a/packages/frosted-ui/src/components/alert-dialog.tsx b/packages/frosted-ui/src/components/alert-dialog.tsx
@@ -74,15 +74,15 @@ const AlertDialogContent = React.forwardRef<
   return (
     <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
       <Theme asChild>
-        <AlertDialogPrimitive.Overlay className="rt-DialogOverlay rt-AlertDialogOverlay">
+        <AlertDialogPrimitive.Overlay className="fui-DialogOverlay fui-AlertDialogOverlay">
           <AlertDialogPrimitive.Content
             {...contentProps}
             ref={forwardedRef}
             className={classNames(
-              'rt-DialogContent',
-              'rt-AlertDialogContent',
+              'fui-DialogContent',
+              'fui-AlertDialogContent',
               className,
-              withBreakpoints(size, 'rt-r-size'),
+              withBreakpoints(size, 'fui-r-size'),
             )}
           >
             <AlertDialogContentContext.Provider