@101app/design-tokens-web 1.0.106

package/tokens.css

@@ -0,0 +1,232 @@
+/* Generated from 101 Design System */
+
+:root {
+  --border-radius-button: 8px;
+  --border-radius-card: 16px;
+  --border-radius-input: 8px;
+  --border-radius-layout: 12px;
+  --border-radius-pill: 999px;
+  --border-width-default: 1px;
+  --border-width-hairline: 0.5px;
+  --border-width-strong: 2px;
+  --motion-duration-default: 240ms;
+  --motion-duration-fast: 160ms;
+  --motion-duration-slow: 320ms;
+  --motion-easing-default: cubic-bezier(0.2, 0, 0, 1);
+  --motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
+  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --opacity-low: 0.38;
+  --opacity-medium: 0.62;
+  --size-button-default: 32px;
+  --size-button-large: 40px;
+  --size-button-small: 24px;
+  --size-card-height: 106px;
+  --size-card-width: 640px;
+  --size-field-large: 40px;
+  --size-icon-default: 20px;
+  --size-icon-large: 24px;
+  --size-icon-small: 16px;
+  --spacing-0: 0px;
+  --spacing-2: 2px;
+  --spacing-4: 4px;
+  --spacing-6: 6px;
+  --spacing-8: 8px;
+  --spacing-10: 10px;
+  --spacing-12: 12px;
+  --spacing-16: 16px;
+  --spacing-20: 20px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-list-gap: 12px;
+}
+
+:root,
+:root[data-theme="light"] {
+  --color-accent-blue: #0088FF;
+  --color-accent-default: #0E0E0F;
+  --color-amount-negative: #F40017;
+  --color-amount-positive: #00A530;
+  --color-border-primary: #E8E8E8;
+  --color-border-secondary: #C6C6C8;
+  --color-event-agent-fee: #2B91A0;
+  --color-event-dividends: #2D9CCF;
+  --color-event-estimate: #6D43F6;
+  --color-event-estimate-muted: #A9A2EF;
+  --color-event-expense: #C4317A;
+  --color-event-expense-muted: #D796C0;
+  --color-event-income: #6E8D44;
+  --color-event-markup: #E58F09;
+  --color-event-payment-own: #A65959;
+  --color-event-payment-working: #C19810;
+  --color-focus-ring: #0088FF;
+  --color-highlight-calendar: #F75951;
+  --color-highlight-text: #3CD3FE61;
+  --color-highlighter: #3CD3FE61;
+  --color-on-accent-primary: #ECECF1;
+  --color-on-accent-secondary: #9F9FA5;
+  --color-on-accent-tertiary: #5A5A5F;
+  --color-overlay: #0000009E;
+  --color-shadow-base: #00000029;
+  --color-shadow-stroke: #00000029;
+  --color-shadow-stroke-light: #0000000D;
+  --color-state-disabled: #7878809E;
+  --color-state-hover: #0000000A;
+  --color-state-on-accent-hover: #FFFFFF3D;
+  --color-state-on-accent-pressed: #FFFFFF61;
+  --color-state-pressed: #00000014;
+  --color-state-selected: #0000000F;
+  --color-static-black: #0E0E0F;
+  --color-static-white: #FFFFFF;
+  --color-status-error: #F75951;
+  --color-status-success: #2FB350;
+  --color-status-warning: #E58F09;
+  --color-surface-0: #EFEFEF;
+  --color-surface-1: #F9F9F9;
+  --color-surface-2: #FFFFFF;
+  --color-surface-3: #FFFFFF;
+  --color-surface-inverse: #000000CC;
+  --color-text-primary: #2A2A2C;
+  --color-text-quaternary: #DEDEE5;
+  --color-text-secondary: #8A8A8E;
+  --color-text-tertiary: #BBBBC1;
+  --color-toast: #000000CC;
+}
+
+:root[data-theme="dark"] {
+  --color-accent-blue: #0091FF;
+  --color-accent-default: #FFFFFF;
+  --color-amount-negative: #F40017;
+  --color-amount-positive: #00A530;
+  --color-border-primary: #343438;
+  --color-border-secondary: #202022;
+  --color-event-agent-fee: #2B91A0;
+  --color-event-dividends: #32ADE6;
+  --color-event-estimate: #6D43F6;
+  --color-event-estimate-muted: #666290;
+  --color-event-expense: #C4317A;
+  --color-event-expense-muted: #8E637F;
+  --color-event-income: #6E8D44;
+  --color-event-markup: #FF9F0A;
+  --color-event-payment-own: #A65959;
+  --color-event-payment-working: #C19810;
+  --color-focus-ring: #0091FF;
+  --color-highlight-calendar: #F75951;
+  --color-highlight-text: #3CD3FE78;
+  --color-highlighter: #3CD3FE78;
+  --color-on-accent-primary: #1C1C1D;
+  --color-on-accent-secondary: #8A8A8E;
+  --color-on-accent-tertiary: #BBBBC1;
+  --color-overlay: #00000061;
+  --color-shadow-base: #00000029;
+  --color-shadow-stroke: #FFFFFF21;
+  --color-shadow-stroke-light: #FFFFFF0A;
+  --color-state-disabled: #78788080;
+  --color-state-hover: #FFFFFF14;
+  --color-state-on-accent-hover: #00000029;
+  --color-state-on-accent-pressed: #0000003D;
+  --color-state-pressed: #FFFFFF1F;
+  --color-state-selected: #FFFFFF1A;
+  --color-static-black: #0E0E0F;
+  --color-static-white: #FFFFFF;
+  --color-status-error: #F75951;
+  --color-status-success: #34C759;
+  --color-status-warning: #FF9F0A;
+  --color-surface-0: #101010;
+  --color-surface-1: #191919;
+  --color-surface-2: #222222;
+  --color-surface-3: #323232;
+  --color-surface-inverse: #FFFFFFCC;
+  --color-text-primary: #ECECF1;
+  --color-text-quaternary: #303034;
+  --color-text-secondary: #9F9FA5;
+  --color-text-tertiary: #5A5A5F;
+  --color-toast: #000000CC;
+}
+
+.text-body-medium {
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: calc(1em * 0 / 100);
+  text-decoration-line: none;
+  font-feature-settings: "lnum" 1, "tnum" 1;
+}
+
+.text-body-regular {
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: calc(1em * 0 / 100);
+  text-decoration-line: none;
+  font-feature-settings: "lnum" 1, "tnum" 1;
+}
+
+.text-footnote-medium {
+  font-family: "Roboto", sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: calc(1em * 0 / 100);
+  text-decoration-line: none;
+  font-feature-settings: "lnum" 1, "tnum" 1;
+}
+
+.text-footnote-regular {
+  font-family: "Roboto", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: calc(1em * 0 / 100);
+  text-decoration-line: none;
+  font-feature-settings: "lnum" 1, "tnum" 1;
+}
+
+.text-subhead-medium {
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: calc(1em * 0 / 100);
+  text-decoration-line: none;
+  font-feature-settings: "lnum" 1, "tnum" 1;
+}
+
+.text-subhead-regular {
+  font-family: "Roboto", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: calc(1em * 0 / 100);
+  text-decoration-line: none;
+  font-feature-settings: "lnum" 1, "tnum" 1;
+}
+
+.text-title-medium {
+  font-family: "Roboto", sans-serif;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: calc(1em * 0 / 100);
+  text-decoration-line: none;
+}
+
+.text-title-regular {
+  font-family: "Roboto", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: calc(1em * 0 / 100);
+  text-decoration-line: none;
+}
+
+.shadow {
+  box-shadow:
+    0px 4px 6px -4px var(--color-shadow-base),
+    0px 4px 15px -3px var(--color-shadow-base);
+}
+
+.shadow-light {
+  box-shadow: 0px 0px 0px 0.5px var(--color-shadow-stroke-light);
+}