revamp template

2025-02-01 16:44:51 +07:00
parent c432df568a
commit 276a289580
1212 changed files with 112762 additions and 0 deletions
--- a/src/plugins/components/radio.js
+++ b/src/plugins/components/radio.js
@ -0,0 +1,90 @@
+import plugin from 'tailwindcss/plugin';
+import svgToDataUri from 'mini-svg-data-uri';
+
+export default plugin(({ addComponents, theme }) => {
+  // Radio
+  addComponents({
+    '.radio[type="radio"]': {
+      'flex-shrink': '0',
+      'appearance': 'none',
+      'box-shadow': 'none',
+      'background-color': 'var(--tw-light-light)',
+      '.dark &': {
+        'background-color': 'var(--tw-coal-500)',
+      },
+      'border-radius': '50%',
+      'height': theme('custom.components.radio.DEFAULT.size'),
+      'width': theme('custom.components.radio.DEFAULT.size'),
+      'border': '1px solid var(--tw-gray-300)',
+      'background-repeat': 'no-repeat',
+      'background-size': 'contain',
+      'background-position': 'center',
+      '&:checked, &[aria-checked="true"]': {
+        'background-color': 'var(--tw-primary)',
+        'border': '1px solid var(--tw-primary)',
+        'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><circle cx="10.9995" cy="11" r="5.86667" fill="white"/></svg>')}")`,
+      },
+      '&:focus-visible': {
+        'outline': 'none',
+        'box-shadow': 'none'
+      },
+      '&:focus': {
+        'border-color': 'var(--tw-primary)',
+        'box-shadow': 'var(--tw-input-focus-box-shadow)',
+        'color': 'var(--tw-gray-700)',
+        '&::placeholder': {
+          'color': 'var(--tw-gray-600)',
+        },
+      },
+      '&:active': {
+        'color': 'var(--tw-gray-700)',
+        '&::placeholder': {
+          'color': 'var(--tw-gray-600)',
+        },
+        'box-shadow': 'none',
+      },
+      '&:disabled': {
+        'cursor': 'not-allowed',
+        'background-color': 'var(--tw-gray-200)',
+        'border': '1px solid var(--tw-gray-300)',
+        '&:checked, &[aria-checked="true"]': {
+          'background-color': 'var(--tw-primary-clarity)',
+          'border': '0',
+        },
+      },
+    },
+    '.radio-sm[type="radio"]': {
+      'height': theme('custom.components.radio.sm.size'),
+      'width': theme('custom.components.radio.sm.size'),
+      '&:checked, &[aria-checked="true"]': {
+        'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9.0002" cy="8.99995" r="4.8" fill="white"/></svg>')}")`,
+      },
+    },
+    '.radio-lg[type="radio"]': {
+      'height': theme('custom.components.radio.lg.size'),
+      'width': theme('custom.components.radio.lg.size'),
+      '&:checked, &[aria-checked="true"]': {
+        'background-image': `url("${svgToDataUri('<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="12.9997" cy="13" r="6.93333" fill="white"/></svg>')}")`,
+      },
+    },
+  });
+
+  // Group & labels
+  addComponents({
+    '.radio-group': {
+      'display': 'flex',
+      'align-items': 'center',
+      'gap': '0.4rem',
+    },
+    '.radio-label': {
+      'color': 'var(--tw-gray-800)',
+      'font-weight': theme('fontWeight.medium'),
+      'font-size': theme('fontSize.2sm'),
+      'line-height': theme('fontSize.2sm.1.lineHeight'),
+    },
+    '.radio-label-lg': {
+      'font-size': theme('fontSize.sm'),
+      'line-height': theme('fontSize.sm.1.lineHeight'),
+    },
+  });
+});