@sk-web-gui/core 1.0.2 → 1.1.0

package/src/components/zebratable.js

@@ -1,140 +0,0 @@
-module.exports = ZebraTable = () => ({
-  '.sk-zebratable-wrapper': {
-    '@apply rounded-groups': {},
-    '@apply border-1': {},
-    '@apply bg-background-content': {},
-    '&-inside': {
-      '@apply border-0 rounded-t-groups': {},
-      '@apply overflow-hidden': {},
-    },
-    '&[data-variant="table"]': {
-      '&:not([data-background="true"])': {
-        '@apply border-0': {},
-        '@apply bg-transparent': {},
-      },
-      '.sk-zebratable-wrapper-inside': {
-        '@apply border-0 rounded-b-groups': {},
-      },
-    },
-  },
-  '.sk-zebratable': {
-    '@apply w-full text-left table-auto': {},
-    '@apply text-dark-secondary': {},
-
-    '&-thead': {
-      '@apply border-b-1 border-dark-primary': {},
-      '@apply h-48': {},
-      '&-tr': {
-        '@apply table-row': {},
-        '@apply text-label-small': {},
-      },
-
-      '&-th': {
-        '@apply py-4': {},
-
-        "&[data-isColumnSortable='true']": {
-          '@apply cursor-pointer': {},
-        },
-      },
-      '@apply bg-transparent': {},
-      '&[data-background="true"]': {
-        '@apply bg-vattjom-background-200 border-b-transparent': {},
-      },
-    },
-
-    '&-sortbutton': {
-      '@apply flex items-center': {},
-      '@apply focus-visible:ring ring-ring ring-offset-0': {},
-      '@apply focus-visible:bg-vattjom-background-200': {},
-      '@apply rounded-utility': {},
-      '@apply px-16': {},
-      '@apply h-40': {},
-
-      '&-icon': {
-        '@apply inline-flex pl-sm': {},
-
-        '&-sort': {
-          '@apply text-dark-secondary': {},
-          '@apply flex flex-col': {},
-
-          svg: {
-            '@apply h-16 w-16': {},
-            '@apply first-of-type:-mb-4': {},
-            '@apply last-of-type:-mt-4': {},
-          },
-
-          "&[data-sortmodeascending='true']": {
-            '> *': {
-              '@apply last-of-type:text-dark-ghost': {},
-            },
-          },
-
-          "&[data-sortmodeascending='false']": {
-            '> *': {
-              '@apply first-of-type:text-dark-ghost': {},
-            },
-          },
-        },
-      },
-    },
-
-    '&-tbody': {
-      '@apply text-dark-secondary bg-transparent': {},
-
-      '&-tr': {
-        '@apply bg-transparent': {},
-        '@apply hover:bg-background-100': {},
-        '@apply border-b-1': {},
-        '@apply last-of-type:border-b-transparent': {},
-      },
-
-      '&-td': {
-        '@apply py-20 px-18': {},
-        '@apply text-small': {},
-      },
-    },
-
-    '&[data-dense="true"]': {
-      '.sk-zebratable': {
-        '&-thead': {
-          '&-th': {
-            '@apply py-4': {},
-          },
-        },
-        '&-tbody': {
-          '&-td': {
-            '@apply py-12': {},
-          },
-        },
-      },
-    },
-
-    '&-paginationwrapper': {
-      '@apply w-full max-w-[60rem]': {},
-      '@apply shrink': {},
-    },
-
-    '&-bottom': {
-      '@apply py-14 px-16': {},
-      '@apply border-t-1': {},
-      '@apply flex flex-row': {},
-      '@apply gap-32': {},
-      '@apply justify-between items-center': {},
-      '&-section': {
-        '@apply shrink-0': {},
-        '@apply flex flex-row': {},
-        '@apply justify-start items-center': {},
-        '@apply gap-8': {},
-        '&-label': {
-          '@apply font-normal': {},
-          '@apply text-small': {},
-          '@apply shrink-0': {},
-        },
-      },
-      '&-pagination': {
-        '@apply grow': {},
-        '@apply shrink': {},
-      },
-    },
-  },
-});

package/src/index.js

@@ -1,8 +0,0 @@
-const preset = require('./preset');
-const plugin = require('./plugin');
-
-module.exports = {
-  default: plugin,
-  plugin: plugin,
-  preset: preset,
-};

