@nuraly/lumenui 0.1.0 → 0.2.1

package/dist/src/components/radio/radio.style.js

@@ -11,7 +11,7 @@ export const styles = css `
     cursor: pointer;
     user-select: none;
     position: relative;
-    font-family: var(--nuraly-font-family-radio, var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }
 
   :host([disabled]) {
@@ -22,7 +22,7 @@ export const styles = css `
   .radio-wrapper {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-radio-gap, 8px);
+    gap: 8px;
   }
 
   .radio-input {
@@ -38,112 +38,65 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--nuraly-border-radius-radio, 50%);
-    border: var(--nuraly-border-width-radio, 2px) solid var(--nuraly-color-radio-border, #d9d9d9);
-    background: var(--nuraly-color-radio-background, #ffffff);
+    border-radius: 50%;
+    border: 2px solid #d9d9d9;
+    background: #ffffff;
     transition: all 0.2s ease;
     flex-shrink: 0;
   }
 
   /* Size variants */
-  :host([size="small"]) .radio-circle {
-    width: var(--nuraly-size-radio-small, 16px);
-    height: var(--nuraly-size-radio-small, 16px);
-  }
-
+  :host([size="small"]) .radio-circle { width: 16px; height: 16px; }
   :host([size="medium"]) .radio-circle,
-  :host(:not([size])) .radio-circle {
-    width: var(--nuraly-size-radio-medium, 20px);
-    height: var(--nuraly-size-radio-medium, 20px);
-  }
-
-  :host([size="large"]) .radio-circle {
-    width: var(--nuraly-size-radio-large, 24px);
-    height: var(--nuraly-size-radio-large, 24px);
-  }
+  :host(:not([size])) .radio-circle { width: 20px; height: 20px; }
+  :host([size="large"]) .radio-circle { width: 24px; height: 24px; }
 
   .radio-circle::after {
     content: '';
     display: block;
-    border-radius: var(--nuraly-border-radius-radio-dot, 50%);
-    background: var(--nuraly-color-radio-dot, #1677ff);
+    border-radius: 50%;
+    background: #1677ff;
     transform: scale(0);
     transition: transform 0.2s ease;
   }
 
-  :host([size="small"]) .radio-circle::after {
-    width: 8px;
-    height: 8px;
-  }
-
+  :host([size="small"]) .radio-circle::after { width: 8px; height: 8px; }
   :host([size="medium"]) .radio-circle::after,
-  :host(:not([size])) .radio-circle::after {
-    width: 10px;
-    height: 10px;
-  }
-
-  :host([size="large"]) .radio-circle::after {
-    width: 12px;
-    height: 12px;
-  }
-
-  /* Checked state */
-  :host([checked]) .radio-circle {
-    border-color: var(--nuraly-color-radio-checked-border, #1677ff);
-  }
+  :host(:not([size])) .radio-circle::after { width: 10px; height: 10px; }
+  :host([size="large"]) .radio-circle::after { width: 12px; height: 12px; }
 
-  :host([checked]) .radio-circle::after {
-    transform: scale(1);
-  }
+  /* Checked */
+  :host([checked]) .radio-circle { border-color: #1677ff; }
+  :host([checked]) .radio-circle::after { transform: scale(1); }
 
-  /* Focus state */
+  /* Focus */
   .radio-input:focus-visible + .radio-circle {
-    outline: 2px solid var(--nuraly-color-radio-border-focus, #1677ff);
+    outline: 2px solid #1677ff;
     outline-offset: 2px;
   }
 
-  /* Hover state */
-  :host(:not([disabled]):hover) .radio-circle {
-    border-color: var(--nuraly-color-radio-border-hover, #1677ff);
-  }
+  /* Hover */
+  :host(:not([disabled])):hover .radio-circle { border-color: #1677ff; }
 
-  /* Disabled state */
+  /* Disabled */
   :host([disabled]) .radio-circle {
-    background: var(--nuraly-color-radio-disabled-background, #f5f5f5);
-    border-color: var(--nuraly-color-radio-disabled-border, #d9d9d9);
-  }
-
-  :host([disabled][checked]) .radio-circle::after {
-    background: var(--nuraly-color-radio-disabled-dot, #bfbfbf);
+    background: #f5f5f5;
+    border-color: #d9d9d9;
   }
+  :host([disabled][checked]) .radio-circle::after { background: #bfbfbf; }
 
-  /* Label - using nr-label component */
+  /* Label */
   .radio-label {
     display: inline-block;
     line-height: 1.5;
   }
 
-  nr-label.radio-label {
-    --nuraly-label-color: var(--nuraly-color-radio-label, #262626);
-    --nuraly-label-font-size: var(--nuraly-font-size-radio-label, 14px);
-  }
-
   /* Size-based label font sizes */
-  :host([size="small"]) nr-label.radio-label {
-    --nuraly-label-font-size: var(--nuraly-font-size-small, 12px);
-  }
-
-  :host([size="medium"]) nr-label.radio-label,
-  :host(:not([size])) nr-label.radio-label {
-    --nuraly-label-font-size: var(--nuraly-font-size-body, 14px);
-  }
+  :host([size="small"]) .radio-label { font-size: 12px; }
+  :host([size="medium"]) .radio-label,
+  :host(:not([size])) .radio-label { font-size: 14px; }
+  :host([size="large"]) .radio-label { font-size: 16px; }
 
-  :host([size="large"]) nr-label.radio-label {
-    --nuraly-label-font-size: var(--nuraly-font-size-large, 16px);
-  }
-
-  :host([disabled]) nr-label.radio-label {
-    --nuraly-label-color: var(--nuraly-color-radio-disabled-text, #bfbfbf);
-  }
+  :host([disabled]) .radio-label { color: #bfbfbf; }
 `;
 //# sourceMappingURL=radio.style.js.map