@flightlesslabs/dodo-ui 0.1.1 → 0.1.3

package/src/lib/styles/_colors.css

@@ -0,0 +1,171 @@
+:root {
+  /* Base colors */
+  --dodo-color-black: var(--dodo-color-base-black);
+  --dodo-color-white: var(--dodo-color-base-white);
+
+  /* Base colors constants */
+  --dodo-color-constant-black: var(--dodo-color-base-black);
+  --dodo-color-constant-white: var(--dodo-color-base-white);
+
+  /* Default color */
+  --dodo-color-default-50: var(--dodo-color-base-slate-50);
+  --dodo-color-default-100: var(--dodo-color-base-slate-100);
+  --dodo-color-default-200: var(--dodo-color-base-slate-200);
+  --dodo-color-default-300: var(--dodo-color-base-slate-300);
+  --dodo-color-default-400: var(--dodo-color-base-slate-400);
+  --dodo-color-default-500: var(--dodo-color-base-slate-500);
+  --dodo-color-default-600: var(--dodo-color-base-slate-600);
+  --dodo-color-default-700: var(--dodo-color-base-slate-700);
+  --dodo-color-default-800: var(--dodo-color-base-slate-800);
+  --dodo-color-default-900: var(--dodo-color-base-slate-900);
+  --dodo-color-default-950: var(--dodo-color-base-slate-950);
+
+  /* Primary color */
+  --dodo-color-primary-50: var(--dodo-color-base-violet-50);
+  --dodo-color-primary-100: var(--dodo-color-base-violet-100);
+  --dodo-color-primary-200: var(--dodo-color-base-violet-200);
+  --dodo-color-primary-300: var(--dodo-color-base-violet-300);
+  --dodo-color-primary-400: var(--dodo-color-base-violet-400);
+  --dodo-color-primary-500: var(--dodo-color-base-violet-500);
+  --dodo-color-primary-600: var(--dodo-color-base-violet-600);
+  --dodo-color-primary-700: var(--dodo-color-base-violet-700);
+  --dodo-color-primary-800: var(--dodo-color-base-violet-800);
+  --dodo-color-primary-900: var(--dodo-color-base-violet-900);
+  --dodo-color-primary-950: var(--dodo-color-base-violet-950);
+
+  /* Safe color */
+  --dodo-color-safe-50: var(--dodo-color-base-emerald-50);
+  --dodo-color-safe-100: var(--dodo-color-base-emerald-100);
+  --dodo-color-safe-200: var(--dodo-color-base-emerald-200);
+  --dodo-color-safe-300: var(--dodo-color-base-emerald-300);
+  --dodo-color-safe-400: var(--dodo-color-base-emerald-400);
+  --dodo-color-safe-500: var(--dodo-color-base-emerald-500);
+  --dodo-color-safe-600: var(--dodo-color-base-emerald-600);
+  --dodo-color-safe-700: var(--dodo-color-base-emerald-700);
+  --dodo-color-safe-800: var(--dodo-color-base-emerald-800);
+  --dodo-color-safe-900: var(--dodo-color-base-emerald-900);
+  --dodo-color-safe-950: var(--dodo-color-base-emerald-950);
+
+  /* Warning color */
+  --dodo-color-warning-50: var(--dodo-color-base-amber-50);
+  --dodo-color-warning-100: var(--dodo-color-base-amber-100);
+  --dodo-color-warning-200: var(--dodo-color-base-amber-200);
+  --dodo-color-warning-300: var(--dodo-color-base-amber-300);
+  --dodo-color-warning-400: var(--dodo-color-base-amber-400);
+  --dodo-color-warning-500: var(--dodo-color-base-amber-500);
+  --dodo-color-warning-600: var(--dodo-color-base-amber-600);
+  --dodo-color-warning-700: var(--dodo-color-base-amber-700);
+  --dodo-color-warning-800: var(--dodo-color-base-amber-800);
+  --dodo-color-warning-900: var(--dodo-color-base-amber-900);
+  --dodo-color-warning-950: var(--dodo-color-base-amber-950);
+
+  /* Danger color */
+  --dodo-color-danger-50: var(--dodo-color-base-red-50);
+  --dodo-color-danger-100: var(--dodo-color-base-red-100);
+  --dodo-color-danger-200: var(--dodo-color-base-red-200);
+  --dodo-color-danger-300: var(--dodo-color-base-red-300);
+  --dodo-color-danger-400: var(--dodo-color-base-red-400);
+  --dodo-color-danger-500: var(--dodo-color-base-red-500);
+  --dodo-color-danger-600: var(--dodo-color-base-red-600);
+  --dodo-color-danger-700: var(--dodo-color-base-red-700);
+  --dodo-color-danger-800: var(--dodo-color-base-red-800);
+  --dodo-color-danger-900: var(--dodo-color-base-red-900);
+  --dodo-color-danger-950: var(--dodo-color-base-red-950);
+
+  /* Info color */
+  --dodo-color-info-50: var(--dodo-color-base-cyan-50);
+  --dodo-color-info-100: var(--dodo-color-base-cyan-100);
+  --dodo-color-info-200: var(--dodo-color-base-cyan-200);
+  --dodo-color-info-300: var(--dodo-color-base-cyan-300);
+  --dodo-color-info-400: var(--dodo-color-base-cyan-400);
+  --dodo-color-info-500: var(--dodo-color-base-cyan-500);
+  --dodo-color-info-600: var(--dodo-color-base-cyan-600);
+  --dodo-color-info-700: var(--dodo-color-base-cyan-700);
+  --dodo-color-info-800: var(--dodo-color-base-cyan-800);
+  --dodo-color-info-900: var(--dodo-color-base-cyan-900);
+  --dodo-color-info-950: var(--dodo-color-base-cyan-950);
+}
+
+.dodo-theme--dark {
+  /* Dark: Base colors */
+  --dodo-color-black: var(--dodo-color-base-white);
+  --dodo-color-white: var(--dodo-color-base-black);
+
+  /* Dark: Default color */
+  --dodo-color-default-50: var(--dodo-color-base-slate-950);
+  --dodo-color-default-100: var(--dodo-color-base-slate-900);
+  --dodo-color-default-200: var(--dodo-color-base-slate-800);
+  --dodo-color-default-300: var(--dodo-color-base-slate-700);
+  --dodo-color-default-400: var(--dodo-color-base-slate-600);
+  --dodo-color-default-500: var(--dodo-color-base-slate-500);
+  --dodo-color-default-600: var(--dodo-color-base-slate-400);
+  --dodo-color-default-700: var(--dodo-color-base-slate-300);
+  --dodo-color-default-800: var(--dodo-color-base-slate-200);
+  --dodo-color-default-900: var(--dodo-color-base-slate-100);
+  --dodo-color-default-950: var(--dodo-color-base-slate-50);
+
+  /* Dark: Primary color */
+  --dodo-color-primary-50: var(--dodo-color-base-violet-950);
+  --dodo-color-primary-100: var(--dodo-color-base-violet-900);
+  --dodo-color-primary-200: var(--dodo-color-base-violet-800);
+  --dodo-color-primary-300: var(--dodo-color-base-violet-700);
+  --dodo-color-primary-400: var(--dodo-color-base-violet-600);
+  --dodo-color-primary-500: var(--dodo-color-base-violet-500);
+  --dodo-color-primary-600: var(--dodo-color-base-violet-400);
+  --dodo-color-primary-700: var(--dodo-color-base-violet-300);
+  --dodo-color-primary-800: var(--dodo-color-base-violet-200);
+  --dodo-color-primary-900: var(--dodo-color-base-violet-100);
+  --dodo-color-primary-950: var(--dodo-color-base-violet-50);
+
+  /* Dark: Safe color */
+  --dodo-color-safe-50: var(--dodo-color-base-emerald-950);
+  --dodo-color-safe-100: var(--dodo-color-base-emerald-900);
+  --dodo-color-safe-200: var(--dodo-color-base-emerald-800);
+  --dodo-color-safe-300: var(--dodo-color-base-emerald-700);
+  --dodo-color-safe-400: var(--dodo-color-base-emerald-600);
+  --dodo-color-safe-500: var(--dodo-color-base-emerald-500);
+  --dodo-color-safe-600: var(--dodo-color-base-emerald-400);
+  --dodo-color-safe-700: var(--dodo-color-base-emerald-300);
+  --dodo-color-safe-800: var(--dodo-color-base-emerald-200);
+  --dodo-color-safe-900: var(--dodo-color-base-emerald-100);
+  --dodo-color-safe-950: var(--dodo-color-base-emerald-50);
+
+  /* Dark: Warning color */
+  --dodo-color-warning-50: var(--dodo-color-base-amber-950);
+  --dodo-color-warning-100: var(--dodo-color-base-amber-900);
+  --dodo-color-warning-200: var(--dodo-color-base-amber-800);
+  --dodo-color-warning-300: var(--dodo-color-base-amber-700);
+  --dodo-color-warning-400: var(--dodo-color-base-amber-600);
+  --dodo-color-warning-500: var(--dodo-color-base-amber-500);
+  --dodo-color-warning-600: var(--dodo-color-base-amber-400);
+  --dodo-color-warning-700: var(--dodo-color-base-amber-300);
+  --dodo-color-warning-800: var(--dodo-color-base-amber-200);
+  --dodo-color-warning-900: var(--dodo-color-base-amber-100);
+  --dodo-color-warning-950: var(--dodo-color-base-amber-50);
+
+  /* Dark: Danger color */
+  --dodo-color-danger-50: var(--dodo-color-base-red-950);
+  --dodo-color-danger-100: var(--dodo-color-base-red-900);
+  --dodo-color-danger-200: var(--dodo-color-base-red-800);
+  --dodo-color-danger-300: var(--dodo-color-base-red-700);
+  --dodo-color-danger-400: var(--dodo-color-base-red-600);
+  --dodo-color-danger-500: var(--dodo-color-base-red-500);
+  --dodo-color-danger-600: var(--dodo-color-base-red-400);
+  --dodo-color-danger-700: var(--dodo-color-base-red-300);
+  --dodo-color-danger-800: var(--dodo-color-base-red-200);
+  --dodo-color-danger-900: var(--dodo-color-base-red-100);
+  --dodo-color-danger-950: var(--dodo-color-base-red-50);
+
+  /* Dark: Info color */
+  --dodo-color-info-50: var(--dodo-color-base-cyan-950);
+  --dodo-color-info-100: var(--dodo-color-base-cyan-900);
+  --dodo-color-info-200: var(--dodo-color-base-cyan-800);
+  --dodo-color-info-300: var(--dodo-color-base-cyan-700);
+  --dodo-color-info-400: var(--dodo-color-base-cyan-600);
+  --dodo-color-info-500: var(--dodo-color-base-cyan-500);
+  --dodo-color-info-600: var(--dodo-color-base-cyan-400);
+  --dodo-color-info-700: var(--dodo-color-base-cyan-300);
+  --dodo-color-info-800: var(--dodo-color-base-cyan-200);
+  --dodo-color-info-900: var(--dodo-color-base-cyan-100);
+  --dodo-color-info-950: var(--dodo-color-base-cyan-50);
+}