package/src/plugin.js

@@ -1,142 +0,0 @@
-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 ComboBox = require('./components/combobox');
-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 Filter = require('./components/filter');
-const Icon = require('./components/icon');
-const Input = require('./components/input');
-const Label = require('./components/label');
-const Link = require('./components/link');
-const List = require('./components/list');
-const Logo = require('./components/logo');
-const Menubar = require('./components/menubar');
-const MenuVertical = require('./components/menu-vertical');
-const Select = require('./components/select');
-const Snackbar = require('./components/snackbar');
-const Spinner = require('./components/spinner');
-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 Avatar = require('./components/avatar');
-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 Tooltip = require('./components/tooltip');
-const UserMenu = require('./components/user-menu');
-
-const DropdownFilter = require('./components/dropdown-filter');
-
-const Pagination = require('./components/pagination');
-const PopupMenu = require('./components/popup-menu');
-const Footer = require('./components/footer');
-const Header = require('./components/header');
-
-const SearchField = require('./components/search-field');
-
-const ProgressStepper = require('./components/progress-stepper');
-const ProgressBar = require('./components/progress-bar');
-
-const components = [
-  Alert,
-  AlertBanner,
-  Badge,
-  Breadcrumb,
-  ButtonGroup,
-  Button,
-  Checkbox,
-
-  Comments,
-  ContextMenu,
-  Dialog,
-  Dot,
-  Forms,
-  Filter,
-  Icon,
-  Input,
-  Label,
-  Link,
-  List,
-  Logo,
-  Menubar,
-  MenuVertical,
-  Select,
-  Snackbar,
-  Spinner,
-  Notification,
-  Radio,
-  Switch,
-  Table,
-  ZebraTable,
-  CookieConsent,
-  Modal,
-
-  Accordion,
-  Avatar,
-  Card,
-  Divider,
-
-  SideMenu,
-  TabMenu,
-  Tabs,
-  Tooltip,
-
-  UserMenu,
-
-  DropdownFilter,
-
-  SearchField,
-
-  Pagination,
-  PopupMenu,
-  Footer,
-  Header,
-  ProgressStepper,
-  ProgressBar,
-  ComboBox,
-];
-
-const defaultColors = ['warning', 'error', 'success', 'info', 'vattjom', 'juniskar', 'bjornstigen', 'gronsta'];
-
-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/preset.js

@@ -1,5 +0,0 @@
-module.exports = function (options = { tailwindForms: true, plugin: { colors: [], cssBase: true } }) {
-  return {
-    plugins: [...(options.tailwindForms ? [require('@tailwindcss/forms')] : []), require('./plugin')(options.plugin)],
-  };
-};

package/src/theme.js

