feat(chips): m3 styles

konstaui · Aug 11, 2022 · 33cc2bc · 33cc2bc
1 parent ca982d2
commit 33cc2bc
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 19 deletions.
diff --git a/kitchen-sink/react/pages/Chips.jsx b/kitchen-sink/react/pages/Chips.jsx
@@ -52,7 +52,7 @@ export default function ChipsPage() {
           media={
             <img
               alt="avatar"
-              className="h-7 rounded-full"
+              className="ios:h-7 material:h-6 rounded-full"
               src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
             />
           }
@@ -64,7 +64,7 @@ export default function ChipsPage() {
           media={
             <img
               alt="avatar"
-              className="h-7 rounded-full"
+              className="ios:h-7 material:h-6 rounded-full"
               src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
             />
           }
@@ -76,7 +76,7 @@ export default function ChipsPage() {
           media={
             <img
               alt="avatar"
-              className="h-7 rounded-full"
+              className="ios:h-7 material:h-6 rounded-full"
               src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
             />
           }
@@ -101,7 +101,7 @@ export default function ChipsPage() {
           media={
             <img
               alt="avatar"
-              className="h-7 rounded-full"
+              className="ios:h-7 material:h-6 rounded-full"
               src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
             />
           }

diff --git a/kitchen-sink/svelte/pages/Chips.svelte b/kitchen-sink/svelte/pages/Chips.svelte
@@ -44,7 +44,7 @@
       <img
         slot="media"
         alt="avatar"
-        class="h-7 rounded-full"
+        class="ios:h-7 material:h-6 rounded-full"
         src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
       />
       Jane Doe
@@ -53,7 +53,7 @@
       <img
         slot="media"
         alt="avatar"
-        class="h-7 rounded-full"
+        class="ios:h-7 material:h-6 rounded-full"
         src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
       />
       John Doe
@@ -62,7 +62,7 @@
       <img
         slot="media"
         alt="avatar"
-        class="h-7 rounded-full"
+        class="ios:h-7 material:h-6 rounded-full"
         src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
       />
       Adam Smith
@@ -86,7 +86,7 @@
       <img
         slot="media"
         alt="avatar"
-        class="h-7 rounded-full"
+        class="ios:h-7 material:h-6 rounded-full"
         src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
       />
       Adam Smith

diff --git a/kitchen-sink/vue/pages/Chips.vue b/kitchen-sink/vue/pages/Chips.vue
@@ -30,7 +30,7 @@
         <template #media>
           <img
             alt="avatar"
-            class="h-7 rounded-full"
+            class="ios:h-7 material:h-6 rounded-full"
             src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
           />
         </template>
@@ -40,7 +40,7 @@
         <template #media>
           <img
             alt="avatar"
-            class="h-7 rounded-full"
+            class="ios:h-7 material:h-6 rounded-full"
             src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
           />
         </template>
@@ -50,7 +50,7 @@
         <template #media>
           <img
             alt="avatar"
-            class="h-7 rounded-full"
+            class="ios:h-7 material:h-6 rounded-full"
             src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
           />
         </template>
@@ -67,7 +67,7 @@
         <template #media>
           <img
             alt="avatar"
-            class="h-7 rounded-full"
+            class="ios:h-7 material:h-6 rounded-full"
             src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
           />
         </template>

diff --git a/src/shared/classes/ChipClasses.js b/src/shared/classes/ChipClasses.js
@@ -1,11 +1,20 @@
+import { cls } from '../cls.js';
+
 export const ChipClasses = (props, colors) => {
   return {
     base: {
-      common: `${colors.text} text-sm inline-flex items-center justify-center align-middle rounded-full px-3`,
+      common: `text-sm inline-flex items-center justify-center align-middle rounded-full px-3`,
       ios: 'rounded-full h-7',
-      material: 'rounded-lg h-8',
-      fill: `${colors.bg}`,
-      outline: `border ${colors.border}`,
+      material: 'rounded-lg h-8 font-medium',
+      fill: {
+        ios: cls(colors.fillBgIos, colors.fillTextIos),
+        material: cls(colors.fillBgMaterial, colors.fillTextMaterial),
+      },
+      outline: {
+        common: `border`,
+        ios: cls(colors.outlineTextIos, colors.outlineBorderIos),
+        material: cls(colors.outlineTextMaterial, colors.outlineBorderMaterial),
+      },
     },
     media: {
       common: '-my-1 mr-1 select-none',

diff --git a/src/shared/colors/ChipColors.js b/src/shared/colors/ChipColors.js
@@ -2,12 +2,32 @@ import { cls } from '../cls.js';
 
 export const ChipColors = (colorsProp = {}, dark) => {
   return {
-    bg: cls(`bg-black bg-opacity-10`, dark('dark:bg-white dark:bg-opacity-10')),
-    text: 'text-current',
-    border: cls(
+    fillTextIos: 'text-current',
+    fillTextMaterial: cls(
+      'text-md-light-on-secondary-container',
+      dark('dark:text-md-dark-on-secondary-container')
+    ),
+    fillBgIos: cls(
+      `bg-black bg-opacity-10`,
+      dark('dark:bg-white dark:bg-opacity-10')
+    ),
+    fillBgMaterial: cls(
+      'bg-md-light-secondary-container',
+      dark('dark:bg-md-dark-secondary-container')
+    ),
+    outlineTextIos: cls('text-current'),
+    outlineTextMaterial: cls(
+      'text-md-light-on-surface',
+      dark('dark:text-md-dark-on-surface')
+    ),
+    outlineBorderIos: cls(
       `border-black border-opacity-20`,
       dark('dark:border-white dark:border-opacity-20')
     ),
+    outlineBorderMaterial: cls(
+      `border-md-light-outline`,
+      dark('dark:border-md-dark-outline')
+    ),
     ...colorsProp,
   };
 };