From fbba6327fe0c51f2fc78cbb7a11ea98b43333460 Mon Sep 17 00:00:00 2001 From: Vagner Leite da Silva Date: Thu, 18 Sep 2025 14:26:40 -0300 Subject: [PATCH] =?UTF-8?q?style(theme):=20refina=20tokens=20do=20design?= =?UTF-8?q?=20Pink=E2=80=91Code\n\n-=20Ajusta=20contraste=20do=20prim?= =?UTF-8?q?=C3=A1rio=20no=20dark=20para=20branco\n-=20Define=20conjuntos?= =?UTF-8?q?=20completos=20para=20secondary/tertiary/success/warning/danger?= =?UTF-8?q?\n-=20Adiciona=20tokens=20de=20superf=C3=ADcie=20e=20eleva?= =?UTF-8?q?=C3=A7=C3=A3o=20(--surface,=20--surface-2,=20--elevation-1)\n-?= =?UTF-8?q?=20Cria=20token=20--scan-outline=20para=20overlay=20do=20scanne?= =?UTF-8?q?r\n-=20Define=20cor=20selecionada=20das=20tabs=20para=20o=20pri?= =?UTF-8?q?m=C3=A1rio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/theme/variables.scss | 171 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 6146c39..0004b83 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -1,2 +1,173 @@ // For information on how to create your own theme, please see: // http://ionicframework.com/docs/theming/ +/* ========================================================================== + Pink-Code · Ionic 8 Design Tokens + Place this complete file at: src/theme/variables.scss + ========================================================================== */ + +/* 1 ▪ Base palette (Light mode) */ +:root { + /* --- Brand ------------------------------------------------------------- */ + --ion-color-primary: #ff5eae; + --ion-color-primary-rgb: 255, 94, 174; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #e0559c; + --ion-color-primary-tint: #ff7ab9; + + /* Optional secondary / tertiary accents */ + --ion-color-secondary: #ffb347; /* laranja suave */ + --ion-color-tertiary: #5ec6ff; /* azul para estados neutros */ + /* Secondary full token set */ + --ion-color-secondary-rgb: 255, 179, 71; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #e09e3f; + --ion-color-secondary-tint: #ffc46a; + /* Tertiary full token set */ + --ion-color-tertiary-rgb: 94, 198, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #52addf; + --ion-color-tertiary-tint: #7bd1ff; + + /* Neutral greys */ + --ion-color-step-50: #f9f9fa; + --ion-color-step-100: #f4f5f8; + --ion-color-step-150: #e9eaee; + --ion-color-step-200: #dcdde3; + --ion-color-step-250: #c3c5ce; + --ion-color-step-300: #a9acb8; + --ion-color-step-350: #9194a1; + --ion-color-step-400: #7a7d8b; + --ion-color-step-450: #636673; + --ion-color-step-500: #4c4f5b; + --ion-color-step-550: #373a44; + --ion-color-step-600: #272a33; + + /* Text & surface */ + --ion-text-color: var(--ion-color-step-500); + --ion-background-color: var(--ion-color-step-50); + --ion-card-background: #ffffff; + --ion-item-background: #ffffff; + + /* Status colors (optional) */ + --ion-color-success: #4cd964; + --ion-color-success-rgb: 76, 217, 100; + --ion-color-success-contrast: #ffffff; + --ion-color-success-contrast-rgb: 255, 255, 255; + --ion-color-success-shade: #42bf58; + --ion-color-success-tint: #69e07d; + + --ion-color-warning: #ffcc00; + --ion-color-warning-rgb: 255, 204, 0; + --ion-color-warning-contrast: #1f222a; + --ion-color-warning-contrast-rgb: 31, 34, 42; + --ion-color-warning-shade: #e0b400; + --ion-color-warning-tint: #ffd52b; + + --ion-color-danger: #ff3b30; + --ion-color-danger-rgb: 255, 59, 48; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #e0352b; + --ion-color-danger-tint: #ff5c52; + + /* Surfaces & elevation */ + --surface: #ffffff; + --surface-2: var(--ion-color-step-100); + --elevation-1: 0 8px 24px rgba(0, 0, 0, 0.12); + + /* Scanner outline */ + --scan-outline: var(--ion-color-primary); +} + +/* 2 ▪ Dark mode overrides */ +@media (prefers-color-scheme: dark) { + :root { + --ion-color-primary: #ff7ab9; /* tom mais claro p/ contraste */ + --ion-color-primary-rgb: 255, 122, 185; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #e467a3; + --ion-color-primary-tint: #ff93c5; + + /* Neutrals flipped */ + --ion-color-step-50: #1f222a; + --ion-color-step-100: #242731; + --ion-color-step-150: #2a2e38; + --ion-color-step-200: #30333e; + --ion-color-step-250: #363a45; + --ion-color-step-300: #3d404c; + --ion-color-step-350: #454854; + --ion-color-step-400: #4d505d; + --ion-color-step-450: #5a5d6a; + --ion-color-step-500: #dadde5; /* texto principal #E4E7EC like */ + --ion-color-step-550: #e4e7ec; + --ion-color-step-600: #f0f1f5; + + --ion-text-color: var(--ion-color-step-550); + --ion-background-color: var(--ion-color-step-50); + --ion-card-background: #2a2e38; + --ion-item-background: #2a2e38; + + /* Secondary/Tertiary full sets in dark */ + --ion-color-secondary-rgb: 255, 179, 71; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #e09e3f; + --ion-color-secondary-tint: #ffc46a; + + --ion-color-tertiary-rgb: 94, 198, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #52addf; + --ion-color-tertiary-tint: #7bd1ff; + + --ion-color-success-rgb: 76, 217, 100; + --ion-color-success-contrast: #1f222a; + --ion-color-success-contrast-rgb: 31, 34, 42; + --ion-color-success-shade: #42bf58; + --ion-color-success-tint: #69e07d; + + --ion-color-warning-rgb: 255, 204, 0; + --ion-color-warning-contrast: #1f222a; + --ion-color-warning-contrast-rgb: 31, 34, 42; + --ion-color-warning-shade: #e0b400; + --ion-color-warning-tint: #ffd52b; + + --ion-color-danger-rgb: 255, 59, 48; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #e0352b; + --ion-color-danger-tint: #ff5c52; + + /* Surfaces & elevation */ + --surface: #2a2e38; + --surface-2: #242731; + --elevation-1: 0 12px 36px rgba(0, 0, 0, 0.45); + + /* Scanner outline */ + --scan-outline: var(--ion-color-primary); + } +} + +/* 3 ▪ Typography helpers */ +ion-title { + font-weight: 600; +} + +ion-card-title, ion-label { + line-height: 1.3; +} + +/* 4 ▪ Button tweaks (optional) */ +ion-button { + --border-radius: 24px; + font-weight: 600; +} + +/* Tabs active color aligned to brand */ +ion-tab-bar { + --color-selected: var(--ion-color-primary); +}