@sk-web-gui/core 0.1.87 → 0.1.89

package/src/plugin.js

@@ -1,120 +1,120 @@
-const plugin = require('tailwindcss/plugin');
-
-const base = require('./base');
-const theme = require('./theme');
-
-// components
-const Alert = require('./components/alert');
-const AlertBanner = require('./components/alert-banner');
-const Badge = require('./components/badge');
-const Breadcrumb = require('./components/breadcrumb');
-const ButtonGroup = require('./components/button-group');
-const Comments = require('./components/comments');
-const Checkbox = require('./components/checkbox');
-const ContextMenu = require('./components/context-menu');
-const Dialog = require('./components/dialog');
-const Dot = require('./components/dot');
-const Forms = require('./components/forms');
-const Calendar = require('./components/calendar');
-const Icon = require('./components/icon');
-const Link = require('./components/link');
-const Message = require('./components/message');
-const Notification = require('./components/notification');
-const Radio = require('./components/radio');
-const Switch = require('./components/switch');
-
-const Button = require('./components/button');
-const Accordion = require('./components/accordion');
-const Card = require('./components/card');
-const Table = require('./components/table');
-const ZebraTable = require('./components/zebratable');
-
-const Modal = require('./components/modal');
-const CookieConsent = require('./components/cookie-consent');
-const Divider = require('./components/divider');
-
-const SideMenu = require('./components/side-menu');
-const TabMenu = require('./components/tab-menu');
-const Tabs = require('./components/tabs');
-const UserMenu = require('./components/user-menu');
-
-const DropdownFilter = require('./components/dropdown-filter');
-
-const Tag = require('./components/tag');
-const Pagination = require('./components/pagination');
-const Footer = require('./components/footer');
-const Header = require('./components/header');
-
-const SearchBar = require('./components/search-bar');
-
-const ProfilePicture = require('./components/profile-picture');
-const Profile = require('./components/profile');
-
-const components = [
-  Alert,
-  AlertBanner,
-  Badge,
-  Breadcrumb,
-  ButtonGroup,
-  Button,
-  Checkbox,
-  Comments,
-  ContextMenu,
-  Dialog,
-  Dot,
-  Forms,
-  Calendar,
-  Icon,
-  Link,
-  Message,
-  Notification,
-  Radio,
-  Switch,
-
-  Table,
-  ZebraTable,
-  CookieConsent,
-  Modal,
-
-  Accordion,
-  Card,
-  Divider,
-
-  SideMenu,
-  TabMenu,
-  Tabs,
-  UserMenu,
-
-  DropdownFilter,
-
-  SearchBar,
-
-  Tag,
-  Pagination,
-  Footer,
-  Header,
-
-  ProfilePicture,
-  Profile,
-];
-
-const defaultColors = ['primary', 'secondary'];
-
-module.exports = plugin.withOptions(
-  function (options = { colors: [], cssBase: true }) {
-    return function ({ addComponents, addBase, theme }) {
-      const optionColors = [...defaultColors, ...(options.colors || [])];
-
-      if (options.cssBase) {
-        addBase(base);
-      }
-
-      addComponents(components.map((component) => component(optionColors, theme)));
-    };
-  },
-  function () {
-    return {
-      theme: theme,
-    };
-  }
-);
+const plugin = require('tailwindcss/plugin');
+
+const base = require('./base');
+const theme = require('./theme');
+
+// components
+const Alert = require('./components/alert');
+const AlertBanner = require('./components/alert-banner');
+const Badge = require('./components/badge');
+const Breadcrumb = require('./components/breadcrumb');
+const ButtonGroup = require('./components/button-group');
+const Comments = require('./components/comments');
+const Checkbox = require('./components/checkbox');
+const ContextMenu = require('./components/context-menu');
+const Dialog = require('./components/dialog');
+const Dot = require('./components/dot');
+const Forms = require('./components/forms');
+const Calendar = require('./components/calendar');
+const Icon = require('./components/icon');
+const Link = require('./components/link');
+const Message = require('./components/message');
+const Notification = require('./components/notification');
+const Radio = require('./components/radio');
+const Switch = require('./components/switch');
+
+const Button = require('./components/button');
+const Accordion = require('./components/accordion');
+const Card = require('./components/card');
+const Table = require('./components/table');
+const ZebraTable = require('./components/zebratable');
+
+const Modal = require('./components/modal');
+const CookieConsent = require('./components/cookie-consent');
+const Divider = require('./components/divider');
+
+const SideMenu = require('./components/side-menu');
+const TabMenu = require('./components/tab-menu');
+const Tabs = require('./components/tabs');
+const UserMenu = require('./components/user-menu');
+
+const DropdownFilter = require('./components/dropdown-filter');
+
+const Tag = require('./components/tag');
+const Pagination = require('./components/pagination');
+const Footer = require('./components/footer');
+const Header = require('./components/header');
+
+const SearchBar = require('./components/search-bar');
+
+const ProfilePicture = require('./components/profile-picture');
+const Profile = require('./components/profile');
+
+const components = [
+  Alert,
+  AlertBanner,
+  Badge,
+  Breadcrumb,
+  ButtonGroup,
+  Button,
+  Checkbox,
+  Comments,
+  ContextMenu,
+  Dialog,
+  Dot,
+  Forms,
+  Calendar,
+  Icon,
+  Link,
+  Message,
+  Notification,
+  Radio,
+  Switch,
+
+  Table,
+  ZebraTable,
+  CookieConsent,
+  Modal,
+
+  Accordion,
+  Card,
+  Divider,
+
+  SideMenu,
+  TabMenu,
+  Tabs,
+  UserMenu,
+
+  DropdownFilter,
+
+  SearchBar,
+
+  Tag,
+  Pagination,
+  Footer,
+  Header,
+
+  ProfilePicture,
+  Profile,
+];
+
+const defaultColors = ['primary', 'secondary'];
+
+module.exports = plugin.withOptions(
+  function (options = { colors: [], cssBase: true }) {
+    return function ({ addComponents, addBase, theme }) {
+      const optionColors = [...defaultColors, ...(options.colors || [])];
+
+      if (options.cssBase) {
+        addBase(base);
+      }
+
+      addComponents(components.map((component) => component(optionColors, theme)));
+    };
+  },
+  function () {
+    return {
+      theme: theme,
+    };
+  }
+);

