voa-ds-core 1.0.8 → 1.0.10

package/dist/voa/styles/external/voa-radio.styles.ts

@@ -0,0 +1,155 @@
+import { css } from 'lit';
+
+export const voaRadioStyles = css`
+  :host {
+    /* Tamanhos */
+    --voa-radio-size: 20px;
+    --voa-radio-inner-size: 8px;
+    --voa-radio-border-width: 1.5px;
+    
+    /* Cores do Design System */
+    --voa-radio-neutral: #ffffff;
+    --voa-radio-primary-light-200: #008fff;
+    --voa-radio-primary-light-400: #0071c8;
+    --voa-radio-primary-opacity-15: #0064cb26;
+    --voa-radio-primary-opacity-25: #0064cb40;
+    --voa-radio-secondary-light-100: #b5eee3;
+    --voa-radio-secondary-light-400: #49bcab;
+    --voa-radio-secondary-50: #00e5ce80;
+    --voa-radio-fill-secondary: #18181b0f;
+    --voa-radio-fill-25: #18181b40;
+    --voa-radio-disabled: #dee2e6;
+    --voa-radio-disabled-text: #0b121540;
+
+    /* Sombras */
+    --voa-radio-shadow-surface: 0px 8px 16px 0px rgba(255, 255, 255, 0.02),
+                               0px 4px 4px 0px rgba(0, 0, 0, 0.25),
+                               0px 2.5px 0px 0px rgba(255, 255, 255, 0.05) inset,
+                               0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    
+    display: inline-block;
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .radio-container {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+
+  :host([disabled]) .radio-container {
+    cursor: not-allowed;
+  }
+
+  input[type="radio"] {
+    /* Reset */
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    
+    /* Estilos base */
+    width: var(--voa-radio-size);
+    height: var(--voa-radio-size);
+    border: var(--voa-radio-border-width) solid var(--voa-radio-primary-light-400);
+    border-radius: 50%;
+    background-color: var(--voa-radio-neutral);
+    
+    /* Layout */
+    display: grid;
+    place-content: center;
+    flex-shrink: 0;
+    
+    /* Transições */
+    transition: all 0.2s ease-in-out;
+  }
+
+  /* Hover - Primary */
+  :host(:not([disabled]):not([variant="secondary"])) input[type="radio"]:hover {
+    border-color: var(--voa-radio-primary-light-200);
+    box-shadow: 0 0 0 4px var(--voa-radio-primary-opacity-15);
+  }
+
+  /* Hover - Secondary */
+  :host([variant="secondary"]:not([disabled])) input[type="radio"]:hover {
+    border-color: var(--voa-radio-secondary-light-400);
+    box-shadow: 0 0 0 4px var(--voa-radio-secondary-50);
+  }
+
+  /* Checked - Primary */
+  input[type="radio"]::before {
+    content: "";
+    width: var(--voa-radio-inner-size);
+    height: var(--voa-radio-inner-size);
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    background-color: var(--voa-radio-neutral);
+  }
+
+  :host(:not([disabled]):not([variant="secondary"])) input[type="radio"]:checked {
+    background: var(--voa-radio-primary-light-200);
+    border-color: var(--voa-radio-primary-light-400);
+    box-shadow: var(--voa-radio-shadow-surface);
+  }
+
+  /* Checked - Secondary */
+  :host([variant="secondary"]:not([disabled])) input[type="radio"]:checked {
+    background: var(--voa-radio-secondary-light-100);
+    border-color: var(--voa-radio-secondary-light-400);
+    box-shadow: var(--voa-radio-shadow-surface);
+  }
+
+  :host([variant="secondary"]:not([disabled])) input[type="radio"]:checked::before {
+    background-color: var(--voa-radio-secondary-light-400);
+  }
+
+  input[type="radio"]:checked::before {
+    transform: scale(1);
+  }
+
+  /* Focus */
+  :host(:not([variant="secondary"])) input[type="radio"]:focus-visible {
+    outline: 2px solid var(--voa-radio-primary-light-200);
+    outline-offset: 2px;
+  }
+
+  :host([variant="secondary"]) input[type="radio"]:focus-visible {
+    outline: 2px solid var(--voa-radio-secondary-light-400);
+    outline-offset: 2px;
+  }
+
+  /* Disabled - Primary */
+  :host([disabled]:not([variant="secondary"])) input[type="radio"] {
+    background: var(--voa-radio-disabled);
+    border-color: var(--voa-radio-fill-25);
+  }
+
+  :host([disabled]:not([variant="secondary"])) input[type="radio"]:checked::before {
+    background-color: var(--voa-radio-fill-25);
+  }
+
+  /* Disabled - Secondary */
+  :host([disabled][variant="secondary"]) input[type="radio"] {
+    background: var(--voa-radio-disabled);
+    border-color: var(--voa-radio-fill-25);
+  }
+
+  :host([disabled][variant="secondary"]) input[type="radio"]:checked::before {
+    background-color: var(--voa-radio-fill-25);
+  }
+
+  /* Label */
+  .label {
+    font-size: 14px;
+    line-height: 1.4;
+    color: currentColor;
+  }
+
+  :host([disabled]) .label {
+    color: var(--voa-radio-disabled-text);
+  }
+`;