Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update neumorphism #600

Open
wants to merge 56 commits into
base: next
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
56 commits
Select commit Hold shift + click to select a range
72b6588
Initialized_new_theme_neumorphism
Kron1749 May 20, 2024
6e0ebb9
added_box_shadow_primary_button
Kron1749 May 21, 2024
3d95560
structure_updated
Kron1749 May 21, 2024
e0d0efc
added_pre_styles_for_secondary_button
Kron1749 May 21, 2024
47b8184
structure_for_button_updated
Kron1749 May 21, 2024
c713ac2
updated_with_token_as_var
Kron1749 May 22, 2024
fd76c8e
created_secondary_button
Kron1749 May 22, 2024
f90641b
added_primary_alternative_button
Kron1749 May 22, 2024
035ba48
updated_with_tertiary_button
Kron1749 May 23, 2024
eae5353
added_action_button
Kron1749 May 23, 2024
92e81fb
updated_with_mixin_disabled
Kron1749 May 23, 2024
b60010a
added_s_pressed
Kron1749 May 23, 2024
e98a9c0
tertiary_small_fix
Kron1749 May 24, 2024
4e9e956
updated_token_as_var_links
Kron1749 May 24, 2024
63f000a
merged_neumophism_tokens_in_usual_theme
Kron1749 May 30, 2024
f304a36
updated_with_new_structure
Kron1749 May 30, 2024
02f0593
set_null_for_default_theme
Kron1749 May 31, 2024
2c1b8d4
updated_theme_neumorphism
Kron1749 May 31, 2024
13ccf02
added_theme_token
Kron1749 Jun 3, 2024
507b6b1
updated_with_theme_switch
Kron1749 Jun 5, 2024
0476412
updated_tokens_for_usual_theme
Kron1749 Jun 6, 2024
a83eb42
updated_with_multiple_themes_only_for_neumophism
Kron1749 Jun 6, 2024
e0b496a
updated_with_disabled
Kron1749 Jun 6, 2024
2873444
updated_with_button_main
Kron1749 Jun 6, 2024
81842f0
updated_with_theme_and_theme_neumophism_button
Kron1749 Jun 6, 2024
12c8c9b
delete_primary_hover_from_token
Kron1749 Jun 6, 2024
4d37655
delete_primary_tokens
Kron1749 Jun 6, 2024
af61b30
content_tokens
Kron1749 Jun 6, 2024
613fad0
deleted_border_state_some_shadows_token
Kron1749 Jun 6, 2024
11683ea
background_primary_token_deleted
Kron1749 Jun 6, 2024
84ee39a
deleted_tokens_color_button_primary
Kron1749 Jun 6, 2024
abb1c28
updated_secondary_button_theme
Kron1749 Jun 6, 2024
6b308c5
delete_tokens
Kron1749 Jun 7, 2024
a64f71d
fixed_shadow_button_tertiary
Kron1749 Jun 10, 2024
38f19dc
updated_with_vue_use_dark
Kron1749 Jun 14, 2024
eedd4c6
updated_with_default_button
Kron1749 Jun 17, 2024
fbfce28
added_checkbox_for_toggle-_theme
Kron1749 Jun 17, 2024
7735bcf
deleted_some_useless_files
Kron1749 Jun 17, 2024
b1bbdaf
updated_readme
Kron1749 Jun 18, 2024
f7738d2
fixed_checkbox
Kron1749 Jun 20, 2024
3f78121
updated_with_universal_apply_theme
Kron1749 Jun 20, 2024
1026952
import_update
Kron1749 Jun 20, 2024
e1dcacf
Merge branch 'next' into update_neumorphism
Kron1749 Jul 9, 2024
2aaa72d
updated_main_token
Kron1749 Jul 23, 2024
2fb6543
fixed_
Kron1749 Jul 23, 2024
c4e7143
border_fixed_background_added
Kron1749 Jul 23, 2024
1402876
updated_content_tertiary
Kron1749 Jul 23, 2024
d8f169d
fixed_tertiary_primary_added
Kron1749 Jul 23, 2024
31597b1
updated_main_tokens
Kron1749 Jul 23, 2024
1b5c71d
updated_with_content-quaternary
Kron1749 Jul 23, 2024
2cc1e72
primary_hover_updated
Kron1749 Jul 23, 2024
83945a0
deleted_useless_token
Kron1749 Jul 24, 2024
490a243
some_tokens_deleted
Kron1749 Jul 24, 2024
d9941c3
fixed_colors_in_components
Kron1749 Jul 24, 2024
5972024
Merge branch 'next' into update_neumorphism
Kron1749 Aug 20, 2024
83b6134
Feature/update text field neumorphism (#606)
Kron1749 Aug 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
added_box_shadow_primary_button
  • Loading branch information
Kron1749 committed May 21, 2024
commit 6e0ebb9746166dadc3b2e0af1b02b2c6d8f2ac3a
69 changes: 12 additions & 57 deletions packages/ theme_neumorphism/src/sass/lib.scss
Original file line number Diff line number Diff line change
@@ -45,65 +45,20 @@ $tokens-compiled: util.give-names-to-tokens($tokens-compiled, $vars-prefix);
'neu-button-primary-border-color-hover': #FDF7FB,
'neu-button-primary-border-color-pressed': #FDF7FB,

'util': (
'body': #fff,
'surface': #fff,
'surface-overlay': rgba(255, 255, 255, 0.7),
'overlay': rgba(0, 0, 0, 0.45),
),
'status': (
'success': #009900,
'success-background': #ddf4dd,
'success-background-hover': #b2f1b2,
'warning': #ff9900,
'warning-background': #fff2df,
'warning-background-hover': #ffe3ba,
'error': #ff0000,
'error-background': #fff9fa,
'error-background-hover': #ffd9df,
'info': #1070ca,
'info-background': #f3f6ff,
'info-background-hover': #dbe4ff,
'debug': #aa0e42,
'debug-background': #ffeef4,
'debug-background-hover': #f3d3de,
),
),
'shadow': (
'page-header': (
0px 24px 80px rgba(10, 2, 34, 0.07),
0px 10.0266px 33.4221px rgba(10, 2, 34, 0.0558697),
0px 5.36071px 17.869px rgba(10, 2, 34, 0.05437),
0px 3.00517px 10.0172px rgba(10, 2, 34, 0.0484701),
0px 1.59602px 5.32008px rgba(10, 2, 34, 0.0371562),
0px 0.664142px 2.21381px rgba(10, 2, 34, 0.0208172),
),
'page-header-light': (
0px 6px 30px rgba(10, 2, 34, 0.03),
0px 3px 9px rgba(10, 2, 34, 0.02),
0px 5.36071px 6px rgba(10, 2, 34, 0.04),
0px 3.00517px 7px rgba(10, 2, 34, 0.03),
0px 1.59602px 5.32008px rgba(10, 2, 34, 0.0371562),
),
'modal-window-header': (
0px -8px 80px rgba(10, 2, 34, 0.07),
0px 1px 33.4221px rgba(10, 2, 34, 0.0558697),
0px 0px 17.869px rgba(10, 2, 34, 0.05437),
0px 2px 10.0172px rgba(10, 2, 34, 0.0484701),
0px 1.59602px 5.32008px rgba(10, 2, 34, 0.0371562),
0px 0.664142px 2.21381px rgba(10, 2, 34, 0.0208172),
),
'floating-notification': (
0px 68px 80px rgba(24, 24, 29, 0.09),
0px 30.1471px 24.1177px rgba(24, 24, 29, 0.058643),
0px 12.5216px 10.0172px rgba(24, 24, 29, 0.045),
0px 4.5288px 3.62304px rgba(24, 24, 29, 0.031357),
),
'dropdown': (
0px 0px 4px rgba(45, 41, 38, 0.08),
0px 4px 16px rgba(45, 41, 38, 0.08),
),
'active-tab': 0px 1px 1px rgba(83, 86, 90, 0.1),
'button': (
'primary': (
'box-shadow': (1px 1px 5px rgba(255, 255, 255, 1),
-1px -1px 5px rgba(255, 255, 255, 1)),
'box-shadow-hover': (1px 1px 5px rgba(255, 255, 255, 0.7),
-1px -1px 5px rgba(255, 255, 255, 1),
0px 0px 20px rgba(247, 84, 163, 0.5)),
'box-shadow-pressed': (1px 1px 5px rgba(255, 255, 255, 0.7),
-1px -1px 5px rgba(255, 255, 255, 1),
0px 0px 20px rgba(247, 84, 163, 0.5))
)
)
),
),
)
52 changes: 11 additions & 41 deletions packages/ theme_neumorphism/src/sass/tokens.scss
Original file line number Diff line number Diff line change
@@ -1,61 +1,31 @@
$tokens: (
'ref': (
'ref': (
// empty, yet
),
'sys': (
'color': (

// Primary button: background colors
'neu-button-primary-background-color': null,
'neu-button-primary-background-color-hover': null,
'neu-button-primary-background-color-pressed': null,
'neu-button-primary-background-color-alternative': null,
'neu-button-primary-background-color-alternative-active': null,

// Primary button: border colors
'neu-button-primary-border-color': null,
'neu-button-primary-border-color-hover': null,
'neu-button-primary-border-color-pressed': null,
// Utility
'util':
(
'body': null,
'surface': null,
'surface-overlay': null,
'overlay': null,
),
// Status
'status':
(
'success': null,
'success-background': null,
'success-background-hover': null,
'warning': null,
'warning-background': null,
'warning-background-hover': null,
'error': null,
'error-background': null,
'error-background-hover': null,
'info': null,
'info-background': null,
'info-background-hover': null,
'debug': null,
'debug-background': null,
'debug-background-hover': null,
),
'neu-button-primary-border-color-pressed': null
),
'shadow': (
'page-header': null,
'page-header-light': null,
'modal-window-header': null,
'floating-notification': null,
'dropdown': null,
'active-tab': null,
),
'button': (
'primary': (
'box-shadow': null,
'box-shadow-hover': null,
'box-shadow-pressed': null
)
)
)
),
'comp': (
// empty, yet
),
)
);

