@idds/styles 1.0.26 → 1.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/styles",
-  "version": "1.0.26",
+  "version": "1.0.28",
   "description": "Shared CSS styles and colors for INA Digital Design System",
   "type": "module",
   "main": "./src/index.css",

package/src/components/toast.css

@@ -80,8 +80,8 @@
 .ina-toast {
   pointer-events: auto;
   border-radius: var(--ina-radius-lg);
-  box-shadow: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 12px 16px -4px rgba(10, 13, 18, 0.08),
+    0 4px 6px -2px rgba(10, 13, 18, 0.03);
   padding: var(--ina-spacing-4);
   display: flex;
   align-items: center;
@@ -91,6 +91,8 @@
   background-color: var(--ina-background-primary);
   border: 1px solid var(--ina-stroke-primary);
   color: var(--ina-content-primary);
+  min-height: 40px;
+  font-weight: 500;
 }
 
 /* Toast content */
@@ -112,7 +114,7 @@
 
 .ina-toast__title {
   font-size: var(--ina-font-xs);
-  font-weight: var(--ina-font-semibold);
+  font-weight: 500;
   line-height: 1.4;
 }
 
@@ -152,70 +154,24 @@
 }
 
 /* Style variants */
-.ina-toast--style-outline {
-}
-.ina-toast--style-solid {
-}
-
-/* Variant styles - Outline */
-.ina-toast--variant-neutral.ina-toast--style-outline {
-  background-color: var(--ina-neutral-25) !important;
-  border: 1px solid var(--ina-content-primary) !important;
-  color: var(--ina-content-primary) !important;
-}
-
-.ina-toast--variant-positive.ina-toast--style-outline {
-  background-color: var(--ina-positive-100) !important;
-  border: 1px solid var(--ina-positive-500) !important;
-  color: var(--ina-positive-500) !important;
-}
-
-.ina-toast--variant-warning.ina-toast--style-outline {
-  background-color: var(--ina-warning-100) !important;
-  border: 1px solid var(--ina-warning-500) !important;
-  color: var(--ina-warning-500) !important;
-}
-
-.ina-toast--variant-info.ina-toast--style-outline {
-  background-color: var(--ina-info-100) !important;
-  border: 1px solid var(--ina-info-300) !important;
-  color: var(--ina-info-500) !important;
-}
-
-.ina-toast--variant-negative.ina-toast--style-outline {
-  background-color: var(--ina-negative-100) !important;
-  border: 1px solid var(--ina-negative-300) !important;
-  color: var(--ina-negative-500) !important;
-}
+/* Note: Style variants are handled by state styles below */
 
