ropav 0.0.4 → 0.0.5

package/dist/switch.css

@@ -7,12 +7,18 @@
   --_thumb-offset: 2px;
   --_track-bg: var(--rp-color-control-track-bg);
   --_thumb-bg: var(--rp-color-control-thumb-bg);
+  --_switch-invalid-border: var(--rp-color-danger);
+  --_switch-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   font-family: var(--rp-font-family);
   user-select: none;
 }
+html.dark .rp-switch[data-v-aeef0d94] {
+  --_switch-invalid-border: var(--rp-color-danger-fg);
+  --_switch-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+}
 .rp-switch--disabled[data-v-aeef0d94] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
@@ -52,9 +58,12 @@
   background-color: var(--_switch-color);
 }
 .rp-switch--invalid .rp-switch__track[data-v-aeef0d94] {
-  outline: var(--rp-border-width-thin) solid var(--rp-color-danger-fg);
+  outline: var(--rp-border-width-thin) solid var(--_switch-invalid-border);
   outline-offset: var(--_thumb-offset);
 }
+.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-aeef0d94] {
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_switch-invalid-ring);
+}
 .rp-switch__thumb[data-v-aeef0d94] {
   position: absolute;
   left: var(--_thumb-offset);

package/dist/textarea.css

@@ -5,7 +5,7 @@
   --_rp-textarea-radius: var(--rp-radius-sm);
   --_rp-textarea-valid-border: var(--rp-color-success-border-hover);
   --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success) 32%, transparent);
-  --_rp-textarea-invalid-border: var(--rp-color-danger-border-hover);
+  --_rp-textarea-invalid-border: var(--rp-color-danger);
   --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   box-sizing: border-box;
@@ -54,7 +54,7 @@
   --_rp-textarea-font-size: var(--rp-font-size-lg);
 }
 .rp-textarea--radius-xs[data-v-2c68871d] {
-  --_rp-textarea-radius: var(--rp-radius-sm);
+  --_rp-textarea-radius: var(--rp-radius-xs);
 }
 .rp-textarea--radius-sm[data-v-2c68871d] {
   --_rp-textarea-radius: var(--rp-radius-sm);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "packageManager": "pnpm@11.9.0",
   "engines": {
@@ -25,10 +25,22 @@
       "types": "./dist/components/button/index.d.ts",
       "import": "./dist/components/button/index.js"
     },
+    "./card": {
+      "types": "./dist/components/card/index.d.ts",
+      "import": "./dist/components/card/index.js"
+    },
     "./checkbox": {
       "types": "./dist/components/checkbox/index.d.ts",
       "import": "./dist/components/checkbox/index.js"
     },
+    "./field": {
+      "types": "./dist/components/field/index.d.ts",
+      "import": "./dist/components/field/index.js"
+    },
+    "./icon-button": {
+      "types": "./dist/components/icon-button/index.d.ts",
+      "import": "./dist/components/icon-button/index.js"
+    },
     "./input": {
       "types": "./dist/components/input/index.d.ts",
       "import": "./dist/components/input/index.js"

package/src/styles/_tokens.scss

@@ -20,19 +20,19 @@
     --rp-color-text-disabled             : #{$color-text-disabled};
     --rp-color-text-inverted             : #{$color-white};
     --rp-color-background                : #{$color-background};
-    --rp-color-surface                   : #{$color-white};
+    --rp-color-surface                   : #{$color-gray-1};
     --rp-color-surface-raised            : #{$color-white};
     --rp-color-surface-muted             : #{$color-gray-2};
     --rp-color-surface-hover             : #{$color-gray-3};
-    --rp-color-button-default-bg         : #{$color-gray-2};
-    --rp-color-button-default-bg-hover   : #{$color-gray-3};
+    --rp-color-button-default-bg         : var(--rp-color-surface);
+    --rp-color-button-default-bg-hover   : var(--rp-color-surface-hover);
     --rp-color-button-default-bg-active  : #{$color-gray-4};
     --rp-color-surface-inverted          : #{$color-gray-12};
     --rp-color-overlay                   : rgba(17, 17, 17, 0.55);
     --rp-color-border                    : #{$color-border};
     --rp-color-border-hover              : #{$color-border-hover};
     --rp-color-focus-ring                : color-mix(in srgb, var(--rp-color-primary) 32%, transparent);
-    --rp-color-control-bg                : #{$color-gray-2};
+    --rp-color-control-bg                : var(--rp-color-surface);
     --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
     --rp-color-control-fg                : var(--rp-color-text);
     --rp-color-control-placeholder       : var(--rp-color-text-secondary);
@@ -144,6 +144,7 @@
 
     // Border radius
     --rp-radius-none: #{$radius-none};
+    --rp-radius-xs  : #{$radius-xs};
     --rp-radius-sm  : #{$radius-sm};
     --rp-radius-md  : #{$radius-md};
     --rp-radius-lg  : #{$radius-lg};
@@ -181,20 +182,20 @@ html.dark {
     --rp-color-text-secondary            : #b4b4b4;
     --rp-color-text-disabled             : #6e6e6e;
     --rp-color-text-inverted             : #{$color-gray-12};
-    --rp-color-background                : #111111;
-    --rp-color-surface                   : #111111;
-    --rp-color-surface-raised            : #191919;
-    --rp-color-surface-muted             : #191919;
-    --rp-color-surface-hover             : #222222;
-    --rp-color-button-default-bg         : #191919;
-    --rp-color-button-default-bg-hover   : #222222;
-    --rp-color-button-default-bg-active  : #2a2a2a;
+    --rp-color-background                : #191919;
+    --rp-color-surface                   : #222222;
+    --rp-color-surface-raised            : #2a2a2a;
+    --rp-color-surface-muted             : #222222;
+    --rp-color-surface-hover             : #2a2a2a;
+    --rp-color-button-default-bg         : var(--rp-color-surface);
+    --rp-color-button-default-bg-hover   : var(--rp-color-surface-hover);
+    --rp-color-button-default-bg-active  : #313131;
     --rp-color-surface-inverted          : #{$color-gray-2};
     --rp-color-overlay                   : rgba(17, 17, 17, 0.75);
     --rp-color-border                    : #3a3a3a;
     --rp-color-border-hover              : #606060;
     --rp-color-focus-ring                : color-mix(in srgb, var(--rp-color-primary) 45%, transparent);
-    --rp-color-control-bg                : #191919;
+    --rp-color-control-bg                : var(--rp-color-surface);
     --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
     --rp-color-control-fg                : #eeeeee;
     --rp-color-control-placeholder       : #6e6e6e;

package/src/styles/_variables.scss

@@ -29,7 +29,7 @@ $color-gray-12       : #202020 !default;
 $color-text          : $color-gray-12 !default;
 $color-text-secondary: $color-gray-11 !default;
 $color-text-disabled : $color-gray-9 !default;
-$color-background    : $color-white !default;
+$color-background    : $color-gray-2 !default;
 $color-border        : $color-gray-6 !default;
 $color-border-hover  : $color-gray-8 !default;
 $color-on-primary    : $color-white !default;
@@ -76,6 +76,7 @@ $spacing-12: 3rem !default;
 
 // Border radius
 $radius-none: 0 !default;
+$radius-xs  : 0.25rem !default;
 $radius-sm  : 0.375rem !default;
 $radius-md  : 0.75rem !default;
 $radius-lg  : 1rem !default;