@@ -1,158 +0,0 @@
-const withOpacity = require('./with-opacity');
-const colors = require('./colors');
-const units = require('./units');
-const { screens } = require('@sk-web-gui/theme');
-
-module.exports = {
-  fontSize: {
-    ...units.fontSizes,
-    tiny: '1rem',
-    xs: '1.2rem',
-    xl: units.fontSizes['h4'],
-    '2xl': units.fontSizes['h3'],
-    '3xl': units.fontSizes['h2'],
-    '4xl': units.fontSizes['h1'],
-    '5xl': units.fontSizes['h3'],
-  },
-  fontFamily: {
-    DEFAULT: ['Arial', 'Helvetica', 'sans-serif'],
-    sans: ['Arial', 'Helvetica', 'sans-serif'],
-    header: ['Raleway', 'Arial', 'Helvetica', 'sans-serif'],
-    display: ['Raleway', 'Arial', 'Helvetica', 'sans-serif'],
-  },
-  screens,
-  borderRadius: {
-    ...units.radius,
-    base: 'var(--sk-spacing-0)',
-  },
-
-  extend: {
-    backgroundPosition: {
-      ...Object.keys(units.spacing).reduce(
-        (positions, spaceKey) => ({
-          ...positions,
-          [`top-${spaceKey}`]: `center top ${units.spacing[spaceKey]}`,
-          [`right-${spaceKey}`]: `center right ${units.spacing[spaceKey]}`,
-          [`bottom-${spaceKey}`]: `center bottom ${units.spacing[spaceKey]}`,
-          [`left-${spaceKey}`]: `center left ${units.spacing[spaceKey]}`,
-        }),
-        {}
-      ),
-    },
-    boxShadow: {
-      100: [
-        '0 0.6rem 1.6rem 0 rgba(13,13,14, 0.07)',
-        '0 0.181rem 1.2rem 0 rgba(13,13,14, 0.15)',
-        '0 0.075rem 0.2rem 0 rgba(13,13,14, 0.085)',
-        '0 0.027rem 0.072rem 0 rgba(13,13,14, 0.0583)',
-      ],
-      200: [
-        '0 1.5rem 2.7rem 0 rgba(13,13,14, 0.1)',
-        '0 0.452rem 1.2rem 0 rgba(13,13,14, 0.06)',
-        '0 0.188rem 0.338rem 0 rgba(13,13,14, 0.03)',
-        '0 0.068rem 0.122rem 0 rgba(13,13,14, 0.02)',
-      ],
-    },
-    ringColor: {
-      DEFAULT: colors.ring,
-      ...colors,
-    },
-    ringOffsetWidth: {
-      DEFAULT: '0.2rem',
-    },
-    ringWidth: {
-      DEFAULT: '0.3rem',
-      0: '0px',
-    },
-    ringOpacity: {
-      DEFAULT: 1,
-    },
-    colors: {
-      ...colors,
-      current: 'currentColor',
-      gray: {
-        DEFAULT: colors.primitives.gray[600],
-        stroke: colors.divider,
-        middle: colors.primitives.gray[600],
-        light: colors.primitives.gray[300],
-        lighter: colors.primitives.gray[200],
-        ...colors.primitives.gray,
-      },
-      hover: colors.primitives.gray[600],
-      background: {
-        ...colors.background,
-        one: colors.background[100],
-        two: colors.background[200],
-      },
-    },
-    cursor: {
-      base: 'var(--tw-cursor)',
-    },
-    spacing: {
-      ...units.spacing,
-      xs: units.spacing[4],
-      sm: units.spacing[8],
-      md: units.spacing[16],
-      lg: units.spacing[24],
-      xl: units.spacing[48],
-    },
-    maxWidth: {
-      content: screens['desktop-max'],
-    },
-    borderRadius: {
-      ...units.radius,
-      base: 'var(--sk-spacing-0)',
-    },
-    lineHeight: {
-      ...units.lineHeights,
-      xs: '1.6rem',
-      xl: units.lineHeights['h4'],
-      '2xl': units.lineHeights['h3'],
-      '3xl': units.lineHeights['h2'],
-      '4xl': units.lineHeights['h1'],
-      '5xl': units.lineHeights['display-3'],
-    },
-    opacity: {
-      15: '0.15',
-    },
-    borderWidth: {
-      DEFAULT: '0.2rem',
-      1: '0.1rem',
-      2: '0.2rem',
-    },
-    backgroundColor: {
-      base: withOpacity('--sk-colors-primary-surface'),
-      fill: withOpacity('--sk-colors-bg-fill'),
-    },
-    textColor: {
-      foreground: withOpacity('--sk-colors-primary-DEFAULT'),
-      muted: withOpacity('--sk-colors-xt-muted'),
-    },
-
-    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',
-    },
-  },
-};

package/src/units.js

