ropav 0.0.3 → 0.0.5

package/dist/switch.css

@@ -1,18 +1,24 @@
 .rp-switch[data-v-aeef0d94] {
-  --_switch-color: var(--rp-color-primary);
+  --_switch-color: var(--rp-color-control-selected-bg);
   --_switch-font-size: var(--rp-font-size-base);
   --_track-w: 40px;
   --_track-h: 22px;
   --_thumb-size: 18px;
   --_thumb-offset: 2px;
-  --_track-bg: var(--rp-color-border);
-  --_thumb-bg: #ffffff;
+  --_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;
@@ -21,9 +27,6 @@
   gap: var(--rp-spacing-2);
   font-size: var(--_switch-font-size);
 }
-html.dark .rp-switch[data-v-aeef0d94] {
-  --_thumb-bg: var(--rp-color-surface-inverted);
-}
 .rp-switch__native[data-v-aeef0d94] {
   position: absolute;
   width: 1px;
@@ -55,9 +58,12 @@ html.dark .rp-switch[data-v-aeef0d94] {
   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);
@@ -93,6 +99,9 @@ html.dark .rp-switch[data-v-aeef0d94] {
 .rp-switch--color-info[data-v-aeef0d94] {
   --_switch-color: var(--rp-color-info);
 }
+.rp-switch--color-neutral[data-v-aeef0d94] {
+  --_switch-color: var(--rp-color-neutral);
+}
 .rp-switch--size-xs[data-v-aeef0d94] {
   --_track-w: 28px;
   --_track-h: 16px;

package/dist/textarea.css

@@ -3,20 +3,24 @@
   --_rp-textarea-padding-x: var(--rp-spacing-3);
   --_rp-textarea-font-size: var(--rp-font-size-base);
   --_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);
+  --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger) 32%, transparent);
   display: inline-flex;
   box-sizing: border-box;
   font-family: var(--rp-font-family);
   font-weight: var(--rp-font-weight-normal);
-  background-color: var(--rp-color-button-default-bg);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-control-bg);
+  border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
 .rp-textarea[data-v-2c68871d]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