package/src/theme.js

@@ -1,84 +1,84 @@
-const { colors } = require('@sk-web-gui/theme');
-const withOpacity = require('./with-opacity');
-
-module.exports = {
-  fontSize: {
-    tiny: '1rem',
-    xs: '1.2rem',
-    sm: '1.4rem',
-    base: '1.6rem',
-    lg: '1.8rem',
-    xl: '2.0rem',
-    '2xl': '2.4rem',
-    '3xl': '3.2rem',
-    '4xl': '4.0rem',
-    '5xl': '5.2rem',
-  },
-  extend: {
-    colors: {
-      ...colors,
-      current: 'currentColor',
-    },
-    cursor: {
-      base: 'var(--vc-cursor)',
-    },
-    spacing: {
-      xs: '4px',
-      sm: '8px',
-      md: '16px',
-      lg: '24px',
-      xl: '48px',
-    },
-    lineHeight: {
-      tiny: '1.4rem',
-      xs: '1.6rem',
-      sm: '2rem',
-      base: '2.4rem',
-      lg: '2.4rem',
-      xl: '3.2rem',
-      '2xl': '3.2rem',
-      '3xl': '4rem',
-      '4xl': '4.8rem',
-      '5xl': '5.8rem',
-    },
-    opacity: {
-      15: '0.15',
-    },
-    backgroundColor: {
-      base: withOpacity('--vc-colors-bg-base'),
-      fill: withOpacity('--vc-colors-bg-fill'),
-    },
-    textColor: {
-      foreground: withOpacity('--vc-colors-text-foreground'),
-      muted: withOpacity('--vc-colors-text-muted'),
-    },
-    borderRadius: {
-      base: 'var(--vc-rounded)',
-    },
-    zIndex: {
-      hide: -1,
-      none: 0,
-      base: 1,
-      docked: 10,
-      dropdown: 1000,
-      sticky: 1100,
-      banner: 1200,
-      overlay: 1300,
-      modal: 1400,
-      popover: 1500,
-      skipLink: 1600,
-      toast: 1700,
-      tooltip: 1800,
-    },
-    keyframes: {
-      'reset-overflow': {
-        'from, to': {
-          overflow: 'hidden',
-        },
-      },
-    },
-    animation: {
-      'reset-overflow': 'reset-overflow 180ms backwards',
-    },
-  },
-};
+const { colors } = require('@sk-web-gui/theme');
+const withOpacity = require('./with-opacity');
+
+module.exports = {
+  fontSize: {
+    tiny: '1rem',
+    xs: '1.2rem',
+    sm: '1.4rem',
+    base: '1.6rem',
+    lg: '1.8rem',
+    xl: '2.0rem',
+    '2xl': '2.4rem',
+    '3xl': '3.2rem',
+    '4xl': '4.0rem',
+    '5xl': '5.2rem',
+  },
+  extend: {
+    colors: {
+      ...colors,
+      current: 'currentColor',
+    },
+    cursor: {
+      base: 'var(--vc-cursor)',
+    },
+    spacing: {
+      xs: '4px',
+      sm: '8px',
+      md: '16px',
+      lg: '24px',
+      xl: '48px',
+    },
+    lineHeight: {
+      tiny: '1.4rem',
+      xs: '1.6rem',
+      sm: '2rem',
+      base: '2.4rem',
+      lg: '2.4rem',
+      xl: '3.2rem',
+      '2xl': '3.2rem',
+      '3xl': '4rem',
+      '4xl': '4.8rem',
+      '5xl': '5.8rem',
+    },
+    opacity: {
+      15: '0.15',
+    },
+    backgroundColor: {
+      base: withOpacity('--vc-colors-bg-base'),
+      fill: withOpacity('--vc-colors-bg-fill'),
+    },
+    textColor: {
+      foreground: withOpacity('--vc-colors-text-foreground'),
+      muted: withOpacity('--vc-colors-text-muted'),
+    },
+    borderRadius: {
+      base: 'var(--vc-rounded)',
+    },
+    zIndex: {
+      hide: -1,
+      none: 0,
+      base: 1,
+      docked: 10,
+      dropdown: 1000,
+      sticky: 1100,
+      banner: 1200,
+      overlay: 1300,
+      modal: 1400,
+      popover: 1500,
+      skipLink: 1600,
+      toast: 1700,
+      tooltip: 1800,
+    },
+    keyframes: {
+      'reset-overflow': {
+        'from, to': {
+          overflow: 'hidden',
+        },
+      },
+    },
+    animation: {
+      'reset-overflow': 'reset-overflow 180ms backwards',
+    },
+  },
+};