@flightlesslabs/dodo-ui 0.6.4 → 0.6.6

package/src/lib/stories/developer tools/philosophy/Colors/utils/color.ts

@@ -0,0 +1,41 @@
+export const colorPaletteBase = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+];
+
+export const colorPaletteNeutral = ['black', 'white'];
+
+export const colorPalette = ['primary', 'secondary', 'neutral', 'safe', 'warning', 'danger'];
+
+export const colorPaletteValues = [
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950',
+];

package/src/lib/styles/_colors.css

@@ -8,17 +8,17 @@
   --dodo-color-constant-white: var(--dodo-color-base-white);
 
   /* Default color */
-  --dodo-color-default-50: var(--dodo-color-base-gray-50);
-  --dodo-color-default-100: var(--dodo-color-base-gray-100);
-  --dodo-color-default-200: var(--dodo-color-base-gray-200);
-  --dodo-color-default-300: var(--dodo-color-base-gray-300);
-  --dodo-color-default-400: var(--dodo-color-base-gray-400);
-  --dodo-color-default-500: var(--dodo-color-base-gray-500);
-  --dodo-color-default-600: var(--dodo-color-base-gray-600);
-  --dodo-color-default-700: var(--dodo-color-base-gray-700);
-  --dodo-color-default-800: var(--dodo-color-base-gray-800);
-  --dodo-color-default-900: var(--dodo-color-base-gray-900);
-  --dodo-color-default-950: var(--dodo-color-base-gray-950);
+  --dodo-color-neutral-50: var(--dodo-color-base-gray-50);
+  --dodo-color-neutral-100: var(--dodo-color-base-gray-100);
+  --dodo-color-neutral-200: var(--dodo-color-base-gray-200);
+  --dodo-color-neutral-300: var(--dodo-color-base-gray-300);
+  --dodo-color-neutral-400: var(--dodo-color-base-gray-400);
+  --dodo-color-neutral-500: var(--dodo-color-base-gray-500);
+  --dodo-color-neutral-600: var(--dodo-color-base-gray-600);
+  --dodo-color-neutral-700: var(--dodo-color-base-gray-700);
+  --dodo-color-neutral-800: var(--dodo-color-base-gray-800);
+  --dodo-color-neutral-900: var(--dodo-color-base-gray-900);
+  --dodo-color-neutral-950: var(--dodo-color-base-gray-950);
 
   /* Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-50);
@@ -34,17 +34,17 @@
   --dodo-color-primary-950: var(--dodo-color-base-violet-950);
 
   /* Secondary color */
-  --dodo-color-secondary-50: var(--dodo-color-base-cyan-50);
-  --dodo-color-secondary-100: var(--dodo-color-base-cyan-100);
-  --dodo-color-secondary-200: var(--dodo-color-base-cyan-200);
-  --dodo-color-secondary-300: var(--dodo-color-base-cyan-300);
-  --dodo-color-secondary-400: var(--dodo-color-base-cyan-400);
-  --dodo-color-secondary-500: var(--dodo-color-base-cyan-500);
-  --dodo-color-secondary-600: var(--dodo-color-base-cyan-600);
-  --dodo-color-secondary-700: var(--dodo-color-base-cyan-700);
-  --dodo-color-secondary-800: var(--dodo-color-base-cyan-800);
-  --dodo-color-secondary-900: var(--dodo-color-base-cyan-900);
-  --dodo-color-secondary-950: var(--dodo-color-base-cyan-950);
+  --dodo-color-secondary-50: var(--dodo-color-base-blue-50);
+  --dodo-color-secondary-100: var(--dodo-color-base-blue-100);
+  --dodo-color-secondary-200: var(--dodo-color-base-blue-200);
+  --dodo-color-secondary-300: var(--dodo-color-base-blue-300);
+  --dodo-color-secondary-400: var(--dodo-color-base-blue-400);
+  --dodo-color-secondary-500: var(--dodo-color-base-blue-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-blue-600);
+  --dodo-color-secondary-700: var(--dodo-color-base-blue-700);
+  --dodo-color-secondary-800: var(--dodo-color-base-blue-800);
+  --dodo-color-secondary-900: var(--dodo-color-base-blue-900);
+  --dodo-color-secondary-950: var(--dodo-color-base-blue-950);
 
   /* Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-50);
@@ -92,17 +92,17 @@
   --dodo-color-white: var(--dodo-color-base-black);
 
   /* Dark: Default color */