package/src/lib/styles/_components.css

@@ -0,0 +1,10 @@
+:root {
+  --dodo-ui-element-height-normal: 40px;
+  --dodo-ui-element-height-small: 34px;
+  --dodo-ui-element-height-large: 48px;
+
+  --dodo-ui-element-roundness-base: 7px;
+  --dodo-ui-element-roundness-1: var(--dodo-ui-element-roundness-base);
+  --dodo-ui-element-roundness-2: calc(var(--dodo-ui-element-roundness-base) * 2);
+  --dodo-ui-element-roundness-3: calc(var(--dodo-ui-element-roundness-base) * 4);
+}

package/src/lib/styles/global.css

@@ -1,3 +1,4 @@
 @import '_colors-base.css';
 @import '_colors.css';
 @import '_breakpoint.css';
+@import '_components.css';

package/src/lib/types.ts

@@ -1 +1,5 @@
-export type ComponentSize = 'small' | 'normal' | 'large';
+/** Component Size */
+export type ComponentSize = 'normal' | 'small' | 'large';
+
+export type ComponentRoundness = 1 | 2 | 3;
+export type ComponentRoundnessFull = 'full';

package/src/lib/stories/Getting Started.mdx

@@ -1,13 +0,0 @@
-import { Source } from '@storybook/blocks';
-
-# Getting Started
-
-## Install
-
-<Source dark language='bash' code={`
-// pnpm
-pnpm add @siddacoolpkg/dodo-ui
-
-// npm
-npm i @siddacoolpkg/dodo-ui
-`} />

package/src/lib/stories/Home.mdx

@@ -1,10 +0,0 @@
-<img
-  src="dodo-circle-6.png"
-  style={{ width: 200, height: 'auto', display: 'flex', justifySelf: 'center' }}
-/>
-
-<h1 style={{ textAlign: 'center' }}>Dodo UI</h1>
-
-<div style={{ textAlign: 'center', fontSize: '1rem', fontWeight: 400 }}>
-  An open-source, opinionated UI framework for Svelte.
-</div>