@gem-sdk/styles 1.0.0

package/src/plugins/components.js

@@ -0,0 +1,59 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
+  // Add your custom styles here
+  addUtilities({
+    '.display-inherit': {
+      display: 'inherit',
+    },
+  });
+  addComponents({
+    '.btn': {},
+    '.btn-small': {
+      padding: `${theme('padding.button-y-small')} ${theme('padding.button-x-small')}`,
+      borderRadius: theme('borderRadius.small'),
+      fontSize: theme('fontSize.button-small'),
+    },
+    '.btn-medium': {
+      padding: `${theme('padding.button-y-medium')} ${theme('padding.button-x-medium')}`,
+      borderRadius: theme('borderRadius.medium'),
+      fontSize: theme('fontSize.button-medium'),
+    },
+    '.btn-large': {
+      padding: `${theme('padding.button-y-large')} ${theme('padding.button-x-large')}`,
+      borderRadius: theme('borderRadius.large'),
+      fontSize: theme('fontSize.button-large'),
+    },
+    '.btn-primary': {
+      backgroundColor: theme('backgroundColor.button-primary'),
+      color: theme('textColor.button-primary'),
+      boxShadow: theme('boxShadow.button-primary'),
+      '&:hover': {
+        backgroundColor: theme('backgroundColor.button-primary-hover'),
+        color: theme('textColor.button-primary-hover'),
+        boxShadow: theme('boxShadow.button-primary-hover'),
+      },
+    },
+    '.btn-secondary': {
+      backgroundColor: theme('backgroundColor.button-secondary'),
+      color: theme('textColor.button-secondary'),
+      boxShadow: theme('boxShadow.button-secondary'),
+      '&:hover': {
+        backgroundColor: theme('backgroundColor.button-secondary-hover'),
+        color: theme('textColor.button-secondary-hover'),
+        boxShadow: theme('boxShadow.button-secondary-hover'),
+      },
+    },
+    '.btn-disabled': {
+      backgroundColor: theme('backgroundColor.button-disabled'),
+      color: theme('textColor.button-disabled'),
+      boxShadow: theme('boxShadow.button-disabled'),
+      cursor: 'default',
+      '&:hover': {
+        backgroundColor: theme('backgroundColor.button-disabled-hover'),
+        color: theme('textColor.button-disabled-hover'),
+        boxShadow: theme('boxShadow.button-disabled-hover'),
+      },
+    },
+  });
+});

package/src/plugins/contain-intrinsic-size.js

@@ -0,0 +1,34 @@
+const plugin = require('tailwindcss/plugin');
+
+const containIntrinsicSizePlugin = plugin(
+  function ({ theme, matchUtilities, addUtilities }) {
+    addUtilities({
+      '.content-visibility-auto': {
+        'content-visibility': 'auto',
+      },
+      '.content-visibility-hidden': {
+        'content-visibility': 'hidden',
+      },
+      '.content-visibility-visible': {
+        'content-visibility': 'visible',
+      },
+    });
+    matchUtilities(
+      {
+        'contain-intrinsic-size': (value) => {
+          return {
+            containIntrinsicSize: value,
+          };
+        },
+      },
+      { values: theme('containIntrinsicSize') },
+    );
+  },
+  {
+    theme: {
+      containIntrinsicSize: {},
+    },
+  },
+);
+
+module.exports = containIntrinsicSizePlugin;

package/src/plugins/custom-variants.js

@@ -0,0 +1,12 @@
+const plugin = require('tailwindcss/plugin');
+
+const customVariants = plugin(function ({ addVariant }) {
+  addVariant('supports-scrollbars', '@supports selector(::-webkit-scrollbar)');
+  addVariant('scrollbar', '&::-webkit-scrollbar');
+  addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
+  addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
+  addVariant('hocus', ['&:hover', '&:focus']);
+  addVariant('supports-grid', '@supports (display: grid)');
+});
+
+module.exports = customVariants;

package/src/plugins/heading.js

@@ -0,0 +1,32 @@
+const plugin = require('tailwindcss/plugin');
+
+const headingPlugin = plugin(
+  function ({ theme, matchUtilities }) {
+    matchUtilities(
+      {
+        heading: (value) => {
+          const [fontSize, lineHeight] = value.split(' ');
+          return {
+            fontSize: fontSize,
+            lineHeight: lineHeight,
+          };
+        },
+      },
+      { values: theme('heading') },
+    );
+  },
+  {
+    theme: {
+      heading: {
+        1: '76px 120%',
+        2: '57px 120%',
+        3: '43px 150%',
+        4: '32px 150%',
+        paragraph: '24px 150%',
+        small: '20px 150%',
+      },
+    },
+  },
+);
+
+module.exports = headingPlugin;

package/src/plugins/size.js

@@ -0,0 +1,20 @@
+const plugin = require('tailwindcss/plugin');
+
+const size = plugin(function ({ addComponents }) {
+  addComponents({
+    '.g-s-small': {
+      padding: '0.5em 0.75em',
+    },
+    '.g-s-medium': {
+      padding: '0.75em 1em',
+    },
+    '.g-s-large': {
+      padding: '1em 1.25em',
+    },
+    '.g-s-none': {
+      padding: '0',
+    },
+  });
+});
+
+module.exports = size;