-  --dodo-color-default-50: var(--dodo-color-base-gray-950);
-  --dodo-color-default-100: var(--dodo-color-base-gray-900);
-  --dodo-color-default-200: var(--dodo-color-base-gray-800);
-  --dodo-color-default-300: var(--dodo-color-base-gray-700);
-  --dodo-color-default-400: var(--dodo-color-base-gray-600);
-  --dodo-color-default-500: var(--dodo-color-base-gray-500);
-  --dodo-color-default-600: var(--dodo-color-base-gray-400);
-  --dodo-color-default-700: var(--dodo-color-base-gray-300);
-  --dodo-color-default-800: var(--dodo-color-base-gray-200);
-  --dodo-color-default-900: var(--dodo-color-base-gray-100);
-  --dodo-color-default-950: var(--dodo-color-base-gray-50);
+  --dodo-color-neutral-50: var(--dodo-color-base-gray-950);
+  --dodo-color-neutral-100: var(--dodo-color-base-gray-900);
+  --dodo-color-neutral-200: var(--dodo-color-base-gray-800);
+  --dodo-color-neutral-300: var(--dodo-color-base-gray-700);
+  --dodo-color-neutral-400: var(--dodo-color-base-gray-600);
+  --dodo-color-neutral-500: var(--dodo-color-base-gray-500);
+  --dodo-color-neutral-600: var(--dodo-color-base-gray-400);
+  --dodo-color-neutral-700: var(--dodo-color-base-gray-300);
+  --dodo-color-neutral-800: var(--dodo-color-base-gray-200);
+  --dodo-color-neutral-900: var(--dodo-color-base-gray-100);
+  --dodo-color-neutral-950: var(--dodo-color-base-gray-50);
 
   /* Dark: Primary color */
   --dodo-color-primary-50: var(--dodo-color-base-violet-950);
@@ -118,17 +118,17 @@
   --dodo-color-primary-950: var(--dodo-color-base-violet-50);
 
   /* Dark: Secondary color */
-  --dodo-color-secondary-50: var(--dodo-color-base-cyan-950);
-  --dodo-color-secondary-100: var(--dodo-color-base-cyan-900);
-  --dodo-color-secondary-200: var(--dodo-color-base-cyan-800);
-  --dodo-color-secondary-300: var(--dodo-color-base-cyan-700);
-  --dodo-color-secondary-400: var(--dodo-color-base-cyan-600);
-  --dodo-color-secondary-500: var(--dodo-color-base-cyan-500);
-  --dodo-color-secondary-600: var(--dodo-color-base-cyan-400);
-  --dodo-color-secondary-700: var(--dodo-color-base-cyan-300);
-  --dodo-color-secondary-800: var(--dodo-color-base-cyan-200);
-  --dodo-color-secondary-900: var(--dodo-color-base-cyan-100);
-  --dodo-color-secondary-950: var(--dodo-color-base-cyan-50);
+  --dodo-color-secondary-50: var(--dodo-color-base-blue-950);
+  --dodo-color-secondary-100: var(--dodo-color-base-blue-900);
+  --dodo-color-secondary-200: var(--dodo-color-base-blue-800);
+  --dodo-color-secondary-300: var(--dodo-color-base-blue-700);
+  --dodo-color-secondary-400: var(--dodo-color-base-blue-600);
+  --dodo-color-secondary-500: var(--dodo-color-base-blue-500);
+  --dodo-color-secondary-600: var(--dodo-color-base-blue-400);
+  --dodo-color-secondary-700: var(--dodo-color-base-blue-300);
+  --dodo-color-secondary-800: var(--dodo-color-base-blue-200);
+  --dodo-color-secondary-900: var(--dodo-color-base-blue-100);
+  --dodo-color-secondary-950: var(--dodo-color-base-blue-50);
 
   /* Dark: Safe color */
   --dodo-color-safe-50: var(--dodo-color-base-emerald-950);

package/src/lib/styles/_components.css

@@ -1,11 +1,14 @@
 :root {
+  /* Size */
   --dodo-ui-element-height-small: 34px;
   --dodo-ui-element-height-normal: 40px;
   --dodo-ui-element-height-large: 50px;
 
-  --dodo-ui-element-roundness-1x: 7px;
-  --dodo-ui-element-roundness-2x: 13px;
-  --dodo-ui-element-roundness-3x: 31px;
+  /* Roundness */
+  --dodo-ui-element-roundness-1: 7px;
+  --dodo-ui-element-roundness-2: 13px;
+  --dodo-ui-element-roundness-3: 31px;
 
+  /* Border */
   --dodo-ui-element-border-width: 1px;
 }

package/src/lib/styles/_shadow.css

@@ -1,39 +1,32 @@
 :root {
-  --dodo-shadow-color: #0000000d;
+  --dodo-shadow-color: rgba(0, 0, 0, 0.11);
 }
 
