@rocketui/vue 0.0.46 → 0.0.47

package/src/index.css

@@ -0,0 +1,241 @@
+@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@200;300;400;500;600;700;800&family=Roboto:wght@100&display=swap');
+
+:root {
+  /**
+  * @tokens Colors
+  * @presenter Color
+  */
+  --primary-50: #f2f4ff;
+  --primary-100: #f2f3fd;
+  --primary-200: #e4e6fb;
+  --primary-300: #a3abf0;
+  --primary-400: #6f7de5;
+  --primary-500: #4c5be1;
+  --primary-600: #3a3f9e;
+  --primary-700: #3944a9;
+  --primary-800: #2e3a7e;
+  --primary-900: #2e3787;
+  --secondary-100: #fdfae7;
+  --secondary-200: #f9eeb5;
+  --secondary-300: #ffec8a;
+  --secondary-400: #ffdf3b;
+  --secondary-500: #ebc80f;
+  --secondary-600: #e0bc00;
+  --secondary-700: #998100;
+  --secondary-800: #705e00;
+  --secondary-900: #483c00;
+  --neutral-100: #f6f7f9;
+  --neutral-200: #e7eaee;
+  --neutral-300: #c3c9d5;
+  --neutral-400: #acb4c3;
+  --neutral-500: #818a9c;
+  --neutral-600: #586174;
+  --neutral-700: #3c4353;
+  --neutral-800: #242a38;
+  --neutral-900: #151b26;
+  --success-100: #e8fff7;
+  --success-200: #bfffe8;
+  --success-300: #97ffda;
+  --success-400: #1bf5a7;
+  --success-500: #05cc85;
+  --success-600: #0cbc7d;
+  --success-700: #068e03;
+  --success-800: #007a4f;
+  --success-900: #005235;
+  --info-100: #e8f4ff;
+  --info-200: #b6dcff;
+  --info-300: #83c3ff;
+  --info-400: #50abff;
+  --info-500: #0c70ce;
+  --info-600: #0059ac;
+  --info-700: #00488a;
+  --info-800: #003668;
+  --info-900: #002446;
+  --warning-100: #fdfae7;
+  --warning-200: #f9eeb5;
+  --warning-300: #ffec8a;
+  --warning-400: #ffdf3b;
+  --warning-500: #ebc80f;
+  --warning-600: #e0bc00;
+  --warning-700: #998100;
+  --warning-800: #705e00;
+  --warning-900: #483c00;
+  --error-100: #ffeceb;
+  --error-200: #ffd0cc;
+  --error-300: #ff9891;
+  --error-400: #ff4537;
+  --error-500: #e13023;
+  --error-600: #bf1e12;
+  --error-700: #9d1006;
+  --error-800: #7b0900;
+  --error-900: #590600;
+  --white: #ffffff;
+  --black: #000000;
+  /**
+  * @tokens Box Shadows
+  * @presenter Shadow
+  */
+  --box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  --box-shadow-hover: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+  --box-shadow-active: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+  --box-shadow-focus: 0 0 10px 0 rgba(0, 0, 0, 0.4);
+  --box-shadow-pressed: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+  --box-shadow-pressed-active: 0 0 10px 0 rgba(0, 0, 0, 0.6);
+  --box-shadow-pressed-focus: 0 0 10px 0 rgba(0, 0, 0, 0.7);
+  --box-shadow-pressed-hover: 0 0 10px 0 rgba(0, 0, 0, 0.8);
+  /**
+  * @tokens Spaces
+  * @presenter Spacing
+  */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-7: 1.75rem;
+  --space-8: 2rem;
+  --space-9: 2.25rem;
+  --space-10: 2.5rem;
+  --space-11: 2.75rem;
+  --space-12: 3rem;
+  --space-13: 3.25rem;
+  --space-14: 3.5rem;
+  --space-15: 3.75rem;
+  --space-16: 4rem;
+  --space-17: 4.25rem;
+  --space-18: 4.5rem;
+  --space-19: 4.75rem;
+  --space-20: 5rem;
+  /**
+  * @tokens Gaps
+  */
+  --column-gap: 1rem;
+  --row-gap: 1rem;
+  /**
+  * @tokens Border Radiuses
+  * @presenter BorderRadius
+  */
+  --border-radius: 0.25rem;
+  --border-radius-1: 0.25rem;
+  --border-radius-2: 0.5rem;
+  --border-radius-3: 0.75rem;
+  --border-radius-4: 1rem;
+  --border-radius-5: 1.25rem;
+  --border-radius-6: 99999px;
+  /**
+  * @tokens Others
+  */
+  --column-1: 1;
+  --column-2: 2;
+  --column-3: 3;
+  --column-4: 4;
+  --column-5: 5;
+  --column-6: 6;
+  --column-7: 7;
+
+  /**
+  * @tokens-modal-variables
+  * @presenter ModalVariables
+  */
+  --modal-background: rgba(0, 0, 0, 0.5);
+  --modal-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  --modal-height: 448px;
+  --modal-width: 400px;
+  --modal-border-radius: var(--border-radius-4);
+  --modal-padding: var(--space-7);
+  --modal-icon-size: var(--space-12);
+  --modal-icon-padding: var(--space-3);
+  --modal-icon-bg: var(--primary-100);
+  --modal-icon-color: var(--primary-500);
+  --modal-animation: crossFadeAndGrowUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s
+    both;
+
+  /**
+  * @tokens-sidebar-variables
+  * @presenter SidebarVariables
+  */
+  --sidebar-width: 256px;
+  --sidebar-collapsed-width: 80px;
+  --sidebar-background: white;
+  --sidebar-padding: var(--space-5) var(--space-4);
+  /**
+  * @tokens-textfield-variables
+  * @presenter TextfieldVariables
+  */
+  --textfield-bg: var(--white);
+  --textfield-bg-disabled: var(--neutral-100);
+  /**
+  * @tokens-button-variables
+  * @presenter ButtonVariables
+  */
+  --btn-radius: var(--border-radius-2);
+
+  /**
+  * @tokens-font-variables
+  * @presenter FontVariables
+  */
+  --font-size: 16px;
+
+  /**
+  * @tokens-breadcrumb-variables
+  * @presenter Breadcrumb Variables
+  */
+  --breadcrumb-text-color: var(--neutral-500);
+  --breadcrumb-text-color-active: var(--neutral-900);
+  --breadcrumb-text-color-hover: var(--neutral-900);
+
+  /**
+  * @tokens-accordion-variables
+  * @presenter Accordion Variables
+  */
+  --accordion-content-max-height: 600px;
+
+  /**
+  * @tokens-pagination-variables
+  * @presenter Pagination Variables
+  */
+  --pagination-border-radius: var(--border-radius-2);
+  --pagination-border-color: var(--neutral-200);
+  --pagination-border-width: 1px;
+  --pagination-border-style: solid;
+  --pagination-bg: var(--white);
+  --pagination-btn-padding: 0.565rem;
+  --pagination-input-padding: 0.315rem;
+  /**
+  * @tokens-end
+  */
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes spin {
+  to {
+    transform: rotate(-360deg);
+  }
+}
+.animate-spin-reverse {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes ring {
+  0% {
+    @apply ring-2 ring-offset-0;
+  }
+  100% {
+    @apply ring-2 ring-offset-0;
+  }
+}
+
+@keyframes crossFadeAndGrowUp {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import './index.css';
+
+createApp(App).mount('#app');

package/src/scripts/buildIcons.js

@@ -0,0 +1,21 @@
+import util from '@mdi/util';
+
+const meta = util.getMeta(true);
+
+const find = /(\-\w)/g;
+const convert = function ([_, matches]) {
+  return matches.toUpperCase();
+};
+
+const lines = meta.map((icon) => {
+  let name = icon.name.replace(find, convert);
+  name = `${name[0].toUpperCase()}${name.slice(1)}`;
+
+  return `mdi${name} : "${icon.path}"`;
+});
+
+const outputTS = `// Material Design Icons v${util.getVersion()}\n
+const svg =
+ {\n${lines.join(',\n')}\n}\nexport default svg`;
+
+util.write('src/assets/icons/mdi.js', outputTS);

package/src/stories/Colors.mdx

@@ -0,0 +1,355 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta
+  title="Design Tokens/Colors"
+  parameters={{
+    viewMode: 'docs',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+export const Primaries = [
+  {
+    name: '--primary-900',
+    value: '#2E3787',
+  },
+  {
+    name: '--primary-700',
+    value: '#3944A9',
+  },
+  {
+    name: '--primary-500',
+    value: '#4C5BE1',
+  },
+  {
+    name: '--primary-300',
+    value: '#A3ABF0',
+  },
+  {
+    name: '--primary-200',
+    value: '#E4E6FB',
+  },
+  {
+    name: '--primary-100',
+    value: '#F2F3FD',
+  },
+  {
+    name: '--primary-50',
+    value: '#f2f4ff',
+  }
+];
+export const Secondaries = [
+  {
+    name: '--secondary-900',
+    value: '#48390D',
+  },
+  {
+    name: '--secondary-800',
+    value: '#6A5517',
+  },
+  {
+    name: '--secondary-700',
+    value: '#AE9034',
+  },
+  {
+    name: '--secondary-600',
+    value: '#D0AE47',
+  },
+  {
+    name: '--secondary-500',
+    value: '#F2CD5D',
+  },
+  {
+    name: '--secondary-400',
+    value: '#FDDF84',
+  },
+  {
+    name: '--secondary-300',
+    value: '#FFE9A8',
+  },
+  {
+    name: '--secondary-200',
+    value: '#FFF2CC',
+  },
+  {
+    name: '--secondary-100',
+    value: '#FFF7E1',
+  },
+];
+export const Neutrals = [
+  {
+    name: '--neutral-900',
+    value: '#151B26',
+  },
+  {
+    name: '--neutral-800',
+    value: '#242A38',
+  },
+  {
+    name: '--neutral-700',
+    value: '#3C4353',
+  },
+  {
+    name: '--neutral-600',
+    value: '#586174',
+  },
+  {
+    name: '--neutral-500',
+    value: '#818A9C',
+  },
+  {
+    name: '--neutral-400',
+    value: '#ACB4C3',
+  },
+  {
+    name: '--neutral-300',
+    value: '#C3C9D5',
+  },
+  {
+    name: '--neutral-200',
+    value: '#E7EAEE',
+  },
+  {
+    name: '--neutral-100',
+    value: '#F6F7F9',
+  },
+];
+export const Successes = [
+  {
+    name: '--success-900',
+    value: '#005235',
+  },
+  {
+    name: '--success-800',
+    value: '#007A4F',
+  },
+  {
+    name: '--success-700',
+    value: '#068E03',
+  },
+  {
+    name: '--success-600',
+    value: '#0CBC7D',
+  },
+  {
+    name: '--success-500',
+    value: '#05CC85',
+  },
+  {
+    name: '--success-400',
+    value: '#1BF5A7',
+  },
+  {
+    name: '--success-300',
+    value: '#97FFDA',
+  },
+  {
+    name: '--success-200',
+    value: '#BFFFE8',
+  },
+  {
+    name: '--success-100',
+    value: '#E8FFF7',
+  },
+];
+export const Informations = [
+  {
+    name: '--info-900',
+    value: '#002446',
+  },
+  {
+    name: '--info-800',
+    value: '#003668',
+  },
+  {
+    name: '--info-700',
+    value: '#00488A',
+  },
+  {
+    name: '--info-600',
+    value: '#0059AC',
+  },
+  {
+    name: '--info-500',
+    value: '#0C70CE',
+  },
+  {
+    name: '--info-400',
+    value: '#50ABFF',
+  },
+  {
+    name: '--info-300',
+    value: '#83C3FF',
+  },
+  {
+    name: '--info-200',
+    value: '#B6DCFF',
+  },
+  {
+    name: '--info-100',
+    value: '#E8F4FF',
+  },
+];
+export const Warnings = [
+  {
+    name: '--warning-900',
+    value: '#483C00',
+  },
+  {
+    name: '--warning-800',
+    value: '#705E00',
+  },
+  {
+    name: '--warning-700',
+    value: '#998100',
+  },
+  {
+    name: '--warning-600',
+    value: '#E0BC00',
+  },
+  {
+    name: '--warning-500',
+    value: '#EBC80F',
+  },
+  {
+    name: '--warning-400',
+    value: '#FFDF3B',
+  },
+  {
+    name: '--warning-300',
+    value: '#FFEC8A',
+  },
+  {
+    name: '--warning-200',
+    value: '#F9EEB5',
+  },
+  {
+    name: '--warning-100',
+    value: '#FDFAE7',
+  },
+];
+export const Errors = [
+  {
+    name: '--error-900',
+    value: '#590600',
+  },
+  {
+    name: '--error-800',
+    value: '#7B0900',
+  },
+  {
+    name: '--error-700',
+    value: '#9D1006',
+  },
+  {
+    name: '--error-600',
+    value: '#BF1E12',
+  },
+  {
+    name: '--error-500',
+    value: '#E13023',
+  },
+  {
+    name: '--error-400',
+    value: '#FF4537',
+  },
+  {
+    name: '--error-300',
+    value: '#FF9891',
+  },
+  {
+    name: '--error-200',
+    value: '#FFD0CC',
+  },
+  {
+    name: '--error-100',
+    value: '#FFECEB',
+  },
+];
+export const Others = [
+  {
+    name: '--white',
+    value: '#FFFFFF',
+  },
+  {
+    name: '--black',
+    value: '#000000',
+  },
+];
+
+export const Things = ({ colors }) => {
+return (
+
+<div
+  style={{
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr)',
+    gridGap: '1rem',
+    fontFamily: 'sans-serif',
+  }}
+>
+  {colors.map((color) => (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '1rem',
+        padding: '0.5rem',
+        marginBottom: '0.5rem',
+        border: '1px solid #E7EAEE',
+        borderRadius: '8px',
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: color.value,
+          width: '54px',
+          height: '54px',
+          borderRadius: '8px',
+          boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
+        }}
+      />
+      <div>
+        <div style={{ color: '#818A9C' }}>{color.name}</div>
+        <div style={{ color: '#151B26' }}>{color.value}</div>
+      </div>
+    </div>
+  ))}
+</div>
+) };
+
+# Colors
+
+## Primary
+
+<Things colors={Primaries} />
+
+## Secondary
+
+<Things colors={Secondaries} />
+
+## Neutral
+
+<Things colors={Neutrals} />
+
+## Success
+
+<Things colors={Successes} />
+
+## Info
+
+<Things colors={Informations} />
+
+## Warning
+
+<Things colors={Warnings} />
+
+## Error
+
+<Things colors={Errors} />
+
+## Other
+
+<Things colors={Others} />