package/src/plugins/typography.js

@@ -0,0 +1,97 @@
+const plugin = require('tailwindcss/plugin');
+
+const globalSortNameMapping = {
+  'typography-heading-1-fontFamily': 'h1-ff',
+  'typography-heading-1-fontSize': 'h1-size',
+  'typography-heading-1-fontWeight': 'h1-weight',
+  'typography-heading-1-lineHeight': 'h1-lh',
+  'typography-heading-1-letterSpacing': 'h1-ls',
+  'typography-heading-1-fontStyle': 'h1-fs',
+  'typography-heading-2-fontFamily': 'h2-ff',
+  'typography-heading-2-fontSize': 'h2-size',
+  'typography-heading-2-fontWeight': 'h2-weight',
+  'typography-heading-2-lineHeight': 'h2-lh',
+  'typography-heading-2-letterSpacing': 'h2-ls',
+  'typography-heading-2-fontStyle': 'h2-fs',
+  'typography-heading-3-fontFamily': 'h3-ff',
+  'typography-heading-3-fontSize': 'h3-size',
+  'typography-heading-3-fontWeight': 'h3-weight',
+  'typography-heading-3-lineHeight': 'h3-lh',
+  'typography-heading-3-letterSpacing': 'h3-ls',
+  'typography-heading-3-fontStyle': 'h3-fs',
+  'typography-subheading-1-fontFamily': 'sh1-ff',
+  'typography-subheading-1-fontSize': 'sh1-size',
+  'typography-subheading-1-fontWeight': 'sh1-weight',
+  'typography-subheading-1-lineHeight': 'sh1-lh',
+  'typography-subheading-1-letterSpacing': 'sh1-ls',
+  'typography-subheading-1-fontStyle': 'sh1-fs',
+  'typography-subheading-2-fontFamily': 'sh2-ff',
+  'typography-subheading-2-fontSize': 'sh2-size',
+  'typography-subheading-2-fontWeight': 'sh2-weight',
+  'typography-subheading-2-lineHeight': 'sh2-lh',
+  'typography-subheading-2-letterSpacing': 'sh2-ls',
+  'typography-subheading-2-fontStyle': 'sh2-fs',
+  'typography-subheading-3-fontFamily': 'sh3-ff',
+  'typography-subheading-3-fontSize': 'sh3-size',
+  'typography-subheading-3-fontWeight': 'sh3-weight',
+  'typography-subheading-3-lineHeight': 'sh3-lh',
+  'typography-subheading-3-letterSpacing': 'sh3-ls',
+  'typography-subheading-3-fontStyle': 'sh3-fs',
+  'typography-paragraph-1-fontFamily': 'p1-ff',
+  'typography-paragraph-1-fontSize': 'p1-size',
+  'typography-paragraph-1-fontWeight': 'p1-weight',
+  'typography-paragraph-1-lineHeight': 'p1-lh',
+  'typography-paragraph-1-letterSpacing': 'p1-ls',
+  'typography-paragraph-1-fontStyle': 'p1-fs',
+  'typography-paragraph-2-fontFamily': 'p2-ff',
+  'typography-paragraph-2-fontSize': 'p2-size',
+  'typography-paragraph-2-fontWeight': 'p2-weight',
+  'typography-paragraph-2-lineHeight': 'p2-lh',
+  'typography-paragraph-2-letterSpacing': 'p2-ls',
+  'typography-paragraph-2-fontStyle': 'p2-fs',
+  'typography-paragraph-3-fontFamily': 'p3-ff',
+  'typography-paragraph-3-fontSize': 'p3-size',
+  'typography-paragraph-3-fontWeight': 'p3-weight',
+  'typography-paragraph-3-lineHeight': 'p3-lh',
+  'typography-paragraph-3-letterSpacing': 'p3-ls',
+  'typography-paragraph-3-fontStyle': 'p3-fs',
+};
+function getShortName(name) {
+  return globalSortNameMapping[name] || name;
+}
+
+const typographyPlugin = plugin(
+  function ({ theme, addComponents }) {
+    const typos = theme('typography').reduce((acc, name) => {
+      return {
+        ...acc,
+        [`.g-${name}`]: {
+          fontSize: `var(--g-${getShortName(`typography-${name}-fontSize`)})`,
+          fontFamily: `var(--g-${getShortName(`typography-${name}-fontFamily`)})`,
+          fontWeight: `var(--g-${getShortName(`typography-${name}-fontWeight`)})`,
+          fontStyle: `var(--g-${getShortName(`typography-${name}-fontStyle`)})`,
+          lineHeight: `var(--g-${getShortName(`typography-${name}-lineHeight`)})`,
+          letterSpacing: `var(--g-${getShortName(`typography-${name}-letterSpacing`)})`,
+        },
+      };
+    }, {});
+    addComponents(typos);
+  },
+  {
+    theme: {
+      typography: [
+        'heading-1',
+        'heading-2',
+        'heading-3',
+        'subheading-1',
+        'subheading-2',
+        'subheading-3',
+        'paragraph-1',
+        'paragraph-2',
+        'paragraph-3',
+      ],
+    },
+  },
+);
+
+module.exports = typographyPlugin;