$typography-tokens: d1, d2, h1, h2, h3, h4, h4-bold, h5, h6, h7, ch1, ch2, ch3, p1, p2, p3, p4, p5, s1;
4 changes: 4 additions & 0 deletions packages/ui/src/components/Button/SButton.vue
Original file line number Diff line number Diff line change
@@ -182,15 +182,19 @@ const font = computed(() => {
background-color: theme_neumorphism.token-as-var('sys.color.neu-button-primary-background-color');
color: theme.token-as-var('sys.color.content-on-background-inverted');
border: 1px solid theme_neumorphism.token-as-var('sys.color.neu-button-primary-border-color');
box-shadow: theme_neumorphism.token-as-var('sys.shadow.button.primary.box-shadow');
transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;

&:hover {
background-color: theme_neumorphism.token-as-var('sys.color.neu-button-primary-background-color-hover');
border: 1px solid theme_neumorphism.token-as-var('sys.color.neu-button-primary-border-color-hover');
box-shadow: theme_neumorphism.token-as-var('sys.shadow.button.primary.box-shadow-hover');
}

&:active {
background-color: theme_neumorphism.token-as-var('sys.color.neu-button-primary-background-color-pressed');
border: 1px solid theme_neumorphism.token-as-var('sys.color.neu-button-primary-border-color-pressed');
box-shadow: theme_neumorphism.token-as-var('sys.shadow.button.primary.box-shadow-pressed');
}
}