-  border-color: var(--rp-color-border-hover);
+  border-color: var(--rp-color-control-border-hover);
 }
 .rp-textarea[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
-  border-color: var(--rp-color-primary);
+  border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 .rp-textarea[data-v-2c68871d] {
@@ -50,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);
@@ -64,26 +68,32 @@
 .rp-textarea--radius-xl[data-v-2c68871d] {
   --_rp-textarea-radius: var(--rp-radius-xl);
 }
+html.dark .rp-textarea[data-v-2c68871d] {
+  --_rp-textarea-valid-border: var(--rp-color-success-fg);
+  --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
+  --_rp-textarea-invalid-border: var(--rp-color-danger-fg);
+  --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+}
 .rp-textarea--disabled[data-v-2c68871d] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
 .rp-textarea--valid[data-v-2c68871d] {
-  border-color: var(--rp-color-success-fg);
+  border-color: var(--_rp-textarea-valid-border);
 }
 .rp-textarea--valid[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled) {
-  border-color: var(--rp-color-success-fg);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
+  border-color: var(--_rp-textarea-valid-border);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-valid-ring);
 }
 .rp-textarea--invalid[data-v-2c68871d] {
-  border-color: var(--rp-color-danger-fg);
+  border-color: var(--_rp-textarea-invalid-border);
 }
 .rp-textarea--invalid[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled) {
-  border-color: var(--rp-color-danger-fg);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
+  border-color: var(--_rp-textarea-invalid-border);
+  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-invalid-ring);
 }
 .rp-textarea--readonly[data-v-2c68871d] {
-  background-color: var(--rp-color-surface-muted);
+  background-color: var(--rp-color-control-readonly-bg);
 }
 .rp-textarea__native[data-v-2c68871d] {
   box-sizing: border-box;
@@ -95,11 +105,11 @@
   outline: none;
   background: transparent;
   font: inherit;
-  color: var(--rp-color-text);
+  color: var(--rp-color-control-fg);
   line-height: var(--rp-line-height-relaxed);
 }
 .rp-textarea__native[data-v-2c68871d]::placeholder {
-  color: var(--rp-color-text-secondary);
+  color: var(--rp-color-control-placeholder);
 }
 .rp-textarea__native[data-v-2c68871d]:disabled {
   cursor: not-allowed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.0.3",
+  "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"
@@ -56,7 +68,7 @@
     "dev": "pnpm run storybook",
     "tokens:build": "style-dictionary build --config scripts/tokens.config.mjs --silent",
     "tokens:check": "node scripts/check-tokens.mjs",
-    "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json",
+    "typecheck": "vue-tsc -b tsconfig.app.json tsconfig.node.json tsconfig.test.json",
     "typecheck:storybook": "vue-tsc -p tsconfig.storybook.json --noEmit",
     "lint": "oxlint",
     "lint:fix": "oxlint --fix",
@@ -86,6 +98,7 @@
     "@types/node": "^25.9.4",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/browser-playwright": "^4.1.9",
+    "@vue/compiler-vapor": "3.6.0-beta.17",
     "@vue/tsconfig": "^0.9.1",
     "bumpp": "^11.1.0",
     "jsdom": "^29.1.1",

package/src/styles/_mixins.scss

@@ -104,7 +104,7 @@
 }
 
 @mixin semantic-colors($var-name) {
-    @each $name in primary, secondary, success, warning, danger, info {
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
         &--#{$name} {
             #{$var-name}: var(--rp-color-#{$name}-fg);
         }
@@ -112,7 +112,7 @@
 }
 
 @mixin semantic-color-pair($color-var, $foreground-var) {
-    @each $name in primary, secondary, success, warning, danger, info {
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
         &--#{$name} {
             #{$color-var}: var(--rp-color-#{$name});
             #{$foreground-var}: var(--rp-color-on-#{$name});
@@ -121,7 +121,7 @@
 }
 
 @mixin semantic-state-colors($prefix) {
-    @each $name in primary, secondary, success, warning, danger, info {
+    @each $name in primary, secondary, success, warning, danger, info, neutral {
         &--#{$name} {
             #{$prefix}-bg: var(--rp-color-#{$name});
             #{$prefix}-bg-hover: var(--rp-color-#{$name}-hover);

package/src/styles/_tokens.scss

@@ -14,29 +14,43 @@
     --rp-color-warning                   : #{$color-warning};
     --rp-color-danger                    : #{$color-danger};
     --rp-color-info                      : #{$color-info};
+    --rp-color-neutral                   : #{$color-neutral};
     --rp-color-text                      : #{$color-text};
     --rp-color-text-secondary            : #{$color-text-secondary};
     --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                : 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);
+    --rp-color-control-icon              : var(--rp-color-text-secondary);
+    --rp-color-control-border            : var(--rp-color-border);
+    --rp-color-control-border-hover      : var(--rp-color-border-hover);
+    --rp-color-control-border-focus      : var(--rp-color-primary);
+    --rp-color-control-track-bg          : var(--rp-color-border);
+    --rp-color-control-thumb-bg          : #{$color-white};
+    --rp-color-control-selected-bg       : var(--rp-color-primary);
+    --rp-color-control-selected-fg       : var(--rp-color-on-primary);
     --rp-color-on-primary                : #{$color-on-primary};
     --rp-color-on-secondary              : #{$color-on-secondary};
     --rp-color-on-success                : #{$color-on-success};
     --rp-color-on-warning                : #{$color-on-warning};
     --rp-color-on-danger                 : #{$color-on-danger};
     --rp-color-on-info                   : #{$color-on-info};
+    --rp-color-on-neutral                : #{$color-on-neutral};
     --rp-color-primary-hover             : color-mix(in srgb, var(--rp-color-primary) 90%, #{$color-black});
     --rp-color-primary-active            : color-mix(in srgb, var(--rp-color-primary) 80%, #{$color-black});
     --rp-color-primary-subtle-bg         : #e6f4fe;
@@ -85,6 +99,14 @@
     --rp-color-info-border               : #7dcedc;
     --rp-color-info-border-hover         : #3db9cf;
     --rp-color-info-fg                   : #0d3c48;
+    --rp-color-neutral-hover             : color-mix(in srgb, var(--rp-color-neutral) 90%, #{$color-black});
+    --rp-color-neutral-active            : color-mix(in srgb, var(--rp-color-neutral) 80%, #{$color-black});
+    --rp-color-neutral-subtle-bg         : #f0f0f0;
+    --rp-color-neutral-subtle-bg-hover   : #e8e8e8;
+    --rp-color-neutral-subtle-bg-active  : #e0e0e0;
+    --rp-color-neutral-border            : #cecece;
+    --rp-color-neutral-border-hover      : #bbbbbb;
+    --rp-color-neutral-fg                : #202020;
 
     // Font sizes
     --rp-font-size-xs  : #{$font-size-xs};
@@ -122,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};
@@ -137,6 +160,9 @@
     --rp-size-control-md: #{$size-control-md};
     --rp-size-control-lg: #{$size-control-lg};
 
+    // Opacity
+    --rp-opacity-disabled: #{$opacity-disabled};
+
     // Shadows
     --rp-shadow-sm  : #{$shadow-sm};
     --rp-shadow-base: #{$shadow-base};
@@ -156,19 +182,29 @@ 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                : var(--rp-color-surface);
+    --rp-color-control-readonly-bg       : var(--rp-color-surface-muted);
+    --rp-color-control-fg                : #eeeeee;
+    --rp-color-control-placeholder       : #6e6e6e;
+    --rp-color-control-icon              : #b4b4b4;
+    --rp-color-control-border            : #3a3a3a;
+    --rp-color-control-border-hover      : #606060;
+    --rp-color-control-border-focus      : var(--rp-color-primary);
+    --rp-color-control-track-bg          : var(--rp-color-border);
+    --rp-color-control-thumb-bg          : var(--rp-color-surface-inverted);
     --rp-color-primary-subtle-bg         : #0d2847;
     --rp-color-primary-subtle-bg-hover   : #003362;
     --rp-color-primary-subtle-bg-active  : #004074;
@@ -205,6 +241,12 @@ html.dark {
     --rp-color-info-border               : #12677e;
     --rp-color-info-border-hover         : #11809c;
     --rp-color-info-fg                   : #4ccce6;
+    --rp-color-neutral-subtle-bg         : #222222;
+    --rp-color-neutral-subtle-bg-hover   : #2a2a2a;
+    --rp-color-neutral-subtle-bg-active  : #313131;
+    --rp-color-neutral-border            : #484848;
+    --rp-color-neutral-border-hover      : #606060;
+    --rp-color-neutral-fg                : #eeeeee;
 
     // Shadows
     --rp-shadow-sm  : 0 1px 2px 0 rgba(0, 0, 0, 0.3);

package/src/styles/_variables.scss

@@ -11,6 +11,7 @@ $color-success       : #218358 !default;
 $color-warning       : #cc4e00 !default;
 $color-danger        : #ce2c31 !default;
 $color-info          : #107d98 !default;
+$color-neutral       : #646464 !default;
 $color-white         : #ffffff !default;
 $color-black         : #111111 !default;
 $color-gray-1        : #fcfcfc !default;
@@ -28,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;
@@ -37,6 +38,7 @@ $color-on-success    : $color-white !default;
 $color-on-warning    : $color-white !default;
 $color-on-danger     : $color-white !default;
 $color-on-info       : $color-white !default;
+$color-on-neutral    : $color-white !default;
 
 // Font sizes
 $font-size-xs  : 0.75rem !default;
@@ -74,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;