-/* Variant styles - Solid */
-.ina-toast--variant-neutral.ina-toast--style-solid {
-  background-color: var(--ina-neutral-25) !important;
+/* State styles - Solid (default style) */
+.ina-toast--state-default.ina-toast--style-solid {
+  background-color: var(--ina-content-primary) !important;
   border: 1px solid var(--ina-content-primary) !important;
-  color: var(--ina-content-primary) !important;
-}
-
-.ina-toast--variant-positive.ina-toast--style-solid {
-  background-color: var(--ina-positive-500) !important;
-  border: 1px solid var(--ina-positive-500) !important;
   color: var(--ina-white) !important;
 }
 
-.ina-toast--variant-warning.ina-toast--style-solid {
-  background-color: var(--ina-warning-500) !important;
-  border: 1px solid var(--ina-warning-500) !important;
+.ina-toast--state-destructive.ina-toast--style-solid {
+  background-color: var(--ina-negative-500) !important;
+  border: 1px solid var(--ina-negative-500) !important;
   color: var(--ina-white) !important;
 }
 
-.ina-toast--variant-info.ina-toast--style-solid {
-  background-color: var(--ina-info-500) !important;
-  border: 1px solid var(--ina-info-500) !important;
-  color: var(--ina-white) !important;
-}
-
-.ina-toast--variant-negative.ina-toast--style-solid {
-  background-color: var(--ina-negative-500) !important;
-  border: 1px solid var(--ina-negative-500) !important;
+.ina-toast--state-positive.ina-toast--style-solid {
+  background-color: var(--ina-positive-700) !important;
+  border: 1px solid var(--ina-positive-700) !important;
   color: var(--ina-white) !important;
 }
 
@@ -229,17 +185,41 @@
 }
 
 /* Responsive adjustments */
-@media (max-width: 640px) {
+/* Mobile (< 640px) */
+@media (max-width: 639px) {
   .ina-toast {
     max-width: calc(100vw - var(--ina-spacing-8));
     padding: var(--ina-spacing-3);
+    min-height: 40px;
   }
 
   .ina-toast__title {
-    font-size: var(--ina-font-sm);
+    font-size: var(--ina-font-xs);
   }
 
   .ina-toast__description {
+    font-size: var(--ina-font-2xs);
+  }
+}
+
+/* Small (>= 640px) */
+@media (min-width: 640px) {
+  .ina-toast {
+    min-height: 48px;
+  }
+
+  .ina-toast__title {
     font-size: var(--ina-font-xs);
   }
 }
+
+/* Large (>= 1024px) */
+@media (min-width: 1024px) {
+  .ina-toast {
+    min-height: 52px;
+  }
+
+  .ina-toast__title {
+    font-size: var(--ina-font-sm);
+  }
+}

package/src/tailwind/ts/bgn.ts

@@ -3,7 +3,7 @@
  * Banking & Financial Services Theme
  */
 
-const bgnTokens: Record<string, string> = {
+const bgnColorTokens: Record<string, string> = {
   // Primary shades
   'primary-50': 'var(--ina-primary-50)',
   'primary-100': 'var(--ina-primary-100)',
@@ -17,4 +17,4 @@ const bgnTokens: Record<string, string> = {
   'primary-900': 'var(--ina-primary-900)',
 };
 
-export default bgnTokens;
+export default bgnColorTokens;

package/src/tailwind/ts/bkn.ts

@@ -3,7 +3,7 @@
  * Badan Kepegawaian Negara Theme
  */
 
-const bknTokens: Record<string, string> = {
+const bknColorTokens: Record<string, string> = {
   // Primary shades
   'primary-25': 'var(--ina-primary-25)',
   'primary-50': 'var(--ina-primary-50)',
@@ -35,4 +35,4 @@ const bknTokens: Record<string, string> = {
   'bkn-neutral-hover': 'var(--ina-bkn-neutral-hover)',
 };
 
-export default bknTokens;
+export default bknColorTokens;

package/src/tailwind/ts/idds.ts

@@ -6,12 +6,12 @@
  *
  * @example
  * ```js
- * import iddsColorToken from '@idds/styles/tailwind/ts/idds';
+ * import iddsColorTokens from '@idds/styles/tailwind/ts/idds';
  *
  * export default {
  *   theme: {
  *     extend: {
- *       colors: iddsColorToken,
+ *       colors: iddsColorTokens,
  *     },
  *   },
  * };
@@ -20,7 +20,7 @@
  * Then you can use classes like: text-neutral-500, bg-blue-500, etc.
  */
 
-const iddsColorToken: Record<string, string> = {
+const iddsColorTokens: Record<string, string> = {
   // Neutral Colors
   'neutral-25': 'var(--ina-neutral-25)',
   'neutral-50': 'var(--ina-neutral-50)',
@@ -237,4 +237,4 @@ const iddsColorToken: Record<string, string> = {
   black: 'var(--ina-black)',
 };
 
-export default iddsColorToken;
+export default iddsColorTokens;

package/src/tailwind/ts/inagov.ts

@@ -3,7 +3,7 @@
  * Government Services Theme
  */
 
-const inagovTokens: Record<string, string> = {
+const inagovColorTokens: Record<string, string> = {
   // Primary shades
   'primary-25': 'var(--ina-primary-25)',
   'primary-50': 'var(--ina-primary-50)',
@@ -31,5 +31,4 @@ const inagovTokens: Record<string, string> = {
   'neutral-hover': 'var(--ina-neutral-hover)',
 };
 
-export default inagovTokens;
-
+export default inagovColorTokens;

package/src/tailwind/ts/inaku.ts

@@ -3,7 +3,7 @@
  * Citizen Services Theme
  */
 
-const inakuTokens: Record<string, string> = {
+const inakuColorTokens: Record<string, string> = {
   // Primary shades
   'primary-25': 'var(--ina-primary-25)',
   'primary-50': 'var(--ina-primary-50)',
@@ -31,5 +31,4 @@ const inakuTokens: Record<string, string> = {
   'inaku-neutral-hover': 'var(--ina-inaku-neutral-hover)',
 };
 
-export default inakuTokens;
-
+export default inakuColorTokens;

package/src/tailwind/ts/inapas.ts

@@ -3,7 +3,7 @@
  * Passport & Immigration Services Theme
  */
 
-const inapasTokens: Record<string, string> = {
+const inapasColorTokens: Record<string, string> = {
   // Primary shades
   'primary-25': 'var(--ina-primary-25)',
   'primary-50': 'var(--ina-primary-50)',
@@ -31,5 +31,4 @@ const inapasTokens: Record<string, string> = {
   'inapas-neutral-hover': 'var(--ina-inapas-neutral-hover)',
 };
 
-export default inapasTokens;
-
+export default inapasColorTokens;

package/src/tailwind/ts/lan.ts

@@ -3,7 +3,7 @@
  * Local Area Network Theme
  */
 
-const lanTokens: Record<string, string> = {
+const lanColorTokens: Record<string, string> = {
   // Primary shades
   'primary-25': 'var(--ina-primary-25)',
   'primary-50': 'var(--ina-primary-50)',
@@ -41,5 +41,4 @@ const lanTokens: Record<string, string> = {
   'lan-neutral-hover': 'var(--ina-lan-neutral-hover)',
 };
 
-export default lanTokens;
-
+export default lanColorTokens;

package/src/tailwind/ts/{panrb.ts → pan-rb.ts}

@@ -2,7 +2,7 @@
  * PAN-RB Color Tokens for Tailwind CSS v3
  */
 
-const panrbTokens: Record<string, string> = {
+const panrbColorTokens: Record<string, string> = {
   // Primary shades
   'primary-25': 'var(--ina-primary-25)',
   'primary-50': 'var(--ina-primary-50)',
@@ -33,5 +33,4 @@ const panrbTokens: Record<string, string> = {
   'accent-yellow': 'var(--ina-accent-yellow)',
 };
 
-export default panrbTokens;
-
+export default panrbColorTokens;