@@ -1,212 +0,0 @@
-module.exports = {
-  spacing: {
-    0: 'var(--sk-spacing-0)',
-    2: 'var(--sk-spacing-2)',
-    4: 'var(--sk-spacing-4)',
-    6: 'var(--sk-spacing-6)',
-    8: 'var(--sk-spacing-8)',
-    10: 'var(--sk-spacing-10)',
-    12: 'var(--sk-spacing-12)',
-    14: 'var(--sk-spacing-14)',
-    16: 'var(--sk-spacing-16)',
-    18: 'var(--sk-spacing-18)',
-    20: 'var(--sk-spacing-20)',
-    24: 'var(--sk-spacing-24)',
-    32: 'var(--sk-spacing-32)',
-    40: 'var(--sk-spacing-40)',
-    48: 'var(--sk-spacing-48)',
-    56: 'var(--sk-spacing-56)',
-    64: 'var(--sk-spacing-64)',
-    72: 'var(--sk-spacing-72)',
-    80: 'var(--sk-spacing-80)',
-  },
-
-  fontSizes: {
-    'display-1': [
-      'var(--sk-fontSize-display-1-DEFAULT)',
-      { lineHeight: 'var(--sk-lineHeight-display-1-DEFAULT)', fontWeight: 700 },
-    ],
-    'display-1-lg': [
-      'var(--sk-fontSize-display-1-lg)',
-      { lineHeight: 'var(--sk-lineHeight-display-1-lg)', fontWeight: 700 },
-    ],
-    'display-1-md': [
-      'var(--sk-fontSize-display-1-md)',
-      { lineHeight: 'var(--sk-lineHeight-display-1-md)', fontWeight: 700 },
-    ],
-    'display-1-sm': [
-      'var(--sk-fontSize-display-1-sm)',
-      { lineHeight: 'var(--sk-lineHeight-display-1-sm)', fontWeight: 700 },
-    ],
-    'display-2': [
-      'var(--sk-fontSize-display-2-DEFAULT)',
-      { lineHeight: 'var(--sk-lineHeight-display-2-DEFAULT)', fontWeight: 700 },
-    ],
-    'display-2-lg': [
-      'var(--sk-fontSize-display-2-lg)',
-      { lineHeight: 'var(--sk-lineHeight-display-2-lg)', fontWeight: 700 },
-    ],
-    'display-2-md': [
-      'var(--sk-fontSize-display-2-md)',
-      { lineHeight: 'var(--sk-lineHeight-display-2-md)', fontWeight: 700 },
-    ],
-    'display-2-sm': [
-      'var(--sk-fontSize-display-2-sm)',
-      { lineHeight: 'var(--sk-lineHeight-display-2-sm)', fontWeight: 700 },
-    ],
-    'display-3': [
-      'var(--sk-fontSize-display-3-DEFAULT)',
-      { lineHeight: 'var(--sk-lineHeight-display-3-DEFAULT)', fontWeight: 700 },
-    ],
-    'display-3-lg': [
-      'var(--sk-fontSize-display-3-lg)',
-      { lineHeight: 'var(--sk-lineHeight-display-3-lg)', fontWeight: 700 },
-    ],
-    'display-3-md': [
-      'var(--sk-fontSize-display-3-md)',
-      { lineHeight: 'var(--sk-lineHeight-display-3-md)', fontWeight: 700 },
-    ],
-    'display-3-sm': [
-      'var(--sk-fontSize-display-3-sm)',
-      { lineHeight: 'var(--sk-lineHeight-display-3-sm)', fontWeight: 700 },
-    ],
-
-    h1: ['var(--sk-fontSize-h-1-DEFAULT)', { lineHeight: 'var(--sk-lineHeight-h-1-DEFAULT)', fontWeight: 700 }],
-    'h1-lg': ['var(--sk-fontSize-h-1-lg)', { lineHeight: 'var(--sk-lineHeight-h-1-lg)', fontWeight: 700 }],
-    'h1-md': ['var(--sk-fontSize-h-1-md)', { lineHeight: 'var(--sk-lineHeight-h-1-md)', fontWeight: 700 }],
-    'h1-sm': ['var(--sk-fontSize-h-1-sm)', { lineHeight: 'var(--sk-lineHeight-h-1-sm)', fontWeight: 700 }],
-    h2: ['var(--sk-fontSize-h-2-DEFAULT)', { lineHeight: 'var(--sk-lineHeight-h-2-DEFAULT)', fontWeight: 700 }],
-    'h2-lg': ['var(--sk-fontSize-h-2-lg)', { lineHeight: 'var(--sk-lineHeight-h-2-lg)', fontWeight: 700 }],
-    'h2-md': ['var(--sk-fontSize-h-2-md)', { lineHeight: 'var(--sk-lineHeight-h-2-md)', fontWeight: 700 }],
-    'h2-sm': ['var(--sk-fontSize-h-2-sm)', { lineHeight: 'var(--sk-lineHeight-h-2-sm)', fontWeight: 700 }],
-    h3: ['var(--sk-fontSize-h-3-DEFAULT)', { lineHeight: 'var(--sk-lineHeight-h-3-DEFAULT)', fontWeight: 700 }],
-    'h3-lg': ['var(--sk-fontSize-h-3-lg)', { lineHeight: 'var(--sk-lineHeight-h-3-lg)', fontWeight: 700 }],
-    'h3-md': ['var(--sk-fontSize-h-3-md)', { lineHeight: 'var(--sk-lineHeight-h-3-md)', fontWeight: 700 }],
-    'h3-sm': ['var(--sk-fontSize-h-3-sm)', { lineHeight: 'var(--sk-lineHeight-h-3-sm)', fontWeight: 700 }],
-    h4: ['var(--sk-fontSize-h-4-DEFAULT)', { lineHeight: 'var(--sk-lineHeight-h-4-DEFAULT)', fontWeight: 700 }],
-    'h4-lg': ['var(--sk-fontSize-h-4-lg)', { lineHeight: 'var(--sk-lineHeight-h-4-lg)', fontWeight: 700 }],
-    'h4-md': ['var(--sk-fontSize-h-4-md)', { lineHeight: 'var(--sk-lineHeight-h-4-md)', fontWeight: 700 }],
-    'h4-sm': ['var(--sk-fontSize-h-4-sm)', { lineHeight: 'var(--sk-lineHeight-h-4-sm)', fontWeight: 700 }],
-
-    'label-large': [
-      'var(--sk-fontSize-label-large)',
-      { lineHeight: 'var(--sk-lineHeight-label-large)', fontWeight: 700 },
-    ],
-    'label-medium': [
-      'var(--sk-fontSize-label-medium)',
-      { lineHeight: 'var(--sk-lineHeight-label-medium)', fontWeight: 700 },
-    ],
-    'label-small': [
-      'var(--sk-fontSize-label-small)',
-      { lineHeight: 'var(--sk-lineHeight-label-small)', fontWeight: 700 },
-    ],
-
-    'input-large': [
-      'var(--sk-fontSize-input-large)',
-      { lineHeight: 'var(--sk-lineHeight-input-large)', fontWeight: 400 },
-    ],
-    'input-medium': [
-      'var(--sk-fontSize-input-medium)',
-      { lineHeight: 'var(--sk-lineHeight-input-medium)', fontWeight: 400 },
-    ],
-    'input-small': [
-      'var(--sk-fontSize-input-small)',
-      { lineHeight: 'var(--sk-lineHeight-input-small)', fontWeight: 400 },
-    ],
-
-    lead: ['var(--sk-fontSize-lead)', 'var(--sk-lineHeight-lead)'],
-    base: ['var(--sk-fontSize-base)', 'var(--sk-lineHeight-base)'],
-    large: ['var(--sk-fontSize-large)', 'var(--sk-lineHeight-large)'],
-    small: ['var(--sk-fontSize-small)', 'var(--sk-lineHeight-small)'],
-  },
-  lineHeights: {
-    'display-1': 'var(--sk-lineHeight-display-1-DEFAULT)',
-    'display-1-lg': 'var(--sk-lineHeight-display-1-lg)',
-    'display-1-md': 'var(--sk-lineHeight-display-1-md)',
-    'display-1-sm': 'var(--sk-lineHeight-display-1-sm)',
-    'display-2': 'var(--sk-lineHeight-display-2-DEFAULT)',
-    'display-2-lg': 'var(--sk-lineHeight-display-2-lg)',
-    'display-2-md': 'var(--sk-lineHeight-display-2-md)',
-    'display-2-sm': 'var(--sk-lineHeight-display-2-sm)',
-    'display-3': 'var(--sk-lineHeight-display-3-DEFAULT)',
-    'display-3-lg': 'var(--sk-lineHeight-display-3-lg)',
-    'display-3-md': 'var(--sk-lineHeight-display-3-md)',
-    'display-3-sm': 'var(--sk-lineHeight-display-3-sm)',
-
-    h1: 'var(--sk-lineHeight-h-1-DEFAULT)',
-    'h1-lg': 'var(--sk-lineHeight-h-1-lg)',
-    'h1-md': 'var(--sk-lineHeight-h-1-md)',
-    'h1-sm': 'var(--sk-lineHeight-h-1-sm)',
-    h2: 'var(--sk-lineHeight-h-2-DEFAULT)',
-    'h2-lg': 'var(--sk-lineHeight-h-2-lg)',
-    'h2-md': 'var(--sk-lineHeight-h-2-md)',
-    'h2-sm': 'var(--sk-lineHeight-h-2-sm)',
-    h3: 'var(--sk-lineHeight-h-3-DEFAULT)',
-    'h3-lg': 'var(--sk-lineHeight-h-3-lg)',
-    'h3-md': 'var(--sk-lineHeight-h-3-md)',
-    'h3-sm': 'var(--sk-lineHeight-h-3-sm)',
-    h4: 'var(--sk-lineHeight-h-4-DEFAULT)',
-    'h4-lg': 'var(--sk-lineHeight-h-4-lg)',
-    'h4-md': 'var(--sk-lineHeight-h-4-md)',
-    'h4-sm': 'var(--sk-lineHeight-h-4-sm)',
-
-    'label-large': 'var(--sk-lineHeight-label-large)',
-    'label-medium': 'var(--sk-lineHeight-label-medium)',
-    'label-small': 'var(--sk-lineHeight-label-small)',
-
-    'input-large': 'var(--sk-lineHeight-input-large)',
-    'input-medium': 'var(--sk-lineHeight-input-medium)',
-    'input-small': 'var(--sk-lineHeight-input-small)',
-
-    lead: 'var(--sk-lineHeight-lead)',
-    base: 'var(--sk-lineHeight-base)',
-    large: 'var(--sk-lineHeight-large)',
-    small: 'var(--sk-lineHeight-small)',
-  },
-  radius: {
-    DEFAULT: 'var(--sk-radius-utility-DEFAULT)',
-    full: 'var(--sk-radius-circular-DEFAULT)',
-    none: 'var(--sk-spacing-0)',
-    circular: 'var(--sk-radius-circular-DEFAULT)',
-    'circular-lg': 'var(--sk-radius-circular-lg)',
-    'circular-md': 'var(--sk-radius-circular-md)',
-    'circular-sm': 'var(--sk-radius-circular-sm)',
-
-    button: 'var(--sk-radius-button-DEFAULT)',
-    'button-lg': 'var(--sk-radius-button-lg)',
-    'button-md': 'var(--sk-radius-button-md)',
-    'button-sm': 'var(--sk-radius-button-sm)',
-    cards: 'var(--sk-radius-cards-DEFAULT)',
-    'cards-lg': 'var(--sk-radius-cards-lg)',
-    'cards-md': 'var(--sk-radius-cards-md)',
-    'cards-sm': 'var(--sk-radius-cards-sm)',
-    utility: 'var(--sk-radius-utility-DEFAULT)',
-    'utility-lg': 'var(--sk-radius-utility-lg)',
-    'utility-md': 'var(--sk-radius-utility-md)',
-    'utility-sm': 'var(--sk-radius-utility-sm)',
-    groups: 'var(--sk-radius-groups-DEFAULT)',
-    'groups-lg': 'var(--sk-radius-groups-lg)',
-    'groups-md': 'var(--sk-radius-groups-md)',
-    'groups-sm': 'var(--sk-radius-groups-sm)',
-
-    0: 'var(--sk-spacing-0)',
-    2: 'var(--sk-spacing-2)',
-    4: 'var(--sk-spacing-4)',
-    6: 'var(--sk-spacing-6)',
-    8: 'var(--sk-spacing-8)',
-    10: 'var(--sk-spacing-10)',
-    12: 'var(--sk-spacing-12)',
-    14: 'var(--sk-spacing-14)',
-    16: 'var(--sk-spacing-16)',
-    18: 'var(--sk-spacing-18)',
-    20: 'var(--sk-spacing-20)',
-    24: 'var(--sk-spacing-24)',
-    32: 'var(--sk-spacing-32)',
-    40: 'var(--sk-spacing-40)',
-    48: 'var(--sk-spacing-48)',
-    56: 'var(--sk-spacing-56)',
-    64: 'var(--sk-spacing-64)',
-    72: 'var(--sk-spacing-72)',
-    80: 'var(--sk-spacing-80)',
-  },
-};

package/src/with-opacity.js

@@ -1,6 +0,0 @@
-module.exports = function withOpacity(variableName) {
-  return ({ opacityValue }) => {
-    if (opacityValue) return `rgba(var(${variableName}), ${opacityValue})`;
-    return `rgb(var(${variableName}))`;
-  };
-};