-.dodo-shadow-1x {
-  --dodo-shadow: 0 1px var(--dodo-shadow-color);
-  box-shadow: var(--dodo-shadow);
-}
-
-.dodo-shadow-2x {
-  --dodo-shadow: 0 1px 2px 0 var(--dodo-shadow-color);
-  box-shadow: var(--dodo-shadow);
+.dodo-theme--dark {
+  --dodo-shadow-color: rgba(0, 0, 0, 0.09);
 }
 
-.dodo-shadow-3x {
-  --dodo-shadow: 0 1px 3px 0 var(--dodo-shadow-color);
+.dodo-shadow-1 {
+  --dodo-shadow: 0 1px 3px var(--dodo-shadow-color), 0 1px 2px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-4x {
-  --dodo-shadow: 0 4px 6px -1px var(--dodo-shadow-color), 0 2px 4px -2px var(--dodo-shadow-color);
+.dodo-shadow-2 {
+  --dodo-shadow: 0 3px 6px var(--dodo-shadow-color), 0 3px 6px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-5x {
-  --dodo-shadow: 0 10px 15px -3px var(--dodo-shadow-color), 0 4px 6px -4px var(--dodo-shadow-color);
+.dodo-shadow-3 {
+  --dodo-shadow: 0 6px 10px var(--dodo-shadow-color), 0 5px 17px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-6x {
-  --dodo-shadow:
-    0 20px 25px -5px var(--dodo-shadow-color), 0 8px 10px -6px var(--dodo-shadow-color);
+.dodo-shadow-4 {
+  --dodo-shadow: 0 10px 18px var(--dodo-shadow-color), 0 6px 10px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }
 
-.dodo-shadow-7x {
-  --dodo-shadow: 0 25px 50px -12px var(--dodo-shadow-color);
+.dodo-shadow-5 {
+  --dodo-shadow: 0 14px 28px var(--dodo-shadow-color), 0 10px 10px var(--dodo-shadow-color);
   box-shadow: var(--dodo-shadow);
 }

package/src/lib/styles/_space.css

@@ -0,0 +1,7 @@
+:root {
+  /* Space */
+  /* Example: calc(var(--dodo-ui-space) * 2), calc(var(--dodo-ui-space) / 2) */
+  --dodo-ui-space-small: 6px;
+  --dodo-ui-space: 8px;
+  --dodo-ui-space-large: 10px;
+}

package/src/lib/styles/global.css

@@ -1,6 +1,7 @@
 @import '_minimal-reset.css';
 @import '_colors-base.css';
 @import '_colors.css';
+@import '_space.css';
 @import '_breakpoint.css';
 @import '_shadow.css';
 @import '_components.css';

package/src/lib/types/colors.ts

@@ -0,0 +1,16 @@
+/** Component Color*/
+export type ComponentColorPriority = 'primary' | 'secondary' | 'neutral';
+export const componentColorPriorityArray: ComponentColorPriority[] = [
+  'primary',
+  'secondary',
+  'neutral',
+];
+
+export type ComponentColorSeverity = 'safe' | 'warning' | 'danger';
+export const componentColorSeverityArray: ComponentColorSeverity[] = ['safe', 'warning', 'danger'];
+
+export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
+export const componentColorArray: ComponentColor[] = [
+  ...componentColorPriorityArray,
+  ...componentColorSeverityArray,
+];

package/src/lib/types/roundness.ts

@@ -0,0 +1,3 @@
+/** Component Roundness */
+export type ComponentRoundness = 0 | 1 | 2 | 3 | 'full';
+export const componentRoundnessArray: ComponentRoundness[] = [0, 1, 2, 3, 'full'];

package/src/lib/types/shadow.ts

@@ -0,0 +1,3 @@
+/** Component Shadow */
+export type ComponentShadow = 0 | 1 | 2 | 3 | 4 | 5;
+export const componentShadowArray: ComponentShadow[] = [0, 1, 2, 3, 4, 5];

package/src/lib/types/size.ts

@@ -0,0 +1,3 @@
+/** Component Size */
+export type ComponentSize = 'normal' | 'small' | 'large';
+export const componentSizeArray: ComponentSize[] = ['normal', 'small', 'large'];

package/src/lib/types/weight.ts

@@ -0,0 +1,3 @@
+/** Component Weight */
+export type ComponentWeight = 'solid' | 'text';
+export const componentWeightArray: ComponentWeight[] = ['solid', 'text'];

package/dist/types.d.ts

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

package/dist/types.js

@@ -1 +0,0 @@
-export {};

package/src/lib/types.ts

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