npm - @rarui/styles - Versions diffs - 1.0.0-rc.1 - Mend

@rarui/styles 1.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/CHANGELOG.md +34 -0
package/README.md +37 -0
package/dist/index.css +1 -0
package/dist/index.d.ts +185 -0
package/dist/index.js +1 -0
package/dist/styles.css +1 -0
package/dist/themes/dark.css +1 -0
package/dist/themes/dark.d.ts +9 -0
package/dist/themes/dark.js +1 -0
package/package.json +33 -0
package/src/components/ThemeProvider.tsx +30 -0
package/src/components/contexts/ThemeProviderContext/ThemeProviderContext.tsx +6 -0
package/src/components/contexts/ThemeProviderContext/index.ts +5 -0
package/src/components/contexts/ThemeProviderContext/themeProviderContext.types.ts +7 -0
package/src/components/contexts/index.ts +1 -0
package/src/components/hooks/index.ts +1 -0
package/src/components/hooks/useTheme/index.ts +1 -0
package/src/components/hooks/useTheme/useTheme.spec.tsx +27 -0
package/src/components/hooks/useTheme/useTheme.ts +9 -0
package/src/components/index.ts +6 -0
package/src/components/themeProvider.definitions.ts +6 -0
package/src/components/themeProvider.spec.tsx +41 -0
package/src/components/themeProvider.types.ts +10 -0
package/src/index.ts +8 -0
package/src/index.types.ts +71 -0
package/src/packages/atomic/button/index.ts +6 -0
package/src/packages/atomic/button/rarui-button.commons.ts +82 -0
package/src/packages/atomic/button/rarui-button.css.ts +331 -0
package/src/packages/atomic/button/rarui-button.types.ts +4 -0
package/src/themes/contract.css.ts +241 -0
package/src/themes/globals.css.ts +256 -0
package/src/themes/index.ts +2 -0
package/src/themes/mediaQueries.ts +10 -0
package/src/themes/rarui-theme-dark.css.ts +126 -0
package/tsconfig.json +4 -0
package/webpack.config.ts +30 -0

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,34 @@
+# Changelog
+RarUI Styles deprive all styles needed to build components.
+## 2024-03-22 `1.0.0`
+#### 🎉 New features
+- Created new `ThemeProvider` component. ([#5](https://git.rarolabs.com.br/frontend/rarui/pull/5) by [@junior](https://git.rarolabs.com.br/junior))
+- Added new style pack for `button` component. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+- Added new theme dark. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+#### 📚 3rd party library updates
+- Added `@vanilla-extract/css@1.14.1`. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `@vanilla-extract/dynamic@2.1.0`. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `@vanilla-extract/recipes@0.5.2`. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `@vanilla-extract/sprinkles@1.6.1`. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `rainbow-sprinkles@0.17.1`. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `webpack@5.90.3`. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `webpack-merge@5.10.0`. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+- Added `webpack-shell-plugin-next@2.3.1`. ([#3](https://git.rarolabs.com.br/frontend/rarui/pull/3) by [@junior](https://git.rarolabs.com.br/junior))
+<!-- #### 🛠 Breaking changes -->
+<!-- #### 📚 3rd party library updates -->
+<!-- #### 🎉 New features -->
+<!-- #### 🐛 Bug fixes -->
+<!-- #### 💡 Others -->
+<!-- #### ⚠️ Notices -->

package/README.md ADDED Viewed

@@ -0,0 +1,37 @@
+# `@rarui/styles`
+The style package that contains all the variables and rules necessary for the components to work.
+## Installation
+```sh
+$ yarn add @rarui/styles
+# or
+$ npm install @rarui/styles
+```
+## Usage
+We import the Design System component and the CSS styles file for our project, thus allowing the use of the component in the project.
+```jsx
+// App.tsx
+import React from "react";
+import "@rarui/styles/dist/index.css";
+import { Button } from "@rarui/button";
+const MyApp: React.FC = () => {
+  const onClickButton = () => {
+    alert("hello world!");
+  }
+  return (
+    <Button appearance="primary" onClick={handleClick}>
+      ...
+    </Button>
+  );
+};
+export default MyApp;
+```

package/dist/index.css ADDED Viewed

@@ -0,0 +1 @@

+ :root{--rarui-colors-surface-background:#fcfcfd;--rarui-colors-surface-brand:#028aca;--rarui-colors-surface-brand-hover:rgba(3,174,252,.1);--rarui-colors-surface-brand-press:rgba(3,174,252,.15);--rarui-colors-surface-brand-secondary:#373399;--rarui-colors-surface-brand-secondary-hover:rgba(68,64,191,.1);--rarui-colors-surface-brand-secondary-press:rgba(68,64,191,.15);--rarui-colors-surface-brand-secondary-subdued:#ececf9;--rarui-colors-surface-brand-subdued:#e6f7ff;--rarui-colors-surface-disabled:#f2f2f3;--rarui-colors-surface-error:#f02a23;--rarui-colors-surface-error-hover:rgba(220,42,35,.1);--rarui-colors-surface-error-press:rgba(220,42,35,.15);--rarui-colors-surface-error-subdued:#fff6f5;--rarui-colors-surface-hover:rgba(0,0,0,.03);--rarui-colors-surface-info:#03aefc;--rarui-colors-surface-info-hover:rgba(3,174,252,.1);--rarui-colors-surface-info-press:rgba(3,174,252,.15);--rarui-colors-surface-info-subdued:#f5fcff;--rarui-colors-surface-invert:#0c0d0d;--rarui-colors-surface-invert-disabled:#303336;--rarui-colors-surface-invert-hover:hsla(0,0%,100%,.15);--rarui-colors-surface-invert-press:hsla(0,0%,100%,.25);--rarui-colors-surface-invert-secondary:#27292b;--rarui-colors-surface-on-brand-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-brand-press:hsla(0,0%,100%,.25);--rarui-colors-surface-on-brand-secondary-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-brand-secondary-press:hsla(0,0%,100%,.3);--rarui-colors-surface-on-error-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-error-press:rgba(0,0,0,.25);--rarui-colors-surface-on-info-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-info-press:rgba(0,0,0,.25);--rarui-colors-surface-on-success-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-success-press:rgba(0,0,0,.25);--rarui-colors-surface-on-warning-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-warning-press:hsla(0,0%,100%,.35);--rarui-colors-surface-overlay:rgba(0,0,0,.65);--rarui-colors-surface-press:rgba(0,0,0,.05);--rarui-colors-surface-primary:#fff;--rarui-colors-surface-secondary:#f7f7f8;--rarui-colors-surface-success:#1a9338;--rarui-colors-surface-success-hover:rgba(26,147,56,.1);--rarui-colors-surface-success-press:rgba(26,147,56,.15);--rarui-colors-surface-success-subdued:#ebffee;--rarui-colors-surface-warning:#ffeacc;--rarui-colors-surface-warning-hover:rgba(231,157,19,.1);--rarui-colors-surface-warning-press:rgba(231,157,19,.15);--rarui-colors-surface-warning-subdued:#ffeacc;--rarui-colors-content-brand:#028aca;--rarui-colors-content-brand-alt:#68cefd;--rarui-colors-content-brand-secondary:#373399;--rarui-colors-content-disabled:rgba(0,0,0,.2);--rarui-colors-content-error:#a3292f;--rarui-colors-content-info:#028aca;--rarui-colors-content-invert:#fff;--rarui-colors-content-invert-disabled:hsla(0,0%,100%,.4);--rarui-colors-content-invert-secondary:hsla(0,0%,100%,.75);--rarui-colors-content-on-brand:#fafdff;--rarui-colors-content-on-brand-secondary:#fbfbfe;--rarui-colors-content-on-error:#ffe9e5;--rarui-colors-content-on-info:#e5f7ff;--rarui-colors-content-on-success:#ebffee;--rarui-colors-content-on-warning:#4d2a00;--rarui-colors-content-primary:#181a1b;--rarui-colors-content-secondary:#61676b;--rarui-colors-content-success:#0c451b;--rarui-colors-content-warning:#866000;--rarui-colors-content-warning-alt:#ffeacc;--rarui-colors-border-brand:#99defe;--rarui-colors-border-brand-alt:#03aefc;--rarui-colors-border-brand-secondary:#b4b2e5;--rarui-colors-border-disabled:rgba(0,0,0,.05);--rarui-colors-border-divider:rgba(0,0,0,.1);--rarui-colors-border-error:#ffa499;--rarui-colors-border-info:#99defe;--rarui-colors-border-invert:hsla(0,0%,100%,.25);--rarui-colors-border-invert-disabled:hsla(0,0%,100%,.1);--rarui-colors-border-primary:rgba(0,0,0,.4);--rarui-colors-border-secondary:rgba(0,0,0,.2);--rarui-colors-border-subdued:rgba(0,0,0,.1);--rarui-colors-border-success:#8bf4a6;--rarui-colors-border-warning:#ffbb5c;--rarui-fontFamily-inter:Inter,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",arial,sans-serif;--rarui-fontSize-hero-caption:4.25rem;--rarui-fontSize-body-xxs:0.6875rem;--rarui-fontSize-body-xs:0.75rem;--rarui-fontSize-body-s:0.875rem;--rarui-fontSize-body-m:1rem;--rarui-fontSize-body-l:1.125rem;--rarui-fontSize-body-xl:1.5rem;--rarui-fontSize-heading-xs:1.25rem;--rarui-fontSize-heading-s:1.25rem;--rarui-fontSize-heading-m:1.75rem;--rarui-fontSize-heading-l:2.375rem;--rarui-fontSize-heading-xl:2.875rem;--rarui-fontSize-button-s:0.875rem;--rarui-fontSize-button-m:0.9375rem;--rarui-fontSize-button-l:1rem;--rarui-fontSize-label-s:0.75rem;--rarui-fontSize-label-m:0.875rem;--rarui-fontSize-label-l:1rem;--rarui-fontWeight-regular:400;--rarui-fontWeight-medium:500;--rarui-fontWeight-semiBold:600;--rarui-fontWeight-bold:700;--rarui-lineWeight-hero-caption:4.375rem;--rarui-lineWeight-body-xxs:0.875rem;--rarui-lineWeight-body-xs:1rem;--rarui-lineWeight-body-s:1.25rem;--rarui-lineWeight-body-m:1.375rem;--rarui-lineWeight-body-l:1.5rem;--rarui-lineWeight-body-xl:2rem;--rarui-lineWeight-heading-xs:1.5rem;--rarui-lineWeight-heading-s:1.75rem;--rarui-lineWeight-heading-m:2rem;--rarui-lineWeight-heading-l:2.75rem;--rarui-lineWeight-heading-xl:3.5rem;--rarui-lineWeight-button-s:normal;--rarui-lineWeight-button-m:normal;--rarui-lineWeight-button-l:normal;--rarui-lineWeight-label-s:normal;--rarui-lineWeight-label-m:normal;--rarui-lineWeight-label-l:normal;--rarui-elevation-none:none;--rarui-elevation-top-1:0px -1px 2px 0px rgba(78,81,83,.1);--rarui-elevation-top-2:0px -4px 8px 0px rgba(78,81,83,.1);--rarui-elevation-top-3:0px -8px 16px 0px rgba(78,81,83,.08);--rarui-elevation-top-4:0px -16px 32px 0px rgba(78,81,83,.08);--rarui-elevation-top-5:0px -24px 64px 0px rgba(78,81,83,.08);--rarui-elevation-bottom-1:0px 1px 2px 0px rgba(78,81,83,.1);--rarui-elevation-bottom-2:0px 4px 8px 0px rgba(78,81,83,.1);--rarui-elevation-bottom-3:0px 8px 16px 0px rgba(78,81,83,.08);--rarui-elevation-bottom-4:0px 16px 32px 0px rgba(78,81,83,.08);--rarui-elevation-bottom-5:0px 24px 48px 0px rgba(78,81,83,.08);--rarui-shape-border-radius-none:0;--rarui-shape-border-radius-2xs:0.25rem;--rarui-shape-border-radius-xs:0.5rem;--rarui-shape-border-radius-sm:1rem;--rarui-shape-border-radius-md:1.5rem;--rarui-shape-border-radius-lg:2rem;--rarui-shape-border-radius-xl:3rem;--rarui-shape-border-radius-2xl:4rem;--rarui-shape-border-radius-pill:31.25rem;--rarui-shape-border-radius-button:0.5rem;--rarui-shape-border-radius-input:0.5rem;--rarui-shape-border-width-1:0.0625rem;--rarui-shape-border-width-2:0.125rem;--rarui-shape-border-width-3:0.1875rem;--rarui-shape-border-width-4:1rem;--rarui-shape-border-width-5:1.25rem;--rarui-spacing-4xs:0.25rem;--rarui-spacing-3xs:0.5rem;--rarui-spacing-2xs:0.75rem;--rarui-spacing-xs:1rem;--rarui-spacing-s:1.5rem;--rarui-spacing-md:2rem;--rarui-spacing-lg:2.5rem;--rarui-spacing-xl:3rem;--rarui-spacing-2xl:3.5rem;--rarui-spacing-3xl:4rem;--rarui-spacing-4xl:5rem;--rarui-spacing-5xl:6rem;--rarui-spacing-6xl:7rem;--rarui-spacing-7xl:7.75rem;--rarui-spacing-8xl:9rem;--rarui-zIndex-100:100;--rarui-zIndex-200:200;--rarui-zIndex-300:300;--rarui-zIndex-400:400;--rarui-zIndex-500:500;--rarui-zIndex-600:600;--rarui-zIndex-700:700;--rarui-zIndex-800:800;--rarui-zIndex-900:900;--rarui-breakpoint-xs:0px;--rarui-breakpoint-md:768px;--rarui-breakpoint-lg:1200px;--rarui-breakpoint-xl:1400px}.rarui-theme-dark__t1161z0{--rarui-colors-surface-background:#0c0d0d;--rarui-colors-surface-brand:#026897;--rarui-colors-surface-brand-hover:rgba(3,174,252,.25);--rarui-colors-surface-brand-press:rgba(3,174,252,.35);--rarui-colors-surface-brand-secondary:#292673;--rarui-colors-surface-brand-secondary-hover:rgba(68,64,191,.25);--rarui-colors-surface-brand-secondary-press:rgba(68,64,191,.35);--rarui-colors-surface-brand-secondary-subdued:rgba(68,64,191,.2);--rarui-colors-surface-brand-subdued:rgba(3,174,252,.2);--rarui-colors-surface-disabled:#3d4143;--rarui-colors-surface-error:#ff666b;--rarui-colors-surface-error-hover:rgba(220,42,35,.25);--rarui-colors-surface-error-press:rgba(220,42,35,.35);--rarui-colors-surface-error-subdued:rgba(220,42,35,.2);--rarui-colors-surface-hover:hsla(0,0%,100%,.1);--rarui-colors-surface-info:#68cefd;--rarui-colors-surface-info-hover:rgba(3,174,252,.25);--rarui-colors-surface-info-press:rgba(3,174,252,.35);--rarui-colors-surface-info-subdued:rgba(3,174,252,.2);--rarui-colors-surface-invert:#fff;--rarui-colors-surface-invert-disabled:#e4e6e7;--rarui-colors-surface-invert-hover:rgba(0,0,0,.05);--rarui-colors-surface-invert-press:rgba(0,0,0,.1);--rarui-colors-surface-invert-secondary:#f2f2f3;--rarui-colors-surface-on-brand-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-brand-press:hsla(0,0%,100%,.25);--rarui-colors-surface-on-brand-secondary-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-brand-secondary-press:hsla(0,0%,100%,.3);--rarui-colors-surface-on-error-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-error-press:hsla(0,0%,100%,.3);--rarui-colors-surface-on-info-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-info-press:hsla(0,0%,100%,.4);--rarui-colors-surface-on-success-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-success-press:hsla(0,0%,100%,.3);--rarui-colors-surface-on-warning-hover:rgba(0,0,0,.15);--rarui-colors-surface-on-warning-press:hsla(0,0%,100%,.4);--rarui-colors-surface-overlay:rgba(0,0,0,.65);--rarui-colors-surface-press:hsla(0,0%,100%,.15);--rarui-colors-surface-primary:#181a1b;--rarui-colors-surface-secondary:#27292b;--rarui-colors-surface-success:#62c073;--rarui-colors-surface-success-hover:rgba(26,147,56,.25);--rarui-colors-surface-success-press:rgba(26,147,56,.35);--rarui-colors-surface-success-subdued:rgba(26,147,56,.2);--rarui-colors-surface-warning:#ffbb5c;--rarui-colors-surface-warning-hover:rgba(231,157,19,.25);--rarui-colors-surface-warning-press:rgba(231,157,19,.35);--rarui-colors-surface-warning-subdued:rgba(231,157,19,.2);--rarui-colors-content-brand:#68cefd;--rarui-colors-content-brand-alt:#99defe;--rarui-colors-content-brand-secondary:#8f8cd9;--rarui-colors-content-disabled:hsla(0,0%,100%,.3);--rarui-colors-content-error:#e64c51;--rarui-colors-content-info:#68cefd;--rarui-colors-content-invert:#000;--rarui-colors-content-invert-disabled:rgba(0,0,0,.3);--rarui-colors-content-invert-secondary:rgba(0,0,0,.55);--rarui-colors-content-on-brand:#f5fcff;--rarui-colors-content-on-brand-secondary:#fbfbfe;--rarui-colors-content-on-error:#231011;--rarui-colors-content-on-info:#01344c;--rarui-colors-content-on-success:#0f2e18;--rarui-colors-content-on-warning:#331b00;--rarui-colors-content-primary:#f2f2f3;--rarui-colors-content-secondary:#afb3b6;--rarui-colors-content-success:#c2f9d0;--rarui-colors-content-warning:#ffd08f;--rarui-colors-content-warning-alt:#ffeacc;--rarui-colors-border-brand:#028aca;--rarui-colors-border-brand-alt:#35bdfd;--rarui-colors-border-brand-secondary:#292673;--rarui-colors-border-disabled:hsla(0,0%,100%,.1);--rarui-colors-border-divider:hsla(0,0%,100%,.15);--rarui-colors-border-error:#a3292f;--rarui-colors-border-info:#028aca;--rarui-colors-border-invert:rgba(0,0,0,.2);--rarui-colors-border-invert-disabled:rgba(0,0,0,.05);--rarui-colors-border-primary:hsla(0,0%,100%,.5);--rarui-colors-border-secondary:hsla(0,0%,100%,.3);--rarui-colors-border-subdued:hsla(0,0%,100%,.15);--rarui-colors-border-success:#1a9338;--rarui-colors-border-warning:#866000;--rarui-fontFamily-inter:Inter,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",arial,sans-serif;--rarui-fontSize-hero-caption:4.25rem;--rarui-fontSize-body-xxs:0.6875rem;--rarui-fontSize-body-xs:0.75rem;--rarui-fontSize-body-s:0.875rem;--rarui-fontSize-body-m:1rem;--rarui-fontSize-body-l:1.125rem;--rarui-fontSize-body-xl:1.5rem;--rarui-fontSize-heading-xs:1.25rem;--rarui-fontSize-heading-s:1.25rem;--rarui-fontSize-heading-m:1.75rem;--rarui-fontSize-heading-l:2.375rem;--rarui-fontSize-heading-xl:2.875rem;--rarui-fontSize-button-s:0.875rem;--rarui-fontSize-button-m:0.9375rem;--rarui-fontSize-button-l:1rem;--rarui-fontSize-label-s:0.75rem;--rarui-fontSize-label-m:0.875rem;--rarui-fontSize-label-l:1rem;--rarui-fontWeight-regular:400;--rarui-fontWeight-medium:500;--rarui-fontWeight-semiBold:600;--rarui-fontWeight-bold:700;--rarui-lineWeight-hero-caption:4.375rem;--rarui-lineWeight-body-xxs:0.875rem;--rarui-lineWeight-body-xs:1rem;--rarui-lineWeight-body-s:1.25rem;--rarui-lineWeight-body-m:1.375rem;--rarui-lineWeight-body-l:1.5rem;--rarui-lineWeight-body-xl:2rem;--rarui-lineWeight-heading-xs:1.5rem;--rarui-lineWeight-heading-s:1.75rem;--rarui-lineWeight-heading-m:2rem;--rarui-lineWeight-heading-l:2.75rem;--rarui-lineWeight-heading-xl:3.5rem;--rarui-lineWeight-button-s:normal;--rarui-lineWeight-button-m:normal;--rarui-lineWeight-button-l:normal;--rarui-lineWeight-label-s:normal;--rarui-lineWeight-label-m:normal;--rarui-lineWeight-label-l:normal;--rarui-elevation-none:none;--rarui-elevation-top-1:0px -1px 2px 0px rgba(60,81,93,.4);--rarui-elevation-top-2:0px -4px 8px 0px rgba(60,81,93,.4);--rarui-elevation-top-3:0px -8px 16px 0px rgba(60,81,93,.4);--rarui-elevation-top-4:0px -16px 32px 0px rgba(60,81,93,.4);--rarui-elevation-top-5:0px -24px 64px 0px rgba(60,81,93,.4);--rarui-elevation-bottom-1:0px 1px 2px 0px rgba(60,81,93,.4);--rarui-elevation-bottom-2:0px 4px 8px 0px rgba(60,81,93,.4);--rarui-elevation-bottom-3:0px 8px 16px 0px rgba(60,81,93,.4);--rarui-elevation-bottom-4:0px 16px 32px 0px rgba(60,81,93,.4);--rarui-elevation-bottom-5:0px 24px 64px 0px rgba(60,81,93,.4);--rarui-shape-border-radius-none:0;--rarui-shape-border-radius-2xs:0.25rem;--rarui-shape-border-radius-xs:0.5rem;--rarui-shape-border-radius-sm:1rem;--rarui-shape-border-radius-md:1.5rem;--rarui-shape-border-radius-lg:2rem;--rarui-shape-border-radius-xl:3rem;--rarui-shape-border-radius-2xl:4rem;--rarui-shape-border-radius-pill:31.25rem;--rarui-shape-border-radius-button:0.5rem;--rarui-shape-border-radius-input:0.5rem;--rarui-shape-border-width-1:0.0625rem;--rarui-shape-border-width-2:0.125rem;--rarui-shape-border-width-3:0.1875rem;--rarui-shape-border-width-4:1rem;--rarui-shape-border-width-5:1.25rem;--rarui-spacing-4xs:0.25rem;--rarui-spacing-3xs:0.5rem;--rarui-spacing-2xs:0.75rem;--rarui-spacing-xs:1rem;--rarui-spacing-s:1.5rem;--rarui-spacing-md:2rem;--rarui-spacing-lg:2.5rem;--rarui-spacing-xl:3rem;--rarui-spacing-2xl:3.5rem;--rarui-spacing-3xl:4rem;--rarui-spacing-4xl:5rem;--rarui-spacing-5xl:6rem;--rarui-spacing-6xl:7rem;--rarui-spacing-7xl:7.75rem;--rarui-spacing-8xl:9rem;--rarui-zIndex-100:100;--rarui-zIndex-200:200;--rarui-zIndex-300:300;--rarui-zIndex-400:400;--rarui-zIndex-500:500;--rarui-zIndex-600:600;--rarui-zIndex-700:700;--rarui-zIndex-800:800;--rarui-zIndex-900:900;--rarui-breakpoint-xs:0px;--rarui-breakpoint-md:768px;--rarui-breakpoint-lg:1200px;--rarui-breakpoint-xl:1400px}.rarui-button__1a4hz7a0{align-items:center;border-color:var(--rarui-colors-surface-brand);border-radius:var(--rarui-shape-border-radius-2xs);border-style:solid;border-width:var(--rarui-shape-border-width-1);box-sizing:border-box;cursor:pointer;display:flex;font-family:var(--rarui-fontFamily-inter);font-size:var(--rarui-fontSize-button-l);font-weight:var(--rarui-fontWeight-semiBold);gap:var(--rarui-spacing-4xs);justify-content:center;line-height:var(--rarui-lineWeight-button-l);overflow:hidden;position:relative;text-decoration:none;width:fit-content}.rarui-button__1a4hz7a0:disabled{background:var(--rarui-colors-surface-disabled);border-color:var(--rarui-colors-surface-disabled);color:var(--rarui-colors-content-disabled);cursor:not-allowed}.rarui-button_appearance_brand__1a4hz7a1{background-color:var(--rarui-colors-surface-brand);border-color:var(--rarui-colors-surface-brand);color:var(--rarui-colors-content-on-brand)}.rarui-button_appearance_brand-secondary__1a4hz7a2{background-color:var(--rarui-colors-surface-brand-secondary);border-color:var(--rarui-colors-surface-brand-secondary);color:var(--rarui-colors-content-on-brand-secondary)}.rarui-button_appearance_danger__1a4hz7a3{background-color:var(--rarui-colors-surface-error);border-color:var(--rarui-colors-surface-error);color:var(--rarui-colors-content-on-error)}.rarui-button_appearance_success__1a4hz7a4{background-color:var(--rarui-colors-surface-success);border-color:var(--rarui-colors-surface-success);color:var(--rarui-colors-content-on-success)}.rarui-button_appearance_warning__1a4hz7a5{background-color:var(--rarui-colors-surface-warning);border-color:var(--rarui-colors-surface-warning);color:var(--rarui-colors-content-on-warning)}.rarui-button_appearance_neutral__1a4hz7a6{background-color:var(--rarui-colors-surface-invert);border-color:var(--rarui-colors-surface-invert);color:var(--rarui-colors-content-invert)}.rarui-button_appearance_inverted__1a4hz7a7{background-color:var(--rarui-colors-surface-primary);border-color:var(--rarui-colors-surface-primary);color:var(--rarui-colors-content-primary)}.rarui-button_size_large__1a4hz7a8{font-size:var(--rarui-fontSize-button-l);height:3rem;padding:var(--rarui-spacing-xs)}.rarui-button_size_medium__1a4hz7a9{font-size:var(--rarui-fontSize-button-m);height:2.75rem;padding:var(--rarui-spacing-xs)}.rarui-button_size_small__1a4hz7aa{font-size:var(--rarui-fontSize-button-s);height:2rem;padding:var(--rarui-spacing-3xs)}.rarui-button_variant_outlined__1a4hz7ac{background-color:transparent}.rarui-button_variant_text__1a4hz7ad{background-color:transparent;border:none;border-radius:var(--rarui-shape-border-radius-button);text-decoration:underline}.rarui-button_variant_text__1a4hz7ad:hover{border-radius:var(--rarui-shape-border-radius-button)}.rarui-button_variant_text__1a4hz7ad:active{border-radius:var(--rarui-shape-border-radius-button)}.rarui-button_variant_tonal__1a4hz7ae{border:none;border-radius:var(--rarui-shape-border-radius-button)}.rarui-button_undefined_compound_0__1a4hz7af{border-color:var(--rarui-colors-border-brand);color:var(--rarui-colors-content-brand)}.rarui-button_undefined_compound_0__1a4hz7af:hover{background-color:var(--rarui-colors-surface-brand-hover)}.rarui-button_undefined_compound_0__1a4hz7af:active{background-color:var(--rarui-colors-surface-brand-press)}.rarui-button_undefined_compound_1__1a4hz7ag{border-color:var(--rarui-colors-border-brand-secondary);color:var(--rarui-colors-content-brand-secondary)}.rarui-button_undefined_compound_1__1a4hz7ag:hover{background-color:var(--rarui-colors-surface-brand-secondary-hover)}.rarui-button_undefined_compound_1__1a4hz7ag:active{background-color:var(--rarui-colors-surface-brand-secondary-press)}.rarui-button_undefined_compound_2__1a4hz7ah{border-color:var(--rarui-colors-border-error);color:var(--rarui-colors-content-error)}.rarui-button_undefined_compound_2__1a4hz7ah:hover{background-color:var(--rarui-colors-surface-error-hover)}.rarui-button_undefined_compound_2__1a4hz7ah:active{background-color:var(--rarui-colors-surface-error-press)}.rarui-button_undefined_compound_3__1a4hz7ai{border-color:var(--rarui-colors-border-success);color:var(--rarui-colors-content-success)}.rarui-button_undefined_compound_3__1a4hz7ai:hover{background-color:var(--rarui-colors-surface-success-hover)}.rarui-button_undefined_compound_3__1a4hz7ai:active{background-color:var(--rarui-colors-surface-success-press)}.rarui-button_undefined_compound_4__1a4hz7aj{border-color:var(--rarui-colors-border-warning);color:var(--rarui-colors-content-warning)}.rarui-button_undefined_compound_4__1a4hz7aj:hover{background-color:var(--rarui-colors-surface-warning-hover)}.rarui-button_undefined_compound_4__1a4hz7aj:active{background-color:var(--rarui-colors-surface-warning-press)}.rarui-button_undefined_compound_5__1a4hz7ak{border-color:var(--rarui-colors-border-secondary);color:var(--rarui-colors-content-primary)}.rarui-button_undefined_compound_5__1a4hz7ak:hover{background-color:var(--rarui-colors-surface-hover)}.rarui-button_undefined_compound_5__1a4hz7ak:active{background-color:var(--rarui-colors-surface-press)}.rarui-button_undefined_compound_6__1a4hz7al{border-color:var(--rarui-colors-border-invert);color:var(--rarui-colors-content-invert)}.rarui-button_undefined_compound_6__1a4hz7al:hover{background-color:var(--rarui-colors-surface-invert-hover)}.rarui-button_undefined_compound_6__1a4hz7al:active{background-color:var(--rarui-colors-surface-invert-press)}.rarui-button_undefined_compound_7__1a4hz7am{color:var(--rarui-colors-content-brand)}.rarui-button_undefined_compound_7__1a4hz7am:hover{background-color:var(--rarui-colors-surface-brand-hover)}.rarui-button_undefined_compound_7__1a4hz7am:active{background-color:var(--rarui-colors-surface-brand-press)}.rarui-button_undefined_compound_8__1a4hz7an{color:var(--rarui-colors-content-brand-secondary)}.rarui-button_undefined_compound_8__1a4hz7an:hover{background-color:var(--rarui-colors-surface-brand-secondary-hover)}.rarui-button_undefined_compound_8__1a4hz7an:active{background-color:var(--rarui-colors-surface-brand-secondary-press)}.rarui-button_undefined_compound_9__1a4hz7ao{color:var(--rarui-colors-content-error)}.rarui-button_undefined_compound_9__1a4hz7ao:hover{background-color:var(--rarui-colors-surface-error-hover)}.rarui-button_undefined_compound_9__1a4hz7ao:active{background-color:var(--rarui-colors-surface-error-press)}.rarui-button_undefined_compound_10__1a4hz7ap{color:var(--rarui-colors-content-success)}.rarui-button_undefined_compound_10__1a4hz7ap:hover{background-color:var(--rarui-colors-surface-success-hover)}.rarui-button_undefined_compound_10__1a4hz7ap:active{background-color:var(--rarui-colors-surface-success-press)}.rarui-button_undefined_compound_11__1a4hz7aq{color:var(--rarui-colors-content-warning)}.rarui-button_undefined_compound_11__1a4hz7aq:hover{background-color:var(--rarui-colors-surface-warning-hover)}.rarui-button_undefined_compound_11__1a4hz7aq:active{background-color:var(--rarui-colors-surface-warning-press)}.rarui-button_undefined_compound_12__1a4hz7ar{color:var(--rarui-colors-content-primary)}.rarui-button_undefined_compound_12__1a4hz7ar:hover{background-color:var(--rarui-colors-surface-hover)}.rarui-button_undefined_compound_12__1a4hz7ar:active{background-color:var(--rarui-colors-surface-press)}.rarui-button_undefined_compound_13__1a4hz7as{color:var(--rarui-colors-content-invert)}.rarui-button_undefined_compound_13__1a4hz7as:hover{background-color:var(--rarui-colors-surface-invert-hover)}.rarui-button_undefined_compound_13__1a4hz7as:active{background-color:var(--rarui-colors-surface-invert-press)}.rarui-button_undefined_compound_14__1a4hz7at{background-color:var(--rarui-colors-surface-brand-subdued);color:var(--rarui-colors-content-brand)}.rarui-button_undefined_compound_14__1a4hz7at:hover{background-color:var(--rarui-colors-surface-brand-hover)}.rarui-button_undefined_compound_14__1a4hz7at:active{background-color:var(--rarui-colors-surface-brand-press)}.rarui-button_undefined_compound_15__1a4hz7au{background-color:var(--rarui-colors-surface-brand-secondary-subdued);color:var(--rarui-colors-content-brand-secondary)}.rarui-button_undefined_compound_15__1a4hz7au:hover{background-color:var(--rarui-colors-surface-brand-secondary-hover)}.rarui-button_undefined_compound_15__1a4hz7au:active{background-color:var(--rarui-colors-surface-brand-secondary-press)}.rarui-button_undefined_compound_16__1a4hz7av{background-color:var(--rarui-colors-surface-error-subdued);color:var(--rarui-colors-content-error)}.rarui-button_undefined_compound_16__1a4hz7av:hover{background-color:var(--rarui-colors-surface-error-hover)}.rarui-button_undefined_compound_16__1a4hz7av:active{background-color:var(--rarui-colors-surface-error-press)}.rarui-button_undefined_compound_17__1a4hz7aw{background-color:var(--rarui-colors-surface-success-subdued);color:var(--rarui-colors-content-success)}.rarui-button_undefined_compound_17__1a4hz7aw:hover{background-color:var(--rarui-colors-surface-success-hover)}.rarui-button_undefined_compound_17__1a4hz7aw:active{background-color:var(--rarui-colors-surface-success-press)}.rarui-button_undefined_compound_18__1a4hz7ax{background-color:var(--rarui-colors-surface-warning-subdued);color:var(--rarui-colors-content-warning)}.rarui-button_undefined_compound_18__1a4hz7ax:hover{background-color:var(--rarui-colors-surface-warning-hover)}.rarui-button_undefined_compound_18__1a4hz7ax:active{background-color:var(--rarui-colors-surface-warning-press)}.rarui-button_undefined_compound_19__1a4hz7ay{background-color:var(--rarui-colors-surface-secondary);color:var(--rarui-colors-content-primary)}.rarui-button_undefined_compound_19__1a4hz7ay:hover{background-color:var(--rarui-colors-surface-hover)}.rarui-button_undefined_compound_19__1a4hz7ay:active{background-color:var(--rarui-colors-surface-press)}.rarui-button_undefined_compound_20__1a4hz7az{background-color:var(--rarui-colors-surface-invert-secondary);color:var(--rarui-colors-content-brand)}.rarui-button_undefined_compound_20__1a4hz7az:hover{background-color:var(--rarui-colors-surface-brand-hover)}.rarui-button_undefined_compound_20__1a4hz7az:active{background-color:var(--rarui-colors-surface-brand-press)}.rarui-button__1a4hz7a10{border-radius:var(--rarui-shape-border-radius-2xs);bottom:-1px;left:-1px;opacity:0;pointer-events:none;position:absolute;right:-1px;top:-1px}.rarui-button__1a4hz7a0:hover .rarui-button__1a4hz7a10{background-color:var(--rarui-colors-surface-on-brand-hover);border-color:var(--rarui-colors-surface-on-brand-hover);opacity:1}.rarui-button__1a4hz7a0:active .rarui-button__1a4hz7a10{background-color:var(--rarui-colors-surface-on-brand-press);border-color:var(--rarui-colors-surface-on-brand-press);opacity:1}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,185 @@
+// Generated by dts-bundle-generator v9.3.1
+import { RecipeVariants } from '@vanilla-extract/recipes';
+import React$1 from 'react';
+import { HTMLAttributes, MutableRefObject } from 'react';
+export type Theme = "dark" | "base";
+export interface ThemeProviderProperties {
+	theme?: Theme;
+}
+export type ThemeProviderProps = ThemeProviderProperties & React$1.HTMLAttributes<HTMLElement>;
+export declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
+export interface ThemeProviderContextProps {
+	refThemeProvider: React$1.MutableRefObject<null | HTMLDivElement>;
+	currentTheme: Theme;
+}
+export declare const useTheme: () => ThemeProviderContextProps;
+declare const button: import("@vanilla-extract/recipes").RuntimeFn<{
+	appearance: {
+		brand: {
+			backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		"brand-secondary": {
+			backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		danger: {
+			backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		success: {
+			backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		warning: {
+			backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		neutral: {
+			backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		inverted: {
+			backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+	};
+	size: {
+		large: {
+			padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			height: "3rem";
+			fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		medium: {
+			padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			height: "2.75rem";
+			fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+		small: {
+			padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			height: "2rem";
+			fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+	};
+	variant: {
+		solid: {};
+		outlined: {
+			backgroundColor: "transparent";
+		};
+		text: {
+			backgroundColor: "transparent";
+			textDecoration: "underline";
+			border: "none";
+			borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			":hover": {
+				borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+			":active": {
+				borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+			};
+		};
+		tonal: {
+			border: "none";
+			borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+		};
+	};
+}>;
+export type ButtonVariants = RecipeVariants<typeof button>;
+declare const button$1: {
+	classnames: {
+		button: import("@vanilla-extract/recipes").RuntimeFn<{
+			appearance: {
+				brand: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				"brand-secondary": {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				danger: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				success: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				warning: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				neutral: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				inverted: {
+					backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+			};
+			size: {
+				large: {
+					padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					height: "3rem";
+					fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				medium: {
+					padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					height: "2.75rem";
+					fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+				small: {
+					padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					height: "2rem";
+					fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+			};
+			variant: {
+				solid: {};
+				outlined: {
+					backgroundColor: "transparent";
+				};
+				text: {
+					backgroundColor: "transparent";
+					textDecoration: "underline";
+					border: "none";
+					borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					":hover": {
+						borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+					":active": {
+						borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+					};
+				};
+				tonal: {
+					border: "none";
+					borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+				};
+			};
+		}>;
+		overlay: string;
+	};
+};
+export {
+	button$1 as button,
+};
+export {};

package/dist/index.js ADDED Viewed

@@ -0,0 +1 @@

+ !function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("react")):"function"==typeof define&&define.amd?define(["react"],r):"object"==typeof exports?exports["@rarui/styles"]=r(require("react")):e["@rarui/styles"]=r(e.react)}(global,(e=>(()=>{"use strict";var r={4:(e,r,t)=>{t.r(r),t.d(r,{button:()=>l,overlay:()=>f});t(225);function n(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==typeof r?r:String(r)}function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){var a,o,i;a=e,o=r,i=t[r],(o=n(o))in a?Object.defineProperty(a,o,{value:i,enumerable:!0,configurable:!0,writable:!0}):a[o]=i})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function i(e,r){var t={};for(var n in e)t[n]=r(e[n],n);return t}var u,c,s=(e,r,t)=>{for(var n of Object.keys(e)){var a;if(e[n]!==(null!==(a=r[n])&&void 0!==a?a:t[n]))return!1}return!0},l=(u={defaultClassName:"rarui-button__1a4hz7a0",variantClassNames:{appearance:{brand:"rarui-button_appearance_brand__1a4hz7a1","brand-secondary":"rarui-button_appearance_brand-secondary__1a4hz7a2",danger:"rarui-button_appearance_danger__1a4hz7a3",success:"rarui-button_appearance_success__1a4hz7a4",warning:"rarui-button_appearance_warning__1a4hz7a5",neutral:"rarui-button_appearance_neutral__1a4hz7a6",inverted:"rarui-button_appearance_inverted__1a4hz7a7"},size:{large:"rarui-button_size_large__1a4hz7a8",medium:"rarui-button_size_medium__1a4hz7a9",small:"rarui-button_size_small__1a4hz7aa"},variant:{solid:"rarui-button_variant_solid__1a4hz7ab",outlined:"rarui-button_variant_outlined__1a4hz7ac",text:"rarui-button_variant_text__1a4hz7ad",tonal:"rarui-button_variant_tonal__1a4hz7ae"}},defaultVariants:{},compoundVariants:[[{appearance:"brand",variant:"outlined"},"rarui-button_undefined_compound_0__1a4hz7af"],[{appearance:"brand-secondary",variant:"outlined"},"rarui-button_undefined_compound_1__1a4hz7ag"],[{appearance:"danger",variant:"outlined"},"rarui-button_undefined_compound_2__1a4hz7ah"],[{appearance:"success",variant:"outlined"},"rarui-button_undefined_compound_3__1a4hz7ai"],[{appearance:"warning",variant:"outlined"},"rarui-button_undefined_compound_4__1a4hz7aj"],[{appearance:"neutral",variant:"outlined"},"rarui-button_undefined_compound_5__1a4hz7ak"],[{appearance:"inverted",variant:"outlined"},"rarui-button_undefined_compound_6__1a4hz7al"],[{appearance:"brand",variant:"text"},"rarui-button_undefined_compound_7__1a4hz7am"],[{appearance:"brand-secondary",variant:"text"},"rarui-button_undefined_compound_8__1a4hz7an"],[{appearance:"danger",variant:"text"},"rarui-button_undefined_compound_9__1a4hz7ao"],[{appearance:"success",variant:"text"},"rarui-button_undefined_compound_10__1a4hz7ap"],[{appearance:"warning",variant:"text"},"rarui-button_undefined_compound_11__1a4hz7aq"],[{appearance:"neutral",variant:"text"},"rarui-button_undefined_compound_12__1a4hz7ar"],[{appearance:"inverted",variant:"text"},"rarui-button_undefined_compound_13__1a4hz7as"],[{appearance:"brand",variant:"tonal"},"rarui-button_undefined_compound_14__1a4hz7at"],[{appearance:"brand-secondary",variant:"tonal"},"rarui-button_undefined_compound_15__1a4hz7au"],[{appearance:"danger",variant:"tonal"},"rarui-button_undefined_compound_16__1a4hz7av"],[{appearance:"success",variant:"tonal"},"rarui-button_undefined_compound_17__1a4hz7aw"],[{appearance:"warning",variant:"tonal"},"rarui-button_undefined_compound_18__1a4hz7ax"],[{appearance:"neutral",variant:"tonal"},"rarui-button_undefined_compound_19__1a4hz7ay"],[{appearance:"brand",variant:"tonal"},"rarui-button_undefined_compound_20__1a4hz7az"]]},(c=e=>{var r=u.defaultClassName,t=o(o({},u.defaultVariants),e);for(var n in t){var a,i=null!==(a=t[n])&&void 0!==a?a:u.defaultVariants[n];if(null!=i){var c=i;"boolean"==typeof c&&(c=!0===c?"true":"false");var l=u.variantClassNames[n][c];l&&(r+=" "+l)}}for(var[f,_]of u.compoundVariants)s(f,t,u.defaultVariants)&&(r+=" "+_);return r}).variants=()=>Object.keys(u.variantClassNames),c.classNames={get base(){return u.defaultClassName.split(" ")[0]},get variants(){return i(u.variantClassNames,(e=>i(e,(e=>e.split(" ")[0]))))}},c),f="rarui-button__1a4hz7a10"},61:(e,r,t)=>{t.r(r),t.d(r,{default:()=>a,variables:()=>n});t(225);var n="rarui-theme-dark__t1161z0";const a="rarui-theme-dark__t1161z0"},225:()=>{},280:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.ThemeProvider=void 0;const n=t(608).__importStar(t(155)),a=t(272),o=t(761),i=({children:e,theme:r="base",...t})=>{const i=n.default.useRef(null),u=(0,n.useMemo)((()=>({refThemeProvider:i,currentTheme:r})),[i,r]);return n.default.createElement("div",{className:a.themes[r],...t,ref:i},n.default.createElement(o.ThemeProviderContext.Provider,{value:u},e))};r.ThemeProvider=i,i.displayName="ThemeProvider"},414:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.ThemeProviderContext=void 0;const n=t(155);r.ThemeProviderContext=(0,n.createContext)({})},105:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.ThemeProviderContext=void 0;const n=t(414);var a=t(414);Object.defineProperty(r,"ThemeProviderContext",{enumerable:!0,get:function(){return a.ThemeProviderContext}}),r.default=n.ThemeProviderContext},761:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0});t(608).__exportStar(t(105),r)},675:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.useTheme=void 0;var n=t(496);Object.defineProperty(r,"useTheme",{enumerable:!0,get:function(){return n.useTheme}})},496:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.useTheme=void 0;var n=t(370);Object.defineProperty(r,"useTheme",{enumerable:!0,get:function(){return n.useTheme}})},370:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.useTheme=void 0;const n=t(155),a=t(761);r.useTheme=()=>(0,n.useContext)(a.ThemeProviderContext)},240:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.useTheme=r.ThemeProvider=void 0;const n=t(280);var a=t(280);Object.defineProperty(r,"ThemeProvider",{enumerable:!0,get:function(){return a.ThemeProvider}});var o=t(675);Object.defineProperty(r,"useTheme",{enumerable:!0,get:function(){return o.useTheme}}),r.default=n.ThemeProvider},272:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.themes=void 0;const n=t(61);r.themes={dark:n.variables,base:""}},783:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.button=void 0;t(608).__exportStar(t(240),r);var n=t(976);Object.defineProperty(r,"button",{enumerable:!0,get:function(){return n.button}})},976:(e,r,t)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.button=void 0;const n=t(608).__importStar(t(4));r.button={classnames:{...n}}},155:r=>{r.exports=e},608:(e,r,t)=>{t.r(r),t.d(r,{__addDisposableResource:()=>I,__assign:()=>o,__asyncDelegator:()=>x,__asyncGenerator:()=>j,__asyncValues:()=>T,__await:()=>P,__awaiter:()=>p,__classPrivateFieldGet:()=>k,__classPrivateFieldIn:()=>M,__classPrivateFieldSet:()=>D,__createBinding:()=>b,__decorate:()=>u,__disposeResources:()=>R,__esDecorate:()=>s,__exportStar:()=>y,__extends:()=>a,__generator:()=>v,__importDefault:()=>C,__importStar:()=>E,__makeTemplateObject:()=>z,__metadata:()=>d,__param:()=>c,__propKey:()=>f,__read:()=>m,__rest:()=>i,__runInitializers:()=>l,__setFunctionName:()=>_,__spread:()=>w,__spreadArray:()=>O,__spreadArrays:()=>g,__values:()=>h,default:()=>A});var n=function(e,r){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,r){e.__proto__=r}||function(e,r){for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])},n(e,r)};function a(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Class extends value "+String(r)+" is not a constructor or null");function t(){this.constructor=e}n(e,r),e.prototype=null===r?Object.create(r):(t.prototype=r.prototype,new t)}var o=function(){return o=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},o.apply(this,arguments)};function i(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)r.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]])}return t}function u(e,r,t,n){var a,o=arguments.length,i=o<3?r:null===n?n=Object.getOwnPropertyDescriptor(r,t):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,r,t,n);else for(var u=e.length-1;u>=0;u--)(a=e[u])&&(i=(o<3?a(i):o>3?a(r,t,i):a(r,t))||i);return o>3&&i&&Object.defineProperty(r,t,i),i}function c(e,r){return function(t,n){r(t,n,e)}}function s(e,r,t,n,a,o){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var u,c=n.kind,s="getter"===c?"get":"setter"===c?"set":"value",l=!r&&e?n.static?e:e.prototype:null,f=r||(l?Object.getOwnPropertyDescriptor(l,n.name):{}),_=!1,d=t.length-1;d>=0;d--){var p={};for(var v in n)p[v]="access"===v?{}:n[v];for(var v in n.access)p.access[v]=n.access[v];p.addInitializer=function(e){if(_)throw new TypeError("Cannot add initializers after decoration has completed");o.push(i(e||null))};var b=(0,t[d])("accessor"===c?{get:f.get,set:f.set}:f[s],p);if("accessor"===c){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(u=i(b.get))&&(f.get=u),(u=i(b.set))&&(f.set=u),(u=i(b.init))&&a.unshift(u)}else(u=i(b))&&("field"===c?a.unshift(u):f[s]=u)}l&&Object.defineProperty(l,n.name,f),_=!0}function l(e,r,t){for(var n=arguments.length>2,a=0;a<r.length;a++)t=n?r[a].call(e,t):r[a].call(e);return n?t:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function _(e,r,t){return"symbol"==typeof r&&(r=r.description?"[".concat(r.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:t?"".concat(t," ",r):r})}function d(e,r){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,r)}function p(e,r,t,n){return new(t||(t=Promise))((function(a,o){function i(e){try{c(n.next(e))}catch(e){o(e)}}function u(e){try{c(n.throw(e))}catch(e){o(e)}}function c(e){var r;e.done?a(e.value):(r=e.value,r instanceof t?r:new t((function(e){e(r)}))).then(i,u)}c((n=n.apply(e,r||[])).next())}))}function v(e,r){var t,n,a,o,i={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:u(0),throw:u(1),return:u(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function u(u){return function(c){return function(u){if(t)throw new TypeError("Generator is already executing.");for(;o&&(o=0,u[0]&&(i=0)),i;)try{if(t=1,n&&(a=2&u[0]?n.return:u[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,u[1])).done)return a;switch(n=0,a&&(u=[2&u[0],a.value]),u[0]){case 0:case 1:a=u;break;case 4:return i.label++,{value:u[1],done:!1};case 5:i.label++,n=u[1],u=[0];continue;case 7:u=i.ops.pop(),i.trys.pop();continue;default:if(!(a=i.trys,(a=a.length>0&&a[a.length-1])||6!==u[0]&&2!==u[0])){i=0;continue}if(3===u[0]&&(!a||u[1]>a[0]&&u[1]<a[3])){i.label=u[1];break}if(6===u[0]&&i.label<a[1]){i.label=a[1],a=u;break}if(a&&i.label<a[2]){i.label=a[2],i.ops.push(u);break}a[2]&&i.ops.pop(),i.trys.pop();continue}u=r.call(e,i)}catch(e){u=[6,e],n=0}finally{t=a=0}if(5&u[0])throw u[1];return{value:u[0]?u[1]:void 0,done:!0}}([u,c])}}}var b=Object.create?function(e,r,t,n){void 0===n&&(n=t);var a=Object.getOwnPropertyDescriptor(r,t);a&&!("get"in a?!r.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,n,a)}:function(e,r,t,n){void 0===n&&(n=t),e[n]=r[t]};function y(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||b(r,e,t)}function h(e){var r="function"==typeof Symbol&&Symbol.iterator,t=r&&e[r],n=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(r?"Object is not iterable.":"Symbol.iterator is not defined.")}function m(e,r){var t="function"==typeof Symbol&&e[Symbol.iterator];if(!t)return e;var n,a,o=t.call(e),i=[];try{for(;(void 0===r||r-- >0)&&!(n=o.next()).done;)i.push(n.value)}catch(e){a={error:e}}finally{try{n&&!n.done&&(t=o.return)&&t.call(o)}finally{if(a)throw a.error}}return i}function w(){for(var e=[],r=0;r<arguments.length;r++)e=e.concat(m(arguments[r]));return e}function g(){for(var e=0,r=0,t=arguments.length;r<t;r++)e+=arguments[r].length;var n=Array(e),a=0;for(r=0;r<t;r++)for(var o=arguments[r],i=0,u=o.length;i<u;i++,a++)n[a]=o[i];return n}function O(e,r,t){if(t||2===arguments.length)for(var n,a=0,o=r.length;a<o;a++)!n&&a in r||(n||(n=Array.prototype.slice.call(r,0,a)),n[a]=r[a]);return e.concat(n||Array.prototype.slice.call(r))}function P(e){return this instanceof P?(this.v=e,this):new P(e)}function j(e,r,t){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,a=t.apply(e,r||[]),o=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){a[e]&&(n[e]=function(r){return new Promise((function(t,n){o.push([e,r,t,n])>1||u(e,r)}))})}function u(e,r){try{(t=a[e](r)).value instanceof P?Promise.resolve(t.value.v).then(c,s):l(o[0][2],t)}catch(e){l(o[0][3],e)}var t}function c(e){u("next",e)}function s(e){u("throw",e)}function l(e,r){e(r),o.shift(),o.length&&u(o[0][0],o[0][1])}}function x(e){var r,t;return r={},n("next"),n("throw",(function(e){throw e})),n("return"),r[Symbol.iterator]=function(){return this},r;function n(n,a){r[n]=e[n]?function(r){return(t=!t)?{value:P(e[n](r)),done:!1}:a?a(r):r}:a}}function T(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var r,t=e[Symbol.asyncIterator];return t?t.call(e):(e=h(e),r={},n("next"),n("throw"),n("return"),r[Symbol.asyncIterator]=function(){return this},r);function n(t){r[t]=e[t]&&function(r){return new Promise((function(n,a){(function(e,r,t,n){Promise.resolve(n).then((function(r){e({value:r,done:t})}),r)})(n,a,(r=e[t](r)).done,r.value)}))}}}function z(e,r){return Object.defineProperty?Object.defineProperty(e,"raw",{value:r}):e.raw=r,e}var S=Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r};function E(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&b(r,e,t);return S(r,e),r}function C(e){return e&&e.__esModule?e:{default:e}}function k(e,r,t,n){if("a"===t&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?e!==r||!n:!r.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?n:"a"===t?n.call(e):n?n.value:r.get(e)}function D(e,r,t,n,a){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?e!==r||!a:!r.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(e,t):a?a.value=t:r.set(e,t),t}function M(e,r){if(null===r||"object"!=typeof r&&"function"!=typeof r)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?r===e:e.has(r)}function I(e,r,t){if(null!=r){if("object"!=typeof r&&"function"!=typeof r)throw new TypeError("Object expected.");var n;if(t){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");n=r[Symbol.asyncDispose]}if(void 0===n){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");n=r[Symbol.dispose]}if("function"!=typeof n)throw new TypeError("Object not disposable.");e.stack.push({value:r,dispose:n,async:t})}else t&&e.stack.push({async:!0});return r}var N="function"==typeof SuppressedError?SuppressedError:function(e,r,t){var n=new Error(t);return n.name="SuppressedError",n.error=e,n.suppressed=r,n};function R(e){function r(r){e.error=e.hasError?new N(r,e.error,"An error was suppressed during disposal."):r,e.hasError=!0}return function t(){for(;e.stack.length;){var n=e.stack.pop();try{var a=n.dispose&&n.dispose.call(n.value);if(n.async)return Promise.resolve(a).then(t,(function(e){return r(e),t()}))}catch(e){r(e)}}if(e.hasError)throw e.error}()}const A={__extends:a,__assign:o,__rest:i,__decorate:u,__param:c,__metadata:d,__awaiter:p,__generator:v,__createBinding:b,__exportStar:y,__values:h,__read:m,__spread:w,__spreadArrays:g,__spreadArray:O,__await:P,__asyncGenerator:j,__asyncDelegator:x,__asyncValues:T,__makeTemplateObject:z,__importStar:E,__importDefault:C,__classPrivateFieldGet:k,__classPrivateFieldSet:D,__classPrivateFieldIn:M,__addDisposableResource:I,__disposeResources:R}}},t={};function n(e){var a=t[e];if(void 0!==a)return a.exports;var o=t[e]={exports:{}};return r[e](o,o.exports,n),o.exports}return n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(783)})()));

package/dist/styles.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/themes/dark.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/themes/dark.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+// Generated by dts-bundle-generator v9.3.1
+export declare const variables: string;
+export {
+	variables as default,
+};
+export {};

package/dist/themes/dark.js ADDED Viewed

@@ -0,0 +1 @@

+ !function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r():"function"==typeof define&&define.amd?define([],r):"object"==typeof exports?exports["@rarui/styles"]=r():e["@rarui/styles"]=r()}(global,(()=>(()=>{"use strict";var e={225:()=>{}},r={};function t(o){var a=r[o];if(void 0!==a)return a.exports;var n=r[o]={exports:{}};return e[o](n,n.exports,t),n.exports}t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{t.r(o),t.d(o,{default:()=>r,variables:()=>e});t(225);var e="rarui-theme-dark__t1161z0";const r="rarui-theme-dark__t1161z0"})(),o})()));

package/package.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "@rarui/styles",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "scripts": {
+    "build": "webpack",
+    "clean": "rm -rf dist",
+    "version": "yarn version"
+  },
+  "homepage": "https://github.com/juniorconquista/boilerplate-design-system",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/juniorconquista/boilerplate-design-system.git"
+  },
+  "bugs": {
+    "url": "https://github.com/juniorconquista/boilerplate-design-system/issues"
+  },
+  "devDependencies": {
+    "@rarui/tokens": "workspace:^",
+    "@rarui/webpack": "workspace:^",
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/dynamic": "^2.1.0",
+    "@vanilla-extract/recipes": "^0.5.2",
+    "@vanilla-extract/sprinkles": "^1.6.1",
+    "rainbow-sprinkles": "^0.17.1",
+    "webpack": "^5.90.3",
+    "webpack-merge": "^5.10.0",
+    "webpack-shell-plugin-next": "^2.3.1"
+  },
+  "stableVersion": "0.0.0"
+}

package/src/components/ThemeProvider.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import React, { useMemo } from "react";
+import { themes } from "./themeProvider.definitions";
+import { ThemeProviderProps } from "./themeProvider.types";
+import { ThemeProviderContext } from "./contexts";
+const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  theme = "base",
+  ...rest
+}) => {
+  const refThemeProvider = React.useRef(null);
+  const context = useMemo(
+    () => ({ refThemeProvider, currentTheme: theme }),
+    [refThemeProvider, theme],
+  );
+  return (
+    <div className={themes[theme]} {...rest} ref={refThemeProvider}>
+      <ThemeProviderContext.Provider value={context}>
+        {children}
+      </ThemeProviderContext.Provider>
+    </div>
+  );
+};
+ThemeProvider.displayName = "ThemeProvider";
+export { ThemeProvider };

package/src/components/contexts/ThemeProviderContext/ThemeProviderContext.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { ThemeProviderContextProps } from "./themeProviderContext.types";
+export const ThemeProviderContext = createContext<ThemeProviderContextProps>(
+  {} as ThemeProviderContextProps,
+);

package/src/components/contexts/ThemeProviderContext/index.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { ThemeProviderContext } from "./ThemeProviderContext";
+export { ThemeProviderContext } from "./ThemeProviderContext";
+export type { ThemeProviderContextProps } from "./themeProviderContext.types";
+export default ThemeProviderContext;

package/src/components/contexts/ThemeProviderContext/themeProviderContext.types.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { MutableRefObject } from "react";
+import { Theme } from "../../themeProvider.types";
+export interface ThemeProviderContextProps {
+  refThemeProvider: MutableRefObject<null | HTMLDivElement>;
+  currentTheme: Theme;
+}

package/src/components/contexts/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from "./ThemeProviderContext";

package/src/components/hooks/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { useTheme } from "./useTheme";

package/src/components/hooks/useTheme/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { useTheme } from "./useTheme";

package/src/components/hooks/useTheme/useTheme.spec.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import React from "react";
+import { renderHook } from "@testing-library/react";
+import { useTheme } from "./useTheme";
+import { ThemeProvider } from "../../ThemeProvider";
+import { Theme } from "../../themeProvider.types";
+const makeSut = (theme?: Theme) =>
+  renderHook(() => useTheme(), {
+    wrapper: ({ children }: { children: React.ReactNode }) => (
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    ),
+  });
+describe("GIVEN useTheme", () => {
+  describe("WHEN the hook runs", () => {
+    it("THEN should correctly return currentTheme default", () => {
+      const { result } = makeSut();
+      expect(result.current.currentTheme).toEqual("base");
+    });
+    it("THEN should correctly return currentTheme dark", () => {
+      const { result } = makeSut("dark");
+      expect(result.current.currentTheme).toEqual("dark");
+    });
+  });
+});

package/src/components/hooks/useTheme/useTheme.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import {
+  ThemeProviderContext,
+  ThemeProviderContextProps,
+} from "../../contexts";
+export const useTheme: () => ThemeProviderContextProps = () =>
+  useContext(ThemeProviderContext);

package/src/components/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { ThemeProvider } from "./ThemeProvider";
+export { ThemeProvider } from "./ThemeProvider";
+export { useTheme } from "./hooks";
+export type { ThemeProviderProps } from "./themeProvider.types";
+export default ThemeProvider;

package/src/components/themeProvider.definitions.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { variables as variablesDark } from "../themes/rarui-theme-dark.css";
+export const themes = {
+  dark: variablesDark,
+  base: "",
+};