package/src/preset.js

@@ -0,0 +1,130 @@
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+/** @type {import('tailwindcss').Config} */
+const preset = {
+  darkMode: 'media',
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+  theme: {
+    screens: {
+      tablet: { max: '1023px' },
+      mobile: { max: '767px' },
+    },
+    extend: {
+      animation: {
+        wiggle: 'wiggle 1s ease-in-out infinite',
+        grow: 'scale .3s linear',
+        'progress-bar': 'progress 1s ease-in infinite',
+        shift: 'stockCounterShift 2s linear infinite',
+      },
+      aspectRatio: {
+        '4/3': '4 / 3',
+      },
+      backgroundColor: {
+        bold: 'var(--g-c-bg-1)',
+        normal: 'var(--g-c-bg-2)',
+        light: 'var(--g-c-bg-3)',
+      },
+      backgroundImage: {
+        'stock-counter-animate':
+          'linear-gradient( 45deg, transparent 25%, rgba(238, 238, 238, 0.5) 25%, rgba(238, 238, 238, 0.5) 30%, transparent 30%, transparent 35%, rgba(238, 238, 238, 0.5) 35%, rgba(238, 238, 238, 0.5) 70%, transparent 70% )',
+      },
+      boxShadow: {
+        'card-1': '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
+        'card-2': '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
+        'card-3': '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
+        'card-4': '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
+        'card-5': '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
+        glasses:
+          '0 0 0 3px rgb(255 255 255 / 85%), 0 0 3px 3px rgb(0 0 0 / 25%), inset 0 0 40px 2px rgb(0 0 0 / 25%)',
+        'stock-counter': 'inset 0 0px 1px rgb(0 0 0 / 20%), inset 0 -2px 1px rgb(0 0 0 / 20%)',
+      },
+      fontSize: {
+        0: '0px',
+      },
+      fontFamily: {
+        'g-body': ['var(--g-font-body)', ...defaultTheme.fontFamily.serif],
+        'g-heading': ['var(--g-font-heading)', ...defaultTheme.fontFamily.serif],
+        'g-code': ['var(--g-font-code)', ...defaultTheme.fontFamily.serif],
+      },
+      keyframes: {
+        wiggle: {
+          '0%, 100%': { transform: 'rotate(-3deg)' },
+          '50%': { transform: 'rotate(3deg)' },
+        },
+        scale: {
+          '0%': { transform: 'scale(1.0)', '-webkit-transform': 'scale(1.0)' },
+          '100%': { transform: 'scale(1.1)', '-webkit-transform': 'scale(1.1)' },
+        },
+        flashing: {
+          '0%': { opacity: 0.2 },
+          '50%': { opacity: 0.4 },
+          '100%': { opacity: 1 },
+        },
+        progress: {
+          '0%': { width: '0%' },
+          '100%': { width: '99%' },
+        },
+        stockCounterShift: {
+          to: { backgroundPosition: '60px 100%' },
+        },
+      },
+      maxWidth: {
+        tablet: '1024px',
+        mobile: '768px',
+      },
+      textColor: {
+        heading: 'var(--g-c-text-1)',
+        body: 'var(--g-c-text-2)',
+        placeholder: 'var(--g-c-text-3)',
+      },
+      colors: {
+        g: {
+          brand: 'var(--g-c-brand)',
+          highlight: 'var(--g-c-highlight)',
+          'text-1': 'var(--g-c-text-1)',
+          'text-2': 'var(--g-c-text-2)',
+          'text-3': 'var(--g-c-text-3)',
+          'bg-1': 'var(--g-c-bg-1)',
+          'bg-2': 'var(--g-c-bg-2)',
+          'bg-3': 'var(--g-c-bg-3)',
+          'line-1': 'var(--g-c-line-1)',
+          'line-2': 'var(--g-c-line-2)',
+          'line-3': 'var(--g-c-line-3)',
+          success: 'var(--g-c-success)',
+          error: 'var(--g-c-error)',
+          warning: 'var(--g-c-warning)',
+          info: 'var(--g-c-info)',
+        },
+      },
+      zIndex: {
+        1: 1,
+        2: 2,
+        3: 3,
+        4: 4,
+        5: 5,
+        6: 6,
+        7: 7,
+        8: 8,
+        9: 9,
+        60: 60,
+        70: 70,
+        80: 80,
+        90: 90,
+        100: 100,
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/line-clamp'),
+    require('./plugins/components'),
+    require('./plugins/typography'),
+    require('./plugins/contain-intrinsic-size'),
+    require('./plugins/size'),
+    require('./plugins/custom-variants'),
+    require('./plugins/animation'),
+  ],
+};
+
+module.exports = preset;