@sigmaott/base-next 1.0.6

package/uno.config.ts

@@ -0,0 +1,375 @@
+import type {
+  UserConfig,
+} from 'unocss'
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  presetWebFonts,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import { presetHyrdUi } from './hyrd-ui.preset'
+
+export const unoConfig: UserConfig = {
+  theme: {
+    colors: {
+      primary: {
+        DEFAULT: 'var(--el-color-primary)',
+        light: {
+          3: 'var(--el-color-primary-light-3)',
+          5: 'var(--el-color-primary-light-5)',
+          7: 'var(--el-color-primary-light-7)',
+          8: 'var(--el-color-primary-light-8)',
+          9: 'var(--el-color-primary-light-9)',
+        },
+        dark: {
+          2: 'var(--el-color-primary-dark-2)',
+        },
+      },
+
+      success: {
+        DEFAULT: 'var(--el-color-success)',
+        light: {
+          3: 'var(--el-color-success-light-3)',
+          5: 'var(--el-color-success-light-5)',
+          7: 'var(--el-color-success-light-7)',
+          8: 'var(--el-color-success-light-8)',
+          9: 'var(--el-color-success-light-9)',
+        },
+        dark: {
+          2: 'var(--el-color-success-dark-2)',
+        },
+      },
+
+      warning: {
+        DEFAULT: 'var(--el-color-warning)',
+        light: {
+          3: 'var(--el-color-warning-light-3)',
+          5: 'var(--el-color-warning-light-5)',
+          7: 'var(--el-color-warning-light-7)',
+          8: 'var(--el-color-warning-light-8)',
+          9: 'var(--el-color-warning-light-9)',
+        },
+        dark: {
+          2: 'var(--el-color-warning-dark-2)',
+        },
+      },
+
+      danger: {
+        DEFAULT: 'var(--el-color-danger)',
+
+        light: {
+          3: 'var(--el-color-danger-light-3)',
+          5: 'var(--el-color-danger-light-5)',
+          7: 'var(--el-color-danger-light-7)',
+          8: 'var(--el-color-danger-light-8)',
+          9: 'var(--el-color-danger-light-9)',
+        },
+        dark: {
+          2: 'var(--el-color-danger-dark-2)',
+        },
+      },
+
+      error: {
+        DEFAULT: 'var(--el-color-error)',
+        light: {
+          3: 'var(--el-color-error-light-3)',
+          5: 'var(--el-color-error-light-5)',
+          7: 'var(--el-color-error-light-7)',
+          8: 'var(--el-color-error-light-8)',
+          9: 'var(--el-color-error-light-9)',
+        },
+        dark: {
+          2: 'var(--el-color-error-dark-2)',
+        },
+      },
+
+      info: {
+        DEFAULT: 'var(--el-color-info)',
+        light: {
+          3: 'var(--el-color-info-light-3)',
+          5: 'var(--el-color-info-light-5)',
+          7: 'var(--el-color-info-light-7)',
+          8: 'var(--el-color-info-light-8)',
+          9: 'var(--el-color-info-light-9)',
+        },
+        dark: {
+          2: 'var(--el-color-info-dark-2)',
+        },
+      },
+
+      bg: {
+        DEFAULT: 'var(--el-bg-color)',
+        page: 'var(--el-bg-color-page)',
+        overlay: 'var(--el-bg-color-overlay)',
+      },
+
+      text: {
+        primary: 'var(--el-text-color-primary)',
+        regular: 'var(--el-text-color-regular)',
+        secondary: 'var(--el-text-color-secondary)',
+        placeholder: 'var(--el-text-color-placeholder)',
+        disabled: 'var(--el-text-color-disabled)',
+      },
+
+      border: {
+        DEFAULT: 'var(--el-border-color)',
+        light: 'var(--el-border-color-light)',
+        lighter: 'var(--el-border-color-lighter)',
+        extraLight: 'var(--el-border-color-extra-light)',
+        dark: 'var(--el-border-color-dark)',
+        darker: 'var(--el-border-color-darker)',
+        hover: 'var(--el-border-color-hover)',
+      },
+
+      fill: {
+        DEFAULT: 'var(--el-fill-color)',
+        light: 'var(--el-fill-color-light)',
+        lighter: 'var(--el-fill-color-lighter)',
+        extraLight: 'var(--el-fill-color-extra-light)',
+        dark: 'var(--el-fill-color-dark)',
+        darker: 'var(--el-fill-color-darker)',
+        blank: 'var(--el-fill-color-blank)',
+      },
+
+      disabled: {
+        bg: 'var(--el-disabled-bg-color)',
+        text: 'var(--el-disabled-text-color)',
+        border: 'var(--el-disabled-border-color)',
+      },
+
+      overlay: {
+        DEFAULT: 'var(--el-overlay-color)',
+        light: 'var(--el-overlay-color-light)',
+        lighter: 'var(--el-overlay-color-lighter)',
+      },
+
+      mask: {
+        DEFAULT: 'var(--el-mask-color)',
+        extraLight: 'var(--el-mask-color-extra-light)',
+      },
+      svgMonochromeGrey: 'var(--el-svg-monochrome-grey)',
+    },
+    boxShadow: {
+      danger: '0 0 0 1px var(--el-color-danger) inset',
+    },
+  },
+  shortcuts: [
+    ['text-helper', 'text-13px leading-20px mb-4px font-medium'],
+    ['flex-center', 'flex items-center justify-center'],
+    ['el-form-label', '[&_.el-form-item\\_\\_label]:(mb-2px! font-semibold!)'],
+  ],
+  presets: [
+    presetTypography({
+      cssExtend: theme => ({
+        'h1,h2,h3,h4,h5,h6': {
+          'color': 'var(--un-prose-headings)',
+          'font-weight': '600',
+          'line-height': 1.05,
+        },
+        'a': {
+          'color': 'hsl(var(--primary))',
+          'text-decoration': 'underline',
+          'font-weight': '500',
+        },
+        'a code': {
+          color: 'var(--primary)',
+        },
+        'p,ul,ol,pre': {
+          'margin': '0.25em 0',
+          'line-height': 1.55,
+        },
+        'p': {
+          'min-height': '0.5em',
+        },
+        'blockquote': {
+          'margin': '1em 0',
+          'padding-left': '1em',
+          'font-style': 'italic',
+          'border-left': '.25em solid var(--un-prose-borders)',
+        },
+        'br': {
+          content: '""',
+          height: '1px',
+          display: 'block',
+        },
+        '.ui-br': {
+          content: '""',
+          height: '1px',
+          display: 'block',
+        },
+        // taking 16px as a base, we scale h1, h2, h3, and h4 like
+        // 16 (base) > 18 (h4) > 22 (h3) > 28 (h2) > 36 (h1)
+        'h1': {
+          'margin': '1rem 0',
+          'font-size': '2.25em',
+        },
+        'h2': {
+          'margin': '1rem 0',
+          'font-size': '1.75em',
+        },
+        'h3': {
+          'margin': '1rem 0',
+          'font-size': '1.375em',
+        },
+        'h4': {
+          'margin': '1rem 0',
+          'font-size': '1.125em',
+        },
+        'img,video': {
+          'max-width': '100%',
+        },
+        'figure,picture': {
+          margin: '1em 0',
+        },
+        'figcaption': {
+          'color': 'var(--un-prose-captions)',
+          'font-size': '.875em',
+        },
+        'code': {
+          'color': 'var(--un-prose-code)',
+          'font-size': '.875em',
+          'font-weight': 600,
+          'font-family': theme.fontFamily?.mono,
+        },
+        ':not(pre) > code::before,:not(pre) > code::after': {
+          content: '"`"',
+        },
+        'pre': {
+          'padding': '1.25rem 1.5rem',
+          'overflow-x': 'auto',
+          'border-radius': '.375rem',
+        },
+        'pre,code': {
+          'white-space': 'pre',
+          'word-spacing': 'normal',
+          'word-break': 'normal',
+          'word-wrap': 'normal',
+          '-moz-tab-size': 4,
+          '-o-tab-size': 4,
+          'tab-size': 4,
+          '-webkit-hyphens': 'none',
+          '-moz-hyphens': 'none',
+          'hyphens': 'none',
+          'background': 'transparent',
+        },
+        'pre code': {
+          'font-weight': 'inherit',
+        },
+        'ol,ul': {
+          'padding-left': '1.25em',
+        },
+        'ol': {
+          'list-style-type': 'decimal',
+        },
+        'ol[type="A"]': {
+          'list-style-type': 'upper-alpha',
+        },
+        'ol[type="a"]': {
+          'list-style-type': 'lower-alpha',
+        },
+        'ol[type="A" s]': {
+          'list-style-type': 'upper-alpha',
+        },
+        'ol[type="a" s]': {
+          'list-style-type': 'lower-alpha',
+        },
+        'ol[type="I"]': {
+          'list-style-type': 'upper-roman',
+        },
+        'ol[type="i"]': {
+          'list-style-type': 'lower-roman',
+        },
+        'ol[type="I" s]': {
+          'list-style-type': 'upper-roman',
+        },
+        'ol[type="i" s]': {
+          'list-style-type': 'lower-roman',
+        },
+        'ol[type="1"]': {
+          'list-style-type': 'decimal',
+        },
+        'ul': {
+          'list-style-type': 'disc',
+        },
+        'ol > li::marker,ul > li::marker,summary::marker': {
+          color: 'var(--un-prose-lists)',
+        },
+        'hr': {
+          margin: '2em 0',
+          border: '1px solid var(--un-prose-hr)',
+        },
+        'table': {
+          'display': 'block',
+          'margin': '1em 0',
+          'border-collapse': 'collapse',
+          'overflow-x': 'auto',
+        },
+        'tr:nth-child(2n)': {
+          background: 'var(--un-prose-bg-soft)',
+        },
+        'td,th': {
+          border: '1px solid var(--un-prose-borders)',
+          padding: '.625em 1em',
+        },
+        'abbr': {
+          cursor: 'help',
+        },
+        'kbd': {
+          'color': 'var(--un-prose-code)',
+          'border': '1px solid',
+          'padding': '.25rem .5rem',
+          'font-size': '.875em',
+          'border-radius': '.25rem',
+        },
+        'details': {
+          margin: '1em 0',
+          padding: '1.25rem 1.5rem',
+          background: 'var(--un-prose-bg-soft)',
+        },
+        'summary': {
+          'cursor': 'pointer',
+          'font-weight': '600',
+        },
+      }),
+    }),
+    presetAttributify(),
+    presetHyrdUi(),
+    presetIcons({
+      warn: true,
+    }),
+    presetUno(),
+    presetWebFonts({
+      provider: 'google',
+      fonts: {
+        sans: {
+          name: 'Inter',
+          weights: ['200', '300', '400', '500', '600', '700', '800', '900'],
+          italic: true,
+        },
+        jakarta: {
+          name: 'Plus Jakarta Sans',
+          weights: ['200', '300', '400', '500', '600', '700', '800', '900'],
+          italic: true,
+        },
+      },
+    }),
+  ],
+  safelist: [],
+  rules: [
+    ['box-shadow', { 'box-shadow': 'var(--el-box-shadow)' }],
+    ['box-shadow-light', { 'box-shadow': 'var(--el-box-shadow-light)' }],
+    ['box-shadow-lighter', { 'box-shadow': 'var(--el-box-shadow-lighter)' }],
+    ['box-shadow-dark', { 'box-shadow': 'var(--el-box-shadow-dark)' }],
+    ['break-word', { 'word-break': 'break-word' }],
+  ],
+  transformers: [
+    transformerVariantGroup(),
+    transformerDirectives(),
+  ],
+}
+
+export default defineConfig(unoConfig)