voa-ds-core 1.0.11 → 1.0.12

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

@@ -1,155 +0,0 @@
-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);
-  }
-`;