@aparajita/tailwind-ionic - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [2.1.0](https://github.com/aparajita/tailwind-ionic/compare/v2.0.1...v2.1.0) (2023-03-30)
+
+
+### Features
+
+* add ion-checked and part variants ([ef2570e](https://github.com/aparajita/tailwind-ionic/commit/ef2570efd967917d7b05c2c77aa123402a5218c4))
+
 ## [2.0.1](https://github.com/aparajita/tailwind-ionic/compare/v2.0.0...v2.0.1) (2023-03-03)
@@ -7,0 +14,0 @@

index.js

@@ -0,1 +1,3 @@
+// noinspection JSCheckFunctionSignatures
+
 const fs = require('fs')
@@ -18,3 +20,3 @@ const c = require('ansi-colors')
 
-function addVariants(add) {
+function addGlobalVariants(add) {
   for (const variant of variants) {
@@ -77,4 +79,46 @@ const parts = variant.split(':')
   () => {
-    return function ({ addVariant }) {
-      addVariants(addVariant)
+    return function ({ addVariant, matchVariant }) {
+      addGlobalVariants(addVariant)
+      addVariant('ion-checked', ['&.checkbox-checked', '&.radio-checked'])
+      matchVariant(
+        'part',
+        (value) => {
+          return `&::part(${value})`
+        },
+        {
+          values: {
+            arrow: 'arrow',
+            backdrop: 'backdrop',
+            background: 'background',
+            bar: 'bar',
+            'bar-active': 'bar-active',
+            button: 'button',
+            'collapsed-indicator': 'collapsed-indicator',
+            'close-icon': 'close-icon',
+            container: 'container',
+            content: 'content',
+            'detail-icon': 'detail-icon',
+            expanded: 'expanded',
+            handle: 'handle',
+            header: 'header',
+            icon: 'icon',
+            image: 'image',
+            indicator: 'indicator',
+            'indicator-background': 'indicator-background',
+            knob: 'knob',
+            mark: 'mark',
+            message: 'message',
+            native: 'native',
+            pin: 'pin',
+            placeholder: 'placeholder',
+            progress: 'progress',
+            scroll: 'scroll',
+            separator: 'separator',
+            stream: 'stream',
+            text: 'text',
+            tick: 'tick',
+            track: 'track'
+          }
+        }
+      )
     }
@@ -91,3 +135,4 @@ },
       'mode-ios',
-      'mode-md'
+      'mode-md',
+      'ion-checked'
     ]
@@ -94,0 +139,0 @@

package.json

 {
   "name": "@aparajita/tailwind-ionic",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Tailwind utilities for Ionic",
@@ -5,0 +5,0 @@ "author": "Aparajita Fishman",

README.md

@@ -8,3 +8,5 @@ <div class="markdown-body">
 - Variants which help you to target specific platforms and modes in an Ionic application.
+- A `part` variant to target CSS parts in an Ionic component (or any other component that uses CSS parts).
 - Ionic CSS theme variables are converted into Tailwind colors.
+- An `ion-checked` variant to target the checked state of an Ionic checkbox or radio button. 
 
@@ -33,5 +35,5 @@ ## Breaking changes from v1.x
 
-### Variants
+### Platform/mode variants
 
-The variants in the table below are supported. Variants lower in the list are more specific and are applied after variants higher in the list. This means that a less specific variant applied to a given class will be overridden by a more specific variant applied to the same class.
+The platform/mode variants in the table below are supported. Variants lower in the list are more specific and are applied after variants higher in the list. This means that a less specific variant applied to a given class will be overridden by a more specific variant applied to the same class.
 
@@ -74,2 +76,75 @@ Note that you cannot combine variants directly, but you can combine the effect of separate variants.
 
+### Part variants
+
+The `part-` variant allows you to target CSS parts in an Ionic component (or any other component that uses CSS parts). All of the currently defined component parts are provided as auto-complete suggestions in your editor. Part variants can be combined with other variants.
+
+#### Examples
+
+```html
+<!-- Make a button fully rounded -->
+<ion-button class="part-native:rounded-full" />
+
+<!-- Equivalent to: -->
+<ion-button class="my-button" />
+
+<style>
+  .my-button::part(native) {
+    @apply rounded-full;
+  }
+</style>
+```
+
+### Checked variant
+
+The `ion-checked` variant allows you to target the checked state of an `ion-checkbox` or `ion-radio`. It can be combined with other variants, in particular the `part-` variant, to accomplish complex styling of `ion-checkbox` and `ion-radio` components entirely with Tailwind.
+
+#### Examples
+
+Here is a radio group using images for the radio buttons. The checked state is indicated by a blue ring.
+
+![Radio group with images](./example.png)
+
+Here is the markup:
+
+```html
+<ion-radio-group
+  v-model="appearance"
+  class="flex w-full justify-around pt-5 pb-3"
+>
+  <div
+    v-for="info in kAppearanceInfo"
+    :key="info.label"
+    class="relative flex flex-col items-center"
+  >
+    <ion-radio
+      :value="info.value"
+      class="m-0 h-[80px] w-[72px] rounded-lg part-container:border-none part-mark:hidden ion-checked:ring ion-checked:ring-blue-500"
+    />
+    <img
+      :src="info.src"
+      :alt="info.label"
+      class="absolute inset-0 h-[80px] w-[72px] rounded-lg border"
+      :class="info.class"
+    />
+    <p class="mt-2 text-sm text-ion-color-dark">
+      {{ info.label }}
+    </p>
+  </div>
+</ion-radio-group>
+```
+
+Or, for example, if you want a checkbox to be `yellow-500` in the unchecked state and `indigo-500` with an `indigo-400` border in the checked state, you would do this:
+
+```html
+<ion-checkbox
+  class="
+    part-container:!bg-yellow-500 
+    ion-checked:part-container:!bg-indigo-500 
+    ion-checked:part-container:!border-indigo-400
+  "
+/>
+```
+
+Note that `part-container` is used to target the checkbox markup itself and `!` is necessary to override the Ionic styles.
+
 ### Theme colors
@@ -76,0 +151,0 @@

No alert changes

Improved metrics

Total package byte prevSize

142721

613.18%

Number of package files

21

5%

Lines of code

151

41.12%

Number of lines in readme file

232

47.77%